Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
Bootstrap 包的内容：
基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。
定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
Download Bootstrap：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
Download Source：下载源代码。点击该按钮，您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。
确保适当的绘制和触屏缩放：
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。
通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。
响应式图像：
<img src="..." class="img-responsive" alt="响应式图像">
img-responsive class 为图像赋予了 max- 100%; 和 height: auto; 属性，可以让图像按比例缩放，不超过其父元素的尺寸。
基本的全局显示：
使用 body {margin: 0;} 来移除 body 的边距。
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;//字体样式
font-size: 14px;//字体大小
line-height: 1.428571429;//默认行高度
color: #333333;//默认文本颜色
background-color: #ffffff;//默认背景颜色
}
排版：
使用 @font-family-base、 @font-size-base 和 @line-height-base 属性作为排版样式。
链接样式：
@link-color 设置全局链接的颜色。
对于链接的默认样式，如下设置：
a:hover,
a:focus {
color: #2a6496;
text-decoration: underline;
}//当鼠标悬停在链接上，或者点击过的链接，颜色会被设置为 #2a6496。同时，会呈现一条下划线。
a:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}//点击过的链接，会呈现一个颜色码为 #333 的细的虚线轮廓。另一条规则是设置轮廓为 5 像素宽，且对于基于 webkit 浏览器有一个 -webkit-focus-ring-color 的浏览器扩展。轮廓偏移设置为 -2 像素。
避免跨浏览器的不一致:
使用 Normalize 来建立跨浏览器的一致性。
Normalize.css 是一个很小的 CSS 文件，在 HTML 元素的默认样式中提供了更好的跨浏览器一致性。
容器（Container）:
<div class="container">
container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
container 的左右外边距（margin-right、margin-left）交由浏览器决定。
由于内边距（padding）是固定宽度，默认情况下容器是不可嵌套的。
.container:before,
.container:after//:before 伪元素防止上边距崩塌，:after 伪元素清除浮动。
{
display: table;//会创建一个匿名的 table-cell 和一个新的块格式化上下文
content: " ";//修复
}
响应式列：<div class="col-xs-6 col-sm-3"/>
偏移列： <div class="col-xs-6 col-md-offset-3"/>
嵌套列：被嵌套的行应包含一组列，这组列个数不能超过12
列排序：
<div class="col-md-4 col-md-push-8" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">我在左边 </div>
<div class="col-md-8 col-md-pull-4" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 我在右边</div>
标题：<h1></h1>
内联子标题:<h1><small></small></h1>
引导主体副本:为了给段落添加强调文本，则可以添加 class="lead"，这将得到更大更粗、行高更高的文本
强调: <small>（设置文本为父文本大小的 85%）、<strong>（设置文本为更粗的文本）、<em>（设置文本为斜体）。
缩写：
<abbr title="World Wide Web">WWW</abbr><br>//显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>//更小字体的文本
地址:使用 <address> 标签 使用<br>换行
引用;
blockquote>
这是一个带有源标题的引用。
<small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>
列表：有序<ol></ol> 无序<ul></ul>
Bootstrap 代码
Bootstrap 允许您以两种方式显示代码：
第一种是 <code> 标签。如果您想要内联显示代码，那么您应该使用 <code> 标签。
第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 <pre> 标签。