脚手架

Bootstrap 建立在响应式 12 列网格之上。我们还包括基于该系统的固定宽度和流体宽度布局。

默认 940px 网格

作为 Bootstrap 的一部分提供的默认网格系统是940 像素宽、12 列的网格。

它还针对各种设备和分辨率提供四种响应式变体：手机、平板电脑纵向、桌面横向和小型桌面，以及大型宽屏桌面。

<div类= “行” > 
  <div类= "span4" > ... </div> 
  <div类= "span8" > ... </div> 
</div>

如此处所示，可以使用两个“列”创建基本布局，每个“列”跨越我们定义为网格系统一部分的 12 个基础列的数量。

偏移列

4 偏移 4

3 偏移 3

8 偏移 4

<div类= “行” > 
  <div类= "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</div>

嵌套列

使用 Bootstrap 中的静态（非流体）网格系统，嵌套很容易。要嵌套您的内容，只需在现有列中添加一.row组新列。.span*.span*

例子

列的第 1 层

2级

<div类= “行” > 
  <div类= "span12" > 
    列的第 1 层
    <div类= “行” > 
      <div class = "span6" >级别 2 </div> 
      <div class = "span6" >级别 2 </div> 
    </div>
  </div>
</div>

网格定制

多变的	默认值	描述
`@gridColumns`	12	列数
`@gridColumnWidth`	60像素	每列的宽度
`@gridGutterWidth`	20像素	列之间的负空间
`@siteWidth`	所有列和排水沟的计算总和	计算列数和间距以设置`.container-fixed()`mixin的宽度

LESS 中的变量

Bootstrap 内置了一些用于自定义默认 940 像素网格系统的变量，如上所示。网格的所有变量都存储在 variables.less 中。

如何定制

修改网格意味着改变三个@grid*变量并重新编译Bootstrap。更改 variables.less 中的网格变量并使用记录的四种方法之一重新编译。如果要添加更多列，请务必在 grid.less 中添加 CSS。

保持响应

网格的自定义仅适用于默认级别，即 940 像素网格。要维护 Bootstrap 的响应方面，您还必须在 responsive.less 中自定义网格。

固定布局

默认且简单的 940 像素宽、居中布局，适用于单个<div class="container">.

<正文>
  <div类= “容器” > 
    ...
  </div>
</正文>

流体布局

<div class="container-fluid">提供灵活的页面结构、最小和最大宽度以及左侧边栏。它非常适合应用程序和文档。

<div class = "容器流体" > 
  <div类= “行流体” > 
    <div类= "span2" > 
      <!--侧边栏内容-->
    </div>
    <div类= "span10" > 
      <!--正文内容-->
    </div>
  </div>
</div>

支持的设备

Bootstrap 支持一些媒体查询，以帮助您的项目更适合不同的设备和屏幕分辨率。以下是包含的内容：

标签	版面宽度	列宽	天沟宽度
智能手机	480px及以下	流体列，无固定宽度
肖像平板电脑	480 像素到 768 像素	流体列，无固定宽度
景观平板电脑	768 像素到 940 像素	44像素	20像素
默认	940 像素及以上	60像素	20像素
大显示屏	1210 像素及以上	70像素	30像素

他们做什么

媒体查询允许基于许多条件（比率、宽度、显示类型等）自定义 CSS，但通常集中在min-width和max-width.

修改我们网格中列的宽度
在必要时堆叠元素而不是浮动
调整标题和文本的大小以更适合设备

使用媒体查询

Bootstrap 不会自动包含这些媒体查询，但理解和添加它们非常容易，并且需要最少的设置。您有几个选项可以包含 Bootstrap 的响应式功能：

使用编译好的响应式版本，bootstrap-responsive.css
添加 @import "responsive.less" 并重新编译 Bootstrap
将 responsive.less 修改并重新编译为单独的

为什么不直接包括它？说实话，并非所有事情都需要响应。我们认为最好启用它，而不是鼓励开发人员删除此功能。

  //横向手机和向下
  @media （最大宽度：480px ）{ ... } _     
 
  // 横向手机到纵向平板电脑
  @media （最大宽度：768px ）{ ... } _     
 
  // 纵向平板到横向和桌面
  @media （最小宽度：768px ）和（最大宽度：940px ）{ ... } _ _        
 
  // 大桌面
  @media （最小宽度：1200px ）{ .. } _

脚手架

网格系统12 列，具有响应式扭曲