Bootstrap, The Journey Continues
Finally we can move on to using the service I have been espousing the virtues of since my first project, assuming knowledge of the grid this should be simple.
The first and foremost bonus that Bootstrap provides is that it automatically changes the default actions of certain html tags as well as the default text that is used to display. This immediately changes up a few of the factors that lead to boring webpage design.
However, we aren’t here to focus on just the small things that are changed. Lets look at some of what Bootstrap offers beyond the basic.
The following example shows the very basics for setting up a bootstrap page (minus the imports discussed early and the usual barrage of tags (head, body, etc.))
This example shows a fluid container, within which is contained a row, divided into three column groups of four each (adding up to 12!). These columns are specifically told to show up side by side on small screens and up only stacking atop one another on extra small screens.
Now lets add in a couple of Bootstrap functionalities shall we?
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">The Stuff</a></li>
<li><a href="#">More of Note</a></li>
<li><a href="#">Lost Chapters</a></li>
Lets look at the table first, other classes that can be used within the table tag are
Any of them can be used, whether in conjunction with one another or as standalone classes their uses should be fairly straight forward however simply
Striped introduces a zebra striping of background colours
Bordered introduces a border around the items and table
Hover causes the row the mouse cursor is over to be highlighted
And condensed causes extra cushion space to be cut down
The second part, the dropdown menu is fairly straightforward, the class denotes the fact that it should be displayed as a button, the button type and the fact that it will be used as a toggle.
The third and final of my simple examples is showing more of what one can do with an unordered list. Namely that it can be used to create beautiful looking tabs that are easy to set up and use.
This grouping of examples was chosen at random from many of the display elements available in Bootstrap, for comprehensive examples of all of the Bootstrap services please go to the tutorials at W3schools.