栅格系统使用教程
<h5>1.基础示例相关代码</h5>
<p>一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列</p>
<h5>2.基础示例相关代码</h5>
<p>css、js引入：</p>
<pre><code class="language-java"><link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet"></code></pre>
<p>html代码：</p>
<pre><code class="language-java"><div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="grid-demo grid-demo-bg1">1/3</div>
</div>
<div class="col-sm-4">
<div class="grid-demo grid-demo-bg1">1/3</div>
</div>
<div class="col-sm-4">
<div class="grid-demo grid-demo-bg1">1/3</div>
</div>
</div>
</div></code></pre>
<h5>3.展现</h5>
<p><img src="https://www.showdoc.cc/server/api/common/visitfile/sign/a86893d8359217a66bb4fbbaab85e5fc?showdoc=.jpg" alt="" /></p>
<h5>4.跨多个设备下工作比对</h5>
<table>
<thead>
<tr>
<th></th>
<th>超小设备手机（<768px）</th>
<th>小型设备平板电脑（≥768px）</th>
<th>中型设备台式电脑（≥992px）</th>
<th>大型设备台式电脑（≥1200px）</th>
</tr>
</thead>
<tbody>
<tr>
<td>网格行为</td>
<td>一直是水平的</td>
<td>以折叠开始，断点以上是水平的</td>
<td>以折叠开始，断点以上是水平的</td>
<td>以折叠开始，断点以上是水平的</td>
</tr>
<tr>
<td>最大容器宽度</td>
<td>None (auto)</td>
<td>750px</td>
<td>970px</td>
<td>1170px</td>
</tr>
<tr>
<td>Class 前缀</td>
<td>.col-xs-</td>
<td>.col-sm-</td>
<td>.col-md-</td>
<td>.col-lg-</td>
</tr>
<tr>
<td>列数量和</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
</tr>
<tr>
<td>最大列宽</td>
<td>Auto</td>
<td>60px</td>
<td>78px</td>
<td>95px</td>
</tr>
<tr>
<td>间隙宽度</td>
<td>30px（一个列的每边分别 15px）</td>
<td>30px（一个列的每边分别 15px）</td>
<td>30px（一个列的每边分别 15px）</td>
<td>30px（一个列的每边分别 15px）</td>
</tr>
<tr>
<td>可嵌套</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>偏移量</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>列排序</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</tbody>
</table>
<h5>5.其他注意事项</h5>
<p>1）若需要使用响应式的布局，头部增加：</p>
<meta name="viewport" content="width=device-width, initial-scale=1">
<p>2）可以结合媒体查询创建网格系统中的关键的分界点阈值，如：
/<em> 小型设备（平板电脑，768px 起） </em>/
@media (min-width: @screen-sm-min) { ... }</p>
<p>/<em> 中型设备（台式电脑，992px 起） </em>/
@media (min-width: @screen-md-min) { ... }</p>
<p>/<em> 大型设备（大台式电脑，1200px 起） </em>/
@media (min-width: @screen-lg-min) { ... }</p>