BootStrap3学习笔记(一)之网格系统

前端技术 2023/09/07 JavaScript

如果显示网格，代码应类似这样：

<div class=\"container\">
<div class=\"row\">
<div class=\"col-md-4\"><p>Box 1</p></div>
<div class=\"col-md-4\"><p>Box 2</p></div>
<div class=\"col-md-4\"><p>Box 3</p></div>
<div class=\"col-md-4\"><p>Box 4</p></div>
<div class=\"col-md-4\"><p>Box 5</p></div>
<div class=\"col-md-4\"><p>Box 6</p></div>
<div class=\"col-md-4\"><p>Box 7</p></div>
<div class=\"col-md-4\"><p>Box 8</p></div>
<div class=\"col-md-4\"><p>Box 9</p></div>
<div class=\"col-md-4\"><p>Box 10</p></div>
<div class=\"col-md-4\"><p>Box 11</p></div>
<div class=\"col-md-4\"><p>Box 12</p></div>
</div>
</div>

其中col-*-*表示不同类型设备下在网格系统中占据的列宽


极小 
手机(<768px)		 小 
平板(≥768px)		 中
计算机(≥992px)		 大 
计算机(≥1200px)
container最大宽度 None (auto) 750px 970px 1170px
类名前缀 .col-xs- .col-sm- .col-md- .col-lg-
最大列宽 Auto ~62px ~81px ~97px
列间隙 15px (i.e. 30px)

当列的高度不同时，由于float的作用会破坏网格的结构，可通过使用响应类避免，下面是一个完整的网格代码：

<div class=\"container\">
<div class=\"row\">
<div class=\"col-sm-6 col-md-4 col-lg-3\"><p>Box 1</p></div>
<div class=\"col-sm-6 col-md-4 col-lg-3\"><p>Box 2</p></div>
<div class=\"clearfix visible-sm-block\"></div>
<div class=\"col-sm-6 col-md-4 col-lg-3\"><p>Box 3</p></div>
<div class=\"clearfix visible-md-block\"></div>
<div class=\"col-sm-6 col-md-4 col-lg-3\"><p>Box 4</p></div>
<div class=\"clearfix visible-sm-block\"></div>
<div class=\"clearfix visible-lg-block\"></div>
<div class=\"col-sm-6 col-md-4 col-lg-3\"><p>Box 5</p></div>
<div class=\"col-sm-6 col-md-4 col-lg-3\"><p>Box 6</p></div>
<div class=\"clearfix visible-sm-block\"></div>
<div class=\"clearfix visible-md-block\"></div>
<div class=\"col-sm-6 col-md-4 col-lg-3\"><p>Box 7</p></div>
<div class=\"col-sm-6 col-md-4 col-lg-3\"><p>Box 8</p></div>
<div class=\"clearfix visible-sm-block\"></div>
<div class=\"clearfix visible-lg-block\"></div>
<div class=\"col-sm-6 col-md-4 col-lg-3\"><p>Box 9</p></div>
<div class=\"clearfix visible-md-block\"></div>
<div class=\"col-sm-6 col-md-4 col-lg-3\"><p>Box 10</p></div>
<div class=\"clearfix visible-sm-block\"></div>
<div class=\"col-sm-6 col-md-4 col-lg-3\"><p>Box 11</p></div>
<div class=\"col-sm-6 col-md-4 col-lg-3\"><p>Box 12</p></div>
</div>
</div>

其中的visible-*-*表示在何种设备下以何种display属性显示，由于极小设备默认为单列显示，因此无需使用响应类定制。
响应类也可用在普通标记中，比如下面的代码：

<p class=\"visible-xs-block\">This paragraph is visible only on extra small devices.</p>
<p class=\"visible-sm-block\">This paragraph is visible only on small devices.</p>
<p class=\"visible-md-block\">This paragraph is visible only on medium devices.</p>
<p class=\"visible-lg-block\">This paragraph is visible only on large devices.</p>

类似的，也可使用hidden-*，设置在特定设备中隐藏：

<p class=\"hidden-xs\">This paragraph is hidden only on extra small devices.</p>
<p class=\"hidden-sm\">This paragraph is hidden only on small devices.</p>
<p class=\"hidden-md\">This paragraph is hidden only on medium devices.</p>
<p class=\"hidden-lg\">This paragraph is hidden only on large devices.</p>

通过响应类还可以设置打印时的格式：

以上所述是小编给大家介绍的BootStrap3学习笔记(一)之网格系统，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对phpstudy网站的支持！

本文地址：https://www.stayed.cn/item/20194

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案