BootStrap3学习笔记(一)之网格系统
作者:mrr 时间:2024-04-29 13:43:48
如果显示网格,代码应类似这样:
<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学习笔记(一)之网格系统网站的支持!
标签:bootstrap3,网格,系统
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python读取mat文件生成h5文件的实现
2022-08-06 08:43:28
![](https://img.aspxhome.com/file/2023/6/113106_0s.png)
Python爬虫urllib和requests的区别详解
2023-04-24 23:25:27
![](https://img.aspxhome.com/file/2023/3/133773_0s.jpg)
Python 高级库15 个让新手爱不释手(推荐)
2023-06-13 18:11:03
![](https://img.aspxhome.com/file/2023/3/105633_0s.png)
使用Python判断质数(素数)的简单方法讲解
2022-07-23 22:34:19
asp 动态数组 提供Add、Insert、Remove、RemoveAt、Search等方法。
2011-03-17 11:10:00
如何获得刚插入数据库的记录的ID号?
2009-09-10 11:33:00
DIV与Table布局在大型网站的可用性比较
2007-10-08 12:46:00
![](https://img.aspxhome.com/file/UploadPic/200710/8/2007108125233616s.jpg)
Python配置文件解析模块ConfigParser使用实例
2023-10-19 09:10:19
centos下mysql主从复制设置详解
2024-01-20 23:27:06
python中的decorator的作用详解
2021-05-24 16:44:40
python os用法总结
2021-03-16 19:30:16
![](https://img.aspxhome.com/file/2023/9/81829_0s.png)
Python Django 封装分页成通用的模块详解
2023-06-24 13:56:15
![](https://img.aspxhome.com/file/2023/3/103523_0s.png)
如何使用 SQL Server 数据库查询累计值
2008-12-03 15:27:00
vue 项目@change多个参数传值多个事件的操作
2024-06-07 16:01:08
![](https://img.aspxhome.com/file/2023/8/121978_0s.jpg)
vuex 多模块时 模块内部的mutation和action的调用方式
2024-04-09 10:47:11
![](https://img.aspxhome.com/file/2023/5/139825_0s.jpg)
Python绘制组合图的示例
2023-07-30 01:34:31
![](https://img.aspxhome.com/file/2023/0/128210_0s.png)
asp程序运行速度测试
2008-02-11 19:11:00
SqlServer 实用操作小技巧集合第1/2页
2024-01-28 13:19:33
Python执行ping操作的简单方法
2022-09-22 12:09:22
javascript根据像素点取位置示例
2023-09-03 22:58:54