Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

一、 Bootstrap 简介

1. 下载 Bootstrap
   可进入Bootstrap官方网站进行Bootstrap最新版本的下载 点击进入
   

   website.png

2. Bootstrap 的已编译版本的文件结构

bootstrap/
   +-- css/
   |   +-- bootstrap.css
   |   |-- bootstrap.min.css
   |   |-- bootstrap-theme.css
   |   |-- bootstrap-theme.min.css
   +-- js/
   |   |-- bootstrap.js
   |   |-- bootstrap.min.js
   +-- fonts/
       |-- glyphicons-halflings-regular.eot
       |-- glyphicons-halflings-regular.svg
       |-- glyphicons-halflings-regular.ttf
       |-- glyphicons-halflings-regular.woff

Bootstrap的编译版本提供了编译的CSS和JS文件（bootstrap.*），以及编译和缩小CSS和JS（bootstrap.min.*）。

在fonts文件夹中有四个字体文件（glyphicons-halflings-regular.*）。这些字体文件包括Glyphicon Halflings集中的200个图标。

请注意，所有JavaScript插件都需要包含jQuery。

3. Bootstrap 源代码的文件结构

   
   

• less/、js/ 和 fonts/ 下的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。
• dist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。
• docs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文档。

4. Bootstrap 包的内容

• 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
• CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
• 组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
• JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。
• 定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

5. Bootstrap css 特性概览

• HTML 5 文档类型（Doctype）
• 移动设备优先
• 响应式图像
• 全局显示、排版和链接
• 避免跨浏览器的不一致
• Bootstrap 浏览器/设备支持

二、 Bootstrap 网格系统

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

上述为Bootstrap官方文档中对网格系统的描述，我们可以这样理解：Bootstrap 3 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

1. 工作原理

网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统的工作方式：

• 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
• 使用行来创建列的水平组。
• 内容应该放置在列内，且唯有列可以是行的直接子元素。
• 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
• 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
• 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

2. 媒体查询

媒体查询是Bootstrap规定的有条件有秩序的CSS规则。如果满足某些的条件，就会应用相应的样式。根据窗口的大小移动来显示并隐藏内容，根据不同的窗口大小，显示不同的布局。
下边是Bootstrap网格系统中的关键的分界点阈值。

   /* 超小设备（手机，小于 768px） */
   /* Bootstrap 中默认情况下没有媒体查询 */

   /* 小型设备（平板电脑，768px 起） */
   @media (min-width: @screen-sm-min) { ... }

   /* 中型设备（台式电脑，992px 起） */
   @media (min-width: @screen-md-min) { ... }

   /* 大型设备（大台式电脑，1200px 起） */
   @media (min-width: @screen-lg-min) { ... }

对于所有带有 min-width: @screen-sm-min 的设备，如果屏幕的宽度小于 @screen-sm-max，则会进行一些处理。

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

3. 网格选项

4. 响应式的列重置

为了解决在小设备浏览时无法确定网格显示的位置,可以使用.clearfix class和响应式实用工具来解决。响应式实用工具目前只适用于块和表切换。

以下为响应式工具的一些属性

5. 偏移列

偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如，.col-xs-*类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。
为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-*类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。

<div class="container">
    <h1>Hello, world!</h1>
    <div class="row" >
        <div class="col-xs-6 col-md-offset-3" 
        style="background-color: #dedef8;box-shadow: 
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
            elit.
            </p>
        </div>
    </div>
</div>  

6. 嵌套列

为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-*列内添加一组.col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。

7. 列排序

Bootstrap 网格系统另一个完美的特性，就是您可以很容易地以一种顺序编写列，然后以另一种顺序显示列。
您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。
在下面的实例中，我们有两列布局，左列很窄，作为侧边栏。我们将使用 .col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序。