Bootstrap的栅格系统和响应式工具

逃离我推掉我的手 2021-07-26 20:37 370阅读 0赞

## 栅格参数 ##

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

<table> 
 <thead> 
  <tr> 
   <th>&nbsp;</th> 
   <th>超小屏幕&nbsp;手机 (&lt;768px)</th> 
   <th>小屏幕&nbsp;平板 (≥768px)</th> 
   <th>中等屏幕&nbsp;桌面显示器 (≥992px)</th> 
   <th>大屏幕&nbsp;大桌面显示器 (≥1200px)</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <th>栅格系统行为</th> 
   <td>总是水平排列</td> 
   <td colspan="3">开始是堆叠在一起的，当大于这些阈值时将变为水平排列C</td> 
  </tr> 
  <tr> 
   <th><code>.container</code>&nbsp;最大宽度</th> 
   <td>None （自动）</td> 
   <td>750px</td> 
   <td>970px</td> 
   <td>1170px</td> 
  </tr> 
  <tr> 
   <th>类前缀</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>列（column）数</th> 
   <td colspan="4">12</td> 
  </tr> 
  <tr> 
   <th>最大列（column）宽</th> 
   <td>自动</td> 
   <td>~62px</td> 
   <td>~81px</td> 
   <td>~97px</td> 
  </tr> 
  <tr> 
   <th>槽（gutter）宽</th> 
   <td colspan="4">30px （每列左右均有 15px）</td> 
  </tr> 
  <tr> 
   <th>可嵌套</th> 
   <td colspan="4">是</td> 
  </tr> 
  <tr> 
   <th>偏移（Offsets）</th> 
   <td colspan="4">是</td> 
  </tr> 
  <tr> 
   <th>列排序</th> 
   <td colspan="4">是</td> 
  </tr> 
 </tbody> 
</table>

## 实例：从堆叠到水平排列 ##

使用单一的一组 `.col-md-*` 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” `.row` 内。

# 响应式工具 #

为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。另外还包含了针对打印机显示或隐藏内容的工具类。

有针对性的使用这类工具类，从而避免为同一个网站创建完全不同的版本。相反，通过使用这些工具类可以在不同设备上提供不同的展现形式。

## 可用的类 ##

通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。

<table> 
 <thead> 
  <tr> 
   <th>&nbsp;</th> 
   <th>超小屏幕手机 (&lt;768px)</th> 
   <th>小屏幕平板 (≥768px)</th> 
   <th>中等屏幕桌面 (≥992px)</th> 
   <th>大屏幕桌面 (≥1200px)</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <th><code>.visible-xs-*</code></th> 
   <td>可见</td> 
   <td>隐藏</td> 
   <td>隐藏</td> 
   <td>隐藏</td> 
  </tr> 
  <tr> 
   <th><code>.visible-sm-*</code></th> 
   <td>隐藏</td> 
   <td>可见</td> 
   <td>隐藏</td> 
   <td>隐藏</td> 
  </tr> 
  <tr> 
   <th><code>.visible-md-*</code></th> 
   <td>隐藏</td> 
   <td>隐藏</td> 
   <td>可见</td> 
   <td>隐藏</td> 
  </tr> 
  <tr> 
   <th><code>.visible-lg-*</code></th> 
   <td>隐藏</td> 
   <td>隐藏</td> 
   <td>隐藏</td> 
   <td>可见</td> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <th><code>.hidden-xs</code></th> 
   <td>隐藏</td> 
   <td>可见</td> 
   <td>可见</td> 
   <td>可见</td> 
  </tr> 
  <tr> 
   <th><code>.hidden-sm</code></th> 
   <td>可见</td> 
   <td>隐藏</td> 
   <td>可见</td> 
   <td>可见</td> 
  </tr> 
  <tr> 
   <th><code>.hidden-md</code></th> 
   <td>可见</td> 
   <td>可见</td> 
   <td>隐藏</td> 
   <td>可见</td> 
  </tr> 
  <tr> 
   <th><code>.hidden-lg</code></th> 
   <td>可见</td> 
   <td>可见</td> 
   <td>可见</td> 
   <td>隐藏</td> 
  </tr> 
 </tbody> 
</table>

从 v3.2.0 版本起，形如 `.visible-*-*` 的类针对每种屏幕大小都有了三种变体，每个针对 CSS 中不同的 `display` 属性，列表如下：

<table> 
 <thead> 
  <tr> 
   <th>类组</th> 
   <th>CSS&nbsp;<code>display</code></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <th><code>.visible-*-block</code></th> 
   <td><code>display: block;</code></td> 
  </tr> 
  <tr> 
   <th><code>.visible-*-inline</code></th> 
   <td><code>display: inline;</code></td> 
  </tr> 
  <tr> 
   <th><code>.visible-*-inline-block</code></th> 
   <td><code>display: inline-block;</code></td> 
  </tr> 
 </tbody> 
</table>

因此，以超小屏幕（`xs`）为例，可用的 `.visible-*-*` 类是：`.visible-xs-block`、`.visible-xs-inline` 和 `.visible-xs-inline-block`。

`.visible-xs`、`.visible-sm`、`.visible-md` 和 `.visible-lg` 类也同时存在。但是**从 v3.2.0 版本开始不再建议使用**。除了 `<table>` 相关的元素的特殊情况外，它们与 `.visible-*-block` 大体相同。