Wednesday, August 5, 2015

Bootstrap Tutorial Lesson 11 - Responsive Tables

In this Step by step Bootstrap Tutorial Lesson 11 - Responsive Tables 
   we experiment with several kinds of responsive tables, Condensed, Bordered, Hover, Striped , and more, shown in different formats, by  building an Application for Mobile & desktop computers . This App will display the Bootstrap Tables in all screen sizes .
You can download the complete app from the following GitHub repository:
https://github.com/CarmelSoftware/jQueryPlugin_BootstrapTable

This is how this is displayed:

Bootstrap Tutorial Lesson 11 - Responsive Tables   1

Bootstrap Tutorial Lesson 11 - Responsive Tables  2



And this is the way how it looks in an Emulator , for Nexus Galaxy devices:    

Bootstrap Tutorial Lesson 11 - Responsive Tables  3




Bootstrap Tutorial Lesson 11 - Responsive Tables


You can start this app by using a free Bootstrap template from www.initializr.com/ (explained in this short post : Bootstrap Templates), or you can write the following jQuery and Bootstrap links in the HTML5 file's Head:


<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">


Bootstrap Tutorial Lesson 11 - Responsive Tables  4


Also put the following references before closing the </body> element:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

Bootstrap Tutorial Lesson 11 - Responsive Tables 5

To setup a Mobile Emulator, read this short tutorial on installing the FREE Ripple Emulator.


1) Using Bootstrap Responsive Tables in a responsive Web Page:


The Bootstrap supports elegant tables that you can display in several ways. Because the problems planted by small screens, Bootstrap allows you to add scrolling to tables when displayed in them. Using the Bootstrap class "table-responsive", the columns will automatically scroll horizontally according to the screen size, meaning , under the 768px screens wide , tables will be responsive:

Bootstrap Tutorial Lesson 11 - Responsive Tables  6

Also, we achieve a hover striped table by using these classes.

All the Bootstrap Tables  documentation can be found in the GetBootstrap Web Site.

2) Using Bordered Condensed Tables in a Responsive Bootstrap Web Page:

The difference between this kind of tables and the others reside in a "condensed" padding style, and the borders that these classes define:

Bootstrap Tutorial Lesson 11 - Responsive Tables  7



The Bootstrap allows to enable the contextual helper classes such as warning, danger , etc, which is written this way :

Bootstrap Tutorial Lesson 11 - Responsive Tables  8




This is the style added for the App:

body {
    padding-top: 60px;
    padding-bottom: 20px;
}

.jumbotron h1 {
    
    color: #a8a3a3;
}

h2 {
    font: 900 18px Verdana;
    color: #a8a3a3;
}

.well p{
    font: 700 12px Verdana !important;    
    color: #a8a3a3;
}

.well-footer, .well-footer a {
    font: 900 10px Comic Sans MS;
    color: #a8a3a3;
}

.alert {
    font: 600 9px Verdana;
}

.centered {
    text-align: center;
}





That's all. Our Tables will be displayed this way:

1- In Mobile devices : 



Bootstrap Tutorial Lesson 11 - Responsive

Bootstrap Tutorial Lesson 11






The displays for Nexus devices screens is as follows:

Bootstrap  Responsive Tables




2- On Medium and Big desktops:


Tutorial Lesson 11 - Responsive Tables

 Lesson 11 - Responsive Tables

Tables




      by Carmel Schvartzman


כתב: כרמל שוורצמן