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

Bootstrap 2019-01-01

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

rush:js;">
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-*-*表示不同类型设备下在网格系统中占据的列宽

ottom: rgb(220,227,235) 1px solid; text-align: left; border-left: rgb(220,235) 1px solid; padding-bottom: 0px; widows: 1; text-transform: none; text-indent: 0px; margin: 0px; padding-left: 0px; border-spacing: 0px; width: 620px; letter-spacing: normal; padding-right: 0px; border-collapse: collapse; font: 13px/21px Verdana,Arial,sans-serif; white-space: normal; color: rgb(60,60,60); vertical-align: baseline; border-top: rgb(220,235) 1px solid; border-right: rgb(220,235) 1px solid; word-spacing: 0px; padding-top: 0px; -webkit-text-stroke-width: 0px"> ottom: 0px; border-left: 0px; padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; vertical-align: baseline; border-top: 0px; border-right: 0px; padding-top: 0px"> ottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px"> ottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px">
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: 0px; border-left: 0px; padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; color: rgb(0,0); vertical-align: baseline; border-top: 0px; border-right: 0px; padding-top: 0px">750pxottom: rgb(220,0); vertical-align: baseline; border-top: 0px; border-right: 0px; padding-top: 0px">970pxottom: rgb(220,0); vertical-align: baseline; border-top: 0px; border-right: 0px; padding-top: 0px">1170pxottom: 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">.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.ottom: 0px; border-left: 0px; padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; color: rgb(0,0); vertical-align: baseline; border-top: 0px; border-right: 0px; padding-top: 0px">30px)

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

rush:js;">
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属性显示，由于极小设备默认为单列显示，因此无需使用响应类定制。 响应类也可用在普通标记中，比如下面的代码：

rush:js;">

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-*，设置在特定设备中隐藏：

rush:js;">

aragraph is hidden only on medium devices.

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

以上所述是小编给大家介绍的BootStrap3学习笔记(一)之网格系统。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

bootstrap3网格bootstrap3网格系统

相关文章

Bootstrip HTML 查询搜索常用格式模版
Bootstrip HTML 查询搜索常用格式模版 &lt;form class=&...
如何在按钮上加红色数字
如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在...
让两个按钮左右排列
要让两个按钮左右排列，你可以使用 Bootstrap 的网格系统将它...
status能否设置为布尔值类型，前端采用复选框形式
是的，可以将status设置为布尔类型，这样可以在前端使用复选...
Bootstrap 按钮总结
前端工程师一般用的是Bootstrap的框架而不是样式，样式一般自...
Python学习-day52-bootstrap
起步导入：<linkrel="stylesheet"href="b...