1.Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架；自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
2.Bootstrap 包的内容：
- 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
- CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
- 组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件部分详细讲解。
- JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。
- 定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
3.Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，您需要使用 HTML5 文档类型（Doctype）；
<!DOCTYPE html>
<html>
....
</html>
4.Bootstrap 3 的设计目标是移动设备优先，然后才是桌面设备。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width：属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0： 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
user-scalable=no：在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。
maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。
5.响应式图像
<img src="..." class="img-responsive" alt="响应式图像">
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}
设置 height:auto，相关元素的高度取决于浏览器。
设置 max-width 为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。
6.容器container： container class 用于包裹页面上的内容
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.container:before,
.container:after {
display: table;
content: " ";
}
.container:after {
clear: both;
}
代码1把 container 的左右外边距（margin-right、margin-left）交由浏览器决定。
请注意，由于内边距（padding）是固定宽度，默认情况下容器是不可嵌套的。
代码2设置 display 为 table，会创建一个匿名的 table-cell 和一个新的块格式化上下文。:before 伪元素防止上边距崩塌，:after 伪元素清除浮动。
如果 conteneditable 属性出现在 HTML 中，由于一些 Opera bug，围绕上述元素创建一个空格。这可以通过使用 content: " " 来修复
代码3创建了一个伪元素，并确保了所有的容器包含所有的浮动元素。
699
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
