[记录]Bootstrap栅格布局的理解

作者： TzuHsing Su
发布时间：2018-09-10
2820 次瀏覽
暫無評論
2478字数
分類： web前端

Bootstrap栅格布局的理解
====

刚开始了解bootstrap的栅格布局有点乱，并且也理解错了。
正如col-xs-2  col-md-4什么的没有正确的认识。

今天重新学习了下发现其实太tm简单的原理，好多地方的教程应该是说得太复杂了

插入官方的解释：

栅格参数
====

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
-----------------------------------------
<table >
      <thead>
        <tr>
          <th></th>
          <th>
            超小屏幕
            <small>手机 (&lt;768px)</small>
          </th>
          <th>
            小屏幕
            <small>平板 (≥768px)</small>
          </th>
          <th>
            中等屏幕
            <small>桌面显示器 (≥992px)</small>
          </th>
          <th>
            大屏幕
            <small>大桌面显示器 (≥1200px)</small>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th class="text-nowrap" scope="row">栅格系统行为</th>
          <td>总是水平排列</td>
          <td colspan="3">开始是堆叠在一起的，当大于这些阈值时将变为水平排列C</td>
        </tr>
        <tr>
          <th class="text-nowrap" scope="row"><code>.container</code> 最大宽度</th>
          <td>None （自动）</td>
          <td>750px</td>
          <td>970px</td>
          <td>1170px</td>
        </tr>
        <tr>
          <th class="text-nowrap" scope="row">类前缀</th>
          <td><code>.col-xs-</code></td>
          <td><code>.col-sm-</code></td>
          <td><code>.col-md-</code></td>
          <td><code>.col-lg-</code></td>
        </tr>
        <tr>
          <th class="text-nowrap" scope="row">列（column）数</th>
          <td colspan="4">12</td>
        </tr>
        <tr>
          <th class="text-nowrap" scope="row">最大列（column）宽</th>
          <td class="text-muted">自动</td>
          <td>~62px</td>
          <td>~81px</td>
          <td>~97px</td>
        </tr>
        <tr>
          <th class="text-nowrap" scope="row">槽（gutter）宽</th>
          <td colspan="4">30px （每列左右均有 15px）</td>
        </tr>
        <tr>
          <th class="text-nowrap" scope="row">可嵌套</th>
          <td colspan="4">是</td>
        </tr>
        <tr>
          <th class="text-nowrap" scope="row">偏移（Offsets）</th>
          <td colspan="4">是</td>
        </tr>
        <tr>
          <th class="text-nowrap" scope="row">列排序</th>
          <td colspan="4">是</td>
        </tr>
      </tbody>
    </table>

> 这里最重要还是这句话：**栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C**

用以下实例记录：
<pre><code><div class="container">
    <div class="row">
      <div class="col-xs-4">
        col-xs-4
      </div>
      <div class="col-xs-3">
        col-xs-3
      </div>
      <div class="col-xs-3">
        col-xs-3
      </div>
      <div class="col-xs-2">
        col-xs-2
      </div>
    </div>
  </div></code></pre>

但实际上是不需要去考虑啥时候用xs 啥时候用md，啥时候用lg
因为这些参数只是个阈值罢了。

<blockquote>回到这句话：总是水平排列，开始是堆叠在一起的，当大于这些阈值时将变为水平排列</blockquote>

也就是比如像上面那样你只设置了xs这个参数，并且只有4个。因为我们知道xs这种类的范围是
小于768像素。但事实它不意味着仅仅小于768的设备才生效！
因为以上代码的显示效果是 无论像素多大多小它都是以水平的形式表现。! <br>

**因为栅格系统  是低于设定的阈值才会失去水平的显示效果** <br>

如图 都是以水平排列
![测试一][1]![测试二][2]
![测试三][3]

<br>
可以用另外的代码看看效果:

![测试4][4]
![测试5][5]
可见一旦低于992px就不会水平排列了
那么想要一个div多个不同设备的布局的方法就挺清晰地想到怎么去用了

[1]: http://ws1.sinaimg.cn/large/005LiQFdgy1fv3rmb39l0j311g0g576j.jpg
  [2]: http://ws1.sinaimg.cn/large/005LiQFdgy1fv3rnbkdckj30jj0hamxl.jpg
  [3]: http://ws1.sinaimg.cn/large/005LiQFdgy1fv3rnnlqr1j30cl0ce74i.jpg
  [4]: http://ws1.sinaimg.cn/large/005LiQFdgy1fv3s1jmpyvj30ti0b8jrq.jpg
  [5]: http://ws1.sinaimg.cn/large/005LiQFdgy1fv3s235ww8j30pq08s0t1.jpg

最后修改：2023-04-01

如果覺得我的文章對你有用，請隨意讚賞

發表評論取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

評論 *

私密評論

名稱 *

🎲

郵箱 *

地址

[记录]Bootstrap栅格布局的理解

TzuHsing Su • 2018 年 09 月 10 日

Bootstrap栅格布局的理解
====

刚开始了解bootstrap的栅格布局有点乱，并且也理解错了。
正如col-xs-2  col-md-4什么的没有正确的认识。

今天重新学习了下发现其实太tm简单的原理，好多地方的教程应该是说得太复杂了

插入官方的解释：

栅格参数
====

> 这里最重要还是这句话：**栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C**

但实际上是不需要去考虑啥时候用xs 啥时候用md，啥时候用lg
因为这些参数只是个阈值罢了。

<blockquote>回到这句话：总是水平排列，开始是堆叠在一起的，当大于这些阈值时将变为水平排列</blockquote>

**因为栅格系统  是低于设定的阈值才会失去水平的显示效果** <br>

如图 都是以水平排列
![测试一][1]![测试二][2]
![测试三][3]

<br>
可以用另外的代码看看效果:

![测试4][4]
![测试5][5]
可见一旦低于992px就不会水平排列了
那么想要一个div多个不同设备的布局的方法就挺清晰地想到怎么去用了

[记录]Bootstrap栅格布局的理解

發表評論取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

当一名我这样的博主是怎样的体验

mac13.9 ventura vmvare fusion闪退解决方案

[建站方向]从购入vps到搭建wordpress或typecho

Vue组件-render函数与props传值

欢迎使用 Typecho

关于Taro定时器计时的解决方案

Vue组件-render函数与props传值

vant中Cascader级联选择器使用任意字段的方式

当一名我这样的博主是怎样的体验

响应式nav点击导航栏链接或滑动网页自动折叠

[记录]Bootstrap栅格布局的理解

發表評論 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

[记录]Bootstrap栅格布局的理解

發表評論取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款