Bootstrap栅格系统实例
网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，内容可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：
复杂应用
在bootstrap中，.col-xs-应用于(<768px)的情况，.col-sm-应用于(≥768px and <992px)的情况，.col-md-应用于(≥992px and <1200px)的情况，.col-lg-应用于(≥1200px)的情况
而.col-xs-、.col-sm-、.col-md-、.col-lg-是可以用混合使用的
比如，要实现≥992px的时候分四列一排，(≥768px and <992px)的时候两列一排，(<768px)的时候一列一排
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"> <style> .row div{border:1px solid black;} </style> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-3 col-sm-6">aaa</div> <div class="col-md-3 col-sm-6">bbb</div> <div class="col-md-3 col-sm-6">ccc</div> <div class="col-md-3 col-sm-6">ddd</div> </div> </div> </body> </html> 
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知