Thursday 12 May 2016

How Twitter Bootstrap Works


Twitter Bootstrap is very well known CSS framework today . It is easy to Use CSS framework that helps in Creating Responsive Web pages . I am going to give a Brief Overview of How Bootstrap Differentiate between Different Screen Sizes

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

Media queries

Bootstrap Uses Media Queries To Differentiate Between Screen Sizes . See Below What is code behind these media queries

/*==================================================
= Bootstrap 3 Media Queries =
==================================================*/
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px){
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px){
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px){
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px){
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px){
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px){
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px){
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px){
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px){
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px){
}

Bootstrap Grid Options On Different Screens


Bootstrap Grid Options

Share this

0 Comment to "How Twitter Bootstrap Works "

Post a Comment