[TOC] # 栅格化系统 Bootstrap是做响应式布局，UI框架，配合JQuery使用 ## 1初认识 Bs的设计者把所有的终端设备按分辨率来分成4个档： \>\= 1200px 大屏幕 版心 1170 \>\=992px 中等屏幕 版心 970 \>\=768px 小屏幕 版心 750 <768px 超小屏幕（手机） 版心 自动撑满 在把屏幕分辨率分为4档之后，**再把版心分成12列**，让盒子占其中的多少列，因为版心宽度不同，盒子在不同档次的分辨率下实际宽度就不同了，所以利用栅格系统把盒子做成响应式。 ### 1.1视口标签 **作用** 禁止移动端的浏览器对我们的页面内容进行缩放 ## 2如何让盒子占多少列 -----给类： col-lg-num 盒子在**大屏幕**下占num列（在小屏幕中会独占一行 ） col-md-num 盒子在**中等屏幕、大屏幕**下占num列 col-sm-num 盒子在**小屏幕、中等屏幕、大屏幕**下占num列 col-xs-num 盒子在**所有屏幕**下占num列 ``` <div class="container"> /*版心盒子*/ <div class="row"> /*定义行*/ <!--.col-lg-1{$}*12--> <div class="col-lg-1">1</div> /*12列*/ <div class="col-lg-1">2</div> <div class="col-lg-1">3</div> <div class="col-lg-1">4</div> <div class="col-lg-1">5</div> <div class="col-lg-1">6</div> <div class="col-lg-1">7</div> <div class="col-lg-1">8</div> <div class="col-lg-1">9</div> <div class="col-lg-1">10</div> <div class="col-lg-1">11</div> <div class="col-lg-1">12</div> </div> </div> ``` ## 3偏移排序嵌套 ### 3.1列偏移 会影响其他的盒子 col-lg-offset -num ### 3.2列排序 不会影响其他的盒子 col-lg-push-num（向右偏移） col-lg-pull-num（向左偏移） ### 3.3组合 如果列格子col-xx-num中需要再分列，则称为列嵌套。不管该格子原先占多少列，始终当作12列重新开始分。 ***** **清除浮动** **clearfix 加在出问题盒子的前面**