Hello everybody,
today I want to write some moments about bootstrap.
If to speak in general bootstrap is beast which has some javascript and css code.
One of the ways to modify behaviour of bootstrap is to add reference to bootstrap style, and then add reference to your customization of css in which you can change boostrap settings with overriding basic bootstrap code. For example you can achieve it in the following way:
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/yourCustomized.css">
One more interested features of bootstrap is grid layout of something.
If in your html you'll write something like this:
<section id="body" class="container">
then you section body will have 12 cells. And you can manage postion and size of cell with help of bootstrap classes.
The following options are awailable:
- col-lg-* - screens which are wider or equal then 1200 px
- col-md-* screens which are wider or equal then 992 px
- col-sm-* screens which are wider or equal then 768 px
- col-xs-* screens which are smaller or equal then 768 px
Another interesting feature is building architecute of bootstrap. It is build with mobile first approach. If to put simply it means that it was built initially for mobile devices with small screens ( screen smaller then 768 px ), then with bigger ( more then 768 px ), more bigger ( more then 992 px ) and large ( more then 1200 px ). Try to guess from which style life of bootstrap started?
So, what is value of all of this staff?
One of the most interesting features is option of defining look and feel of your "cells" at each platform.
For example you can write something that will be applied to four platform for which bootstrap was initially builted:
class="col-lg-3 col-md-6 col-sm-4 col-xs-3"
That statement will be interpreted in the following way:
locate item with that class as third column on large screen, as six column on middle screen at fourth column at small screen and as thir column at extra small screen.
Other usefull classes of bootstrap which are particularly useful for images:
pull-left - locate image with binding to left side
pull-right - locate image with binding to right side
img-thumbnail - display image as thumbnail instead of displaying at as full size image
hidden-md - don't display image at middle size screen
visible-md - always display image at middle size screen.
Very usefull site bootswatch.com - it has free bootstrap themes, which you can use for free without fear of court suit against you.