其中col-*-*表示不同类型设备下在网格系统中占据的列宽
ottom: rgb(220,235) 1px solid; border-left: rgb(220,235) 1px solid; padding-bottom: 7px; margin: 0px; padding-left: 7px; padding-right: 7px; background: rgb(248,248,248); color: rgb(0,0); font-size: 13px; vertical-align: top; border-top: rgb(220,235) 1px solid; padding-top: 7px">
极小 ottom: 0px; border-left: 0px; padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: block; word-wrap: break-word; color: rgb(102,102,102); font-size: 11px; vertical-align: baseline; word-break: normal; border-top: 0px; border-right: 0px; padding-top: 5px">手机(<768px) |
ottom: rgb(220,235) 1px solid; padding-top: 7px">小 ottom: 0px; border-left: 0px; padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: block; word-wrap: break-word; color: rgb(102,102); font-size: 11px; vertical-align: baseline; word-break: normal; border-top: 0px; border-right: 0px; padding-top: 5px">平板(≥768px) |
ottom: rgb(220,235) 1px solid; padding-top: 7px">中 ottom: 0px; border-left: 0px; padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: block; word-wrap: break-word; color: rgb(102,102); font-size: 11px; vertical-align: baseline; word-break: normal; border-top: 0px; border-right: 0px; padding-top: 5px">计算机(≥992px) |
ottom: rgb(220,235) 1px solid; padding-top: 7px">大 ottom: 0px; border-left: 0px; padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: block; word-wrap: break-word; color: rgb(102,102); font-size: 11px; vertical-align: baseline; word-break: normal; border-top: 0px; border-right: 0px; padding-top: 5px">计算机(≥1200px) |
ottom: rgb(220,235) 1px solid; padding-bottom: 5px; margin: 0px; padding-left: 5px; padding-right: 5px; color: rgb(72,72,72); vertical-align: top; border-top: rgb(220,235) 1px solid; padding-top: 5px">container最大宽度 | ottom: rgb(220,235) 1px solid; padding-top: 5px">None (auto)ottom: rgb(220,235) 1px solid; padding-top: 5px">ottom: rgb(220,235) 1px solid; padding-top: 5px">类名前缀 | ottom: rgb(220,0); vertical-align: baseline; border-top: 0px; border-right: 0px; padding-top: 0px">.col-xs-ottom: rgb(220,0); vertical-align: baseline; border-top: 0px; border-right: 0px; padding-top: 0px">.col-sm-ottom: rgb(220,0); vertical-align: baseline; border-top: 0px; border-right: 0px; padding-top: 0px">.col-md-ottom: rgb(220,0); vertical-align: baseline; border-top: 0px; border-right: 0px; padding-top: 0px">.col-lg-ottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px">ottom: rgb(220,235) 1px solid; padding-top: 5px">最大列宽 | ottom: rgb(220,0); vertical-align: baseline; border-top: 0px; border-right: 0px; padding-top: 0px">Autoottom: rgb(220,0); vertical-align: baseline; border-top: 0px; border-right: 0px; padding-top: 0px">~62pxottom: rgb(220,0); vertical-align: baseline; border-top: 0px; border-right: 0px; padding-top: 0px">~81pxottom: rgb(220,0); vertical-align: baseline; border-top: 0px; border-right: 0px; padding-top: 0px">~97pxottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px">ottom: rgb(220,235) 1px solid; padding-top: 5px">列间隙 | ottom: rgb(220,0); vertical-align: baseline; border-top: 0px; border-right: 0px; padding-top: 0px">15px(i.e.
---|
当列的高度不同时,由于float的作用会破坏网格的结构,可通过使用响应类避免,下面是一个完整的网格代码:
其中的visible-*-*表示在何种设备下以何种display属性显示,由于极小设备默认为单列显示,因此无需使用响应类定制。 响应类也可用在普通标记中,比如下面的代码:
aragraph is visible only on extra small devices.
aragraph is visible only on small devices.
aragraph is visible only on medium devices.
aragraph is visible only on large devices.
类似的,也可使用hidden-*,设置在特定设备中隐藏:
aragraph is hidden only on extra small devices.
aragraph is hidden only on small devices.
aragraph is hidden only on medium devices.
aragraph is hidden only on large devices.
通过响应类还可以设置打印时的格式:
以上所述是小编给大家介绍的BootStrap3学习笔记(一)之网格系统。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。