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

编程学习 2021-07-04 19:59www.dzhlxh.cn编程入门
本文给大家介绍BootStrap3网格系统的相关知识,本文介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起学习吧

如果显示网格,代码应类似这样:

<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的作用会破坏网格的结构,可通过使用响应类避免,狼蚁网站SEO优化是一个完整的网格代码:

<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属性显示,由于极小设备默认为单列显示,因此无需使用响应类定制。
响应类也可用在普通标记中,比如狼蚁网站SEO优化的代码:

<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学习笔记(一)之网格系统,希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板