标签：bootstrap3 栅格系统 学习笔记
代码和表格来自：http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php
如果显示网格，代码应类似这样：
<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>
|
极小 手机(<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) |
|||
<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>响应类也可用在普通标记中，比如下面的代码：
<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>
<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 栅格系统 学习笔记
原文地址：http://blog.csdn.net/litdwg/article/details/42141329
