栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

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



Box 1

Box 2

Box 3

Box 4

Box 5

Box 6

Box 7

Box 8

Box 9

Box 10

Box 11

Box 12

其中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的作用会破坏网格的结构,可通过使用响应类避免,下面是一个完整的网格代码:



Box 1

Box 2

Box 3

Box 4

Box 5

Box 6

Box 7

Box 8

Box 9

Box 10

Box 11

Box 12

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

This paragraph is visible only on extra small devices.

This paragraph is visible only on small devices.

This paragraph is visible only on medium devices.

This paragraph is visible only on large devices.

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



This paragraph is hidden only on medium devices.

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

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

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/96915.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号