Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
一、 Bootstrap 简介
-
下载 Bootstrap
可进入Bootstrap官方网站进行Bootstrap最新版本的下载 点击进入
website.png
-
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。
-
Bootstrap 源代码的文件结构
-
less/、js/和fonts/下的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。 -
dist/文件夹包含了上面预编译下载部分中所列的文件和文件夹。 -
docs-assets/、examples/和所有的 *.html 文件是 Bootstrap 文档。
- Bootstrap 包的内容
- 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
- CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
- 组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
- JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。
- 定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
- 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. 网格选项
| 超小设备手机（<768px） | 小型设备平板电脑（≥768px） | 中型设备台式电脑（≥992px） | 大型设备台式电脑（≥1200px） | |
|---|---|---|---|---|
| 网格行为 | 一直是水平的 | 以折叠开始，断点以上是水平的 | 以折叠开始，断点以上是水平的 | 以折叠开始，断点以上是水平的 |
| 最大容器宽度 | None (auto) | 750px | 970px | 1170px |
| Class 前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列�数量和 | 12 | 12 | 12 | 12 |
| 最大列宽 | Auto | 60px | 78px | 95px |
| 间隙宽度 | 30px 一个列的每边分别 15px） | 30px 一个列的每边分别 15px） | 30px （一个列的每边分别 15px） | 30px （一个列的每边分别 15px） |
| 可嵌套 | Yes | Yes | Yes | Yes |
| 偏移量 | Yes | Yes | Yes | Yes |
| 列排序 | Yes | Yes | Yes | Yes |
4. 响应式的列重置
为了解决在小设备浏览时无法确定网格显示的位置,可以使用.clearfix class和响应式实用工具来解决。响应式实用工具目前只适用于块和表切换。
以下为响应式工具的一些属性
| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面 (≥992px) | 大屏幕 桌面 (≥1200px) | |
|---|---|---|---|---|
| .visible-xs-* | 可见 | 隐藏 | 隐藏 | 隐藏 |
| .visible-sm-* | 隐藏 | 可见 | 隐藏 | 隐藏 |
| .visible-md-* | 隐藏 | 隐藏 | 可见 | 隐藏 |
| .visible-lg-* | 隐藏 | 隐藏 | 隐藏 | 可见 |
| .hidden-xs | 隐藏 | 可见 | 可见 | 可见 |
| .hidden-sm | 可见 | 隐藏 | 可见 | 可见 |
| .hidden-md | 可见 | 可见 | 隐藏 | 可见 |
| .hidden-lg | 可见 | 可见 | 可见 | 隐藏 |
| 类组 | CSS display |
|---|---|
| .visible-*-block | display: block; |
| .visible-*-inline | display: inline; |
| .visible-*-inline-block | display: inline-block; |
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-* 类来互换这两列的顺序。
网友评论