bootstrap · 前端

## 栅格 ![](https://box.kancloud.cn/113bd2d484b89edd6911fccdfd162cc8_1782x994.png) ## 说明使用bootstrap 一定要知道向上兼容,向下覆盖. xs -- extra samll 最小屏 sm -- small 小屏 md -- middle 中屏 lg -- large 大屏 ## 案例引入bootstrap. 下面可以实现最小屏1等份,小屏6等份,中屏4等份,大屏3等份的效果. ``` <style> div{ border: 1px solid red; height: 100px; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div> </div> </div> </body> ``` ## push/pull (列排序) 通过定位来实现的,所以会和其他元素重叠. ``` <style> div{ border: 1px solid red; height: 100px; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-1">1</div> <div class="col-xs-1 col-xs-push-2">2</div> <div class="col-xs-1">3</div> <div class="col-xs-1">4</div> <div class="col-xs-1 col-xs-pull-3">5</div> <div class="col-xs-1">6</div> <div class="col-xs-1">7</div> <div class="col-xs-1">8</div> <div class="col-xs-1">9</div> <div class="col-xs-1">10</div> <div class="col-xs-1">11</div> <div class="col-xs-1">12</div> </div> </div> </body> ``` ## 列嵌套