Bootstrap 栅格系统 学习总结
　　Bootstrap框架是如今最流行的前端框架之一，Bootstrap功能强大，简单易学，很符合实际应用场景。
　　只是Bootstrap的内容较多，新手往往不能很快的熟练运用Bootstrap。
　　这里，我就对Bootstrap中非常重要好用的栅格系统做一个以实例为向导的总结：
（1）第一步：创建栅格系统的容器　　　&
&div class="container-fluid"&
&div class="row"&
&/div&解释：为了寄予栅格系统合适的排列和padding，要把每一行&row&包含在一个容器中，而这个容器我们用class名为&container&或者&container-fluid&,这两个class是Bootstrap为我们事先设计好的.container是固定宽度，居中显示:下面是Bootstrap中.container类的代码
.container-fluid是 100% 宽度：下面是Bootstrap中.container-fluid类的代码
(2)第二步：创建合适的栅格系统
&div class="row"&
　　&div class="col-md-1"&.col-md-1&/div&
　　&div class="col-md-1"&.col-md-1&/div&
　　&div class="col-md-1"&.col-md-1&/div&
　　&div class="col-md-1"&.col-md-1&/div&
　　&div class="col-md-1"&.col-md-1&/div&
　　&div class="col-md-1"&.col-md-1&/div&
　　&div class="col-md-1"&.col-md-1&/div&
　　&div class="col-md-1"&.col-md-1&/div&
　　&div class="col-md-1"&.col-md-1&/div&
　　&div class="col-md-1"&.col-md-1&/div&
　　&div class="col-md-1"&.col-md-1&/div&
　　&div class="col-md-1"&.col-md-1&/div&&/div&&div class="row"&
　　&div class="col-md-8"&.col-md-8&/div&
　　&div class="col-md-4"&.col-md-4&/div&&/div&&div class="row"&
　　&div class="col-md-4"&.col-md-4&/div&
　　&div class="col-md-4"&.col-md-4&/div&
　　&div class="col-md-4"&.col-md-4&/div&&/div&&div class="row"&
　　&div class="col-md-6"&.col-md-6&/div&
　　&div class="col-md-6"&.col-md-6&/div&&/div&
解释：上面这段是我从Bootstrap官网复制下来的，每一个&row&代表一行，而内部的&col-md-数字&代表一个单元格；　　　　　　　　Bootstrap把每一行分成12等份，&col-md-数字&中的&数字&从1-12中取，数字等于几，就占几份；　　　　合理的选择单元格的数字配置，再往单元格中添加我们想要的内容，这样一个栅格系统就完成了！　　　　
(3)进阶：单元格的类还有其他选择 ,一共有四种：　　　　　　　　.c0l-xs-　　无论屏幕宽度如何，单元格都在一行，宽度按照百分比设置；试用于手机；　　　　.col-sm-　　屏幕大于768px时，单元格在一行显示；屏幕小于768px时，独占一行；试用于平板；　　　　.col-md-　　屏幕大于992px时，单元格在一行显示；屏幕小于992px时，独占一行；试用于桌面显示器；　　　　.col-lg-　　屏幕大于1200px时，单元格在一行显示；屏幕小于1200px时，独占一行；适用于大型桌面显示器；　　　　　　　　以上的情况可以通过下面的代码清晰的理解：　　　　　　　　
&div class="container"& 　　&div class="row"&
　　　　&div class="col-xs-12 col-sm-6 col-md-8"&.col-xs-12 .col-sm-6 .col-md-8&/div&
　　　　&div class="col-xs-6 col-md-4"&.col-xs-6 .col-md-4&/div&　　&/div&　　&div class="row"&
　　　　&div class="col-xs-6 col-sm-4"&.col-xs-6 .col-sm-4&/div&
　　　　&div class="col-xs-6 col-sm-4"&.col-xs-6 .col-sm-4&/div&
　　　　&div class="col-xs-6 col-sm-4"&.col-xs-6 .col-sm-4&/div&　　&/div& &/div&
　　　　屏幕大于992px时：.col-md-8 和.col-md-4 还处于 作用范围内，如下
　　　　　　
　　　　屏幕在769px-992px之间时：.col-md-已失效，而.col-sm- 还处在 作用范围内，如下
　　　　屏幕宽度小于768px时，.col-sm-已失效 &只有.col-xs- 不受屏幕宽度影响，这时候就由.col-xs-起作用，如下
　　　　　　　　　　
阅读(...) 评论()拒绝访问 | www.wangchao.net.cn | 百度云加速
请打开cookies.
此网站 (www.wangchao.net.cn) 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(ca4cd8-ua98).
重新安装浏览器，或使用别的浏览器&div class=&container&&&br&
&div class=&row&&
&div class=&row&&&br&
&div class=&col-md-1&&
&div class=&row&&&br&
&div class=&container&&
&div class=&col-md-1&&&br&&div class= &row&&
行必须在容器中，行后的直接子元素必须是列，列下可嵌套行。
框架的网格系统工作原理如下：
必须包含在容器（
.container
）中，以便为其赋予合适的对齐方式和内距
&div class=&
&div class=&
中可以添加列
，但列数之和不能超过平分的总列数，比如
&div class=&container&&
&div class=&row&&
&div class=&col-md-
&div class=&col-md-
、具体内容应当放置在列容器（
）之内，而且只有列（
）才可以作为行容器
的直接子元素
、通过设置内距（
）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（
）来抵消内距
关于列的嵌套
框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（
）容器，然后在这个行容器中插入列。但在列容器中的行容器（
），宽度为
时，就是当前外部列的宽度。
代码也不规范啊 根本看不出是什么结构
为什么这么多傻比bootstrap的题目，这属于原生html，css吗？前端框架那么多，这个框架也不见得人人都用吧。
Bootstrap 框架的网格系统工作原理如下：
1 、数据行 (.row) 必须包含在容器（ .container ）中，以便为其赋予合适的对齐方式和内距 (padding) 。
如： &div class=& container &&
&div class=& row &&&/div&
2 、在行 (.row) 中可以添加列 (.column) ，但列数之和不能超过平分的总列数，比如 12 。
如： &div class=&container&&
&div class=&row&&
&div class=&col-md- 4 &&&/div&
&div class=&col-md- 8 &&&/div&
3 、具体内容应当放置在列容器（ column ）之内，而且只有列（ column ）才可以作为行容器 (.row) 的直接子元素
4 、通过设置内距（ padding ）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（ margin ）来抵消内距 (padding) 的影响
在BS系统中container下面包含row（行）下面包含column（列）
在列的下面可以嵌套行，so
行嵌套container&row&col 列嵌套col&row
都是单标签，没有闭合我也是醉了
怎么出这样的代码啊？div是单标签吗？看着烦
这道题你会答吗？花几分钟告诉大家答案吧！
扫描二维码，关注牛客网
下载牛客APP，随时随地刷题
京ICP备号-4
扫一扫，把题目装进口袋Bootstrap入门（17/30）——栅格系统实例
Bootstrap入门打卡30天，第17天走起！
今天tity带大家来详细学习一下关于Bootstrap中的栅格系统。
首先，Bootstrap栅格系统将屏幕可见区域等分为了12份，在class命名中比如【col-md-5】，就表示【在中等大小的屏幕上这一列占有5个栅格】，在每一行中这些等级的class后缀相加的个数如果没有超过12，则它们会在同一行排列，如果超过了12，那么它们会再起一行往下排列。
1.等列宽排列
这种的布局，是指在某一行中的一些列是相等大小的宽度，即可以是2列，3列，4列，6列，12列，这里给出一个三列的例子：
2.列宽不相等
这种的布局在页面中也不叫常见，比如左右两侧为较小的列表或推荐，而中间为文章的内容主体。对于这种形式的布局与上面等列的布局类似，只是这里同级class后缀的数字是不同的，如下：
3.占有12个栅格的列，这相当于是100%的宽度，这种情况下我们并不需要为其设置class，比如class为【col-md-12】，如果非要设置，那也是因为我们为col开头的class设置了一定的样式。
4.栅格的嵌套
我们可以在一个栅格中再嵌入一个新的栅格系统，而嵌入进去的栅格的总数又变为了12，而并不是其嵌入进去的父元素的列宽，具体如下：
5.各种设备上的适配
我们都知道，Bootstrap的栅格系统定义了四种大小的屏幕显示，其中超大屏为lg，大屏为md，平板为sm，手机为xs。我们之所以会使用Bootstrap来布局，就是因为其强大的适配功能，而要实现适配只需要为其在不同的设备大小下设置不同的class，tity给大家一个适应平板与手机的例子：（虽然这里只给了平板和手机的class，但针对于大屏电脑和超大屏电脑如果没有设置class的话会自动向下寻找class来进行适配，这里的话超大屏和大屏所显示的就与平板上显示的布局是一样的，这也就是说当为两个不同尺寸的设备设置的布局相同时，我们只需设置较小的class即可。）
6.清除浮动
清除浮动主要是发生在断点处的折行位置，当同一行内的列与列之间的高度不一致的时候底部
的列会直接浮动到上面去，具体如下图：
对于上述情况，我们需要清除一下浮动，具体的class有【clearfix】、【visible-lg】、【visible-md】、【visible-sm】、【visible-sx】用来分别对应不同断点处的清除浮动，具体如下：
7.列偏移和列排序
在实现不同屏幕上的适配时，我们可能会将每一列的位置、先后顺序略微做一些调整，这是就用到了列偏移（offset）和列排序（push/pull），这里我们给出一个列偏移的例子：
每一个大神都是从小白起步的，相信自己，你也可以！
技术本无价，原创更不易。
如果您觉得tity的文章对您有所帮助，您可以支付宝（左），也可以微信（右）。
如果您想获得更多关于前端方面的知识，
请加入QQ交流群【专注前端】获得更多的信息和帮助。
希望您能在前端的路上越走越远，也希望您的前端职涯也越来越好。
本文为tity原创作品，如若转载，请注明出处。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。}