bootstrap删格系统如何理解

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。

我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理：

网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

在使用的时候大家可以根据实际情况重新编译LESS（或Sass）源码来修改12这个数值（也就是换成24或32，当然你也可以分成更多，但不建议这样使用）。

<div class="container-fluid">   <div class="row">     ...   </div> </div>

<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把每一行分成12等份，“col-md-数字”中的“数字”从1-12中取，数字等于几，就占几份；

相关推荐：《bootstrap入门教程》

.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>

屏幕在769px-992px之间时：.col-md-已失效，而.col-sm- 还处在 作用范围内，如下：

屏幕宽度小于768px时，.col-sm-已失效 只有.col-xs- 不受屏幕宽度影响，这时候就由.col-xs-起作用，如下：

以上就是bootstrap删格系统如何理解的详细内容，更多内容请关注技术你好其它相关文章！