BootStrap3学习笔记(一)之网格系统
BootStrap3学习笔记(一)之网格系统
发布时间:2016-12-30 来源:查字典编辑
摘要:如果显示网格,代码应类似这样:Box1Box2Box3Box4Box5Box6Box7Box8Box9Box10Box11Box12其中co...

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

<div> <div> <div><p>Box 1</p></div> <div><p>Box 2</p></div> <div><p>Box 3</p></div> <div><p>Box 4</p></div> <div><p>Box 5</p></div> <div><p>Box 6</p></div> <div><p>Box 7</p></div> <div><p>Box 8</p></div> <div><p>Box 9</p></div> <div><p>Box 10</p></div> <div><p>Box 11</p></div> <div><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> <div> <div><p>Box 1</p></div> <div><p>Box 2</p></div> <div></div> <div><p>Box 3</p></div> <div></div> <div><p>Box 4</p></div> <div></div> <div></div> <div><p>Box 5</p></div> <div><p>Box 6</p></div> <div></div> <div></div> <div><p>Box 7</p></div> <div><p>Box 8</p></div> <div></div> <div></div> <div><p>Box 9</p></div> <div></div> <div><p>Box 10</p></div> <div></div> <div><p>Box 11</p></div> <div><p>Box 12</p></div> </div> </div>

其中的visible-*-*表示在何种设备下以何种display属性显示,由于极小设备默认为单列显示,因此无需使用响应类定制。

响应类也可用在普通标记中,比如下面的代码:

<p>This paragraph is visible only on extra small devices.</p> <p>This paragraph is visible only on small devices.</p> <p>This paragraph is visible only on medium devices.</p> <p>This paragraph is visible only on large devices.</p>

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

<p>This paragraph is hidden only on extra small devices.</p> <p>This paragraph is hidden only on small devices.</p> <p>This paragraph is hidden only on medium devices.</p> <p>This paragraph is hidden only on large devices.</p>

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

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

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

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类