最近使用了目前很火的框架bootstrap来写页面，bootstrap目前已经出到4.0，但是我目前还是在用3.0版本。Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目，bootstrap的使用方法很简单就是在官网下载好相关文档再引进bootstrap.js , jquery.js , bootstrap.css，通过给标签添加相应的类名就可以使用bootstrap里面的css样式，组件，js插件，而且官网还有用于解读的文档和实际引用的例子，bootstrap的类名基本都非常的语义化，再多看官网文档解释是非常容易上手的一个框架，在使用boostrap过程中，发现一个非常好用的东西那就是栅格化系统，栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局， bootstrap 栅格系统的工作原理：
“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-*不存在， 也影响大屏幕设备。当然bootstrap的强大功能远远不止这些，就不一一列举。总的来说bootstrap不太适合做那些页面布局很复杂，内容较多，特别炫酷的网站，因为引用bootstrap要改css样式，组件，插件太多了，还容易造成代码混乱，还不如直接不用更快，特别是对于新手前端工程师是来说更不推荐使用，但是它很适合做那些企业内部的网站，一般此类网站不会对页面的布局没有过多的要求，只要体现主要功能即可，bootstrap就完全是切合此类网站的特性。
网友评论