Bootstrap 学习笔记(三)栅格布局

mac2022-06-30  152

栅格化布局

所谓栅格化布局,就是将网页的宽度按一定相同比例分开,不同的Div占不同的比例。

栅格系统就是来描述设置当前子元素在指定屏幕下,占据当前屏幕默认12等分中的n(1~12)等分

先添加容器 container/container-fluid在容器中添加 row在row中添加子元素,设置栅格样式在子元素添加具体内容

例如

设置当前div在xs屏幕下占据当前屏幕 12等分中的4等分

<div class="container"> <div class="row"> <div class="col-xs-4"></div> <div class="col-xs-4"></div> <div class="col-xs-4"></div> <div class="col-xs-4"></div> </div> </div>

由于Bootstrap的默认栅格一行为12份。 所以,当这样设置后,不管屏幕的分辨率如何,每一个占3/1。 每一行只显示三个。

其中

* w > 1200:lg large 大屏幕 * w:992~1200:md middle 中等屏幕 * w: 768~992: sm small 小屏幕 * w < 768:xs extra small 超小屏幕

例如

w < 768px 12等分 w 768~992 6等分 w 992~1200 4等分 w > 1200px 3等分 <div class="row"> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div> </div>

最新回复(0)