如果是中文的网页加上
<!DOCTYPE html>
<html lang="zh-CN">
...
</html>为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1">.container 类用于固定宽度并支持响应式布局的容器。（也就是版心，居中于页面距离两端有一定的距离）。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。（占据了整个可视窗口的宽度）
栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
- “行（row）”必须包含在
.container（固定宽度）或.container-fluid（100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。 .row（设置一个容器为栅格）和 .col-xs-3（超小屏幕 手机 (<768px)）.col-sm-3小屏幕 平板 (≥768px).col-md-3（中等屏幕 桌面显示器 (≥992px)） .col-lg-3（大屏幕 大桌面显示器 (≥1200px)）这些是设置在这个栅格容器中占据了多宽这种预定义的类，可以用来快速创建栅格布局 如果列数如果超过12 那么超出部分就会换行（例如：两个col-md-5 那么第三个如果超过2第三个就会显示到下一行 ）-
栅格参数
通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px) 栅格系统行为 总是水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C .container最大宽度None （自动） 750px 970px 1170px 类前缀 .col-xs-.col-sm-.col-md-.col-lg-列（column）数 12 最大列（column）宽 自动 ~62px ~81px ~97px 槽（gutter）宽 30px （每列左右均有 15px） 可嵌套 是 偏移（Offsets） 是 列排序 是 - 设置不同的col- 它包含除它外的哪些？在设置的时候如果你设置为.col-sm-3 就表示为在小屏幕及其以上屏幕是这样的 But在比它小的屏幕上会每一个.col会占用一行
列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。 相当于相对自己的位置偏移几个单位。
嵌套列
为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。 可以对它进行嵌套你嵌套的那个元素会被分成为12格。
列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。push为推也就是像右推动几格，pull 为拉 相当于向左拉几格。
标题
HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。
在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。
页面主体
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
中心内容
通过添加 .lead 类可以让段落突出显示。
被删除的文本
对于被删除的文本使用 <del> 标签。
例：nt to be treated as deleted text.
无用文本
对于没用的文本使用 <s> 标签。
例：be treated as no longer accurate.
插入文本
额外插入的文本使用 <ins> 标签。
例：This line of text is meant to be treated as an addition to the document.
带下划线的文本
为文本添加下划线，使用 <u> 标签。
小号文本
对于不需要强调的inline或block类型的文本，使用 <small> 标签包裹，其内的文本将被设置为父容器字体大小的 85%。标题元素中嵌套的 <small> 元素被设置不同的 font-size 。
你还可以为行内元素赋予 .small 类以代替任何 <small> 元素。
着重
通过增加 font-weight 值强调一段文本 标签<strong></strong>。
对齐
通过文本对齐类，可以简单方便的将文字重新对齐。
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>Left aligned text.
Center aligned text.
Right aligned text.
Justified text.
No wrap text.
改变大小写
通过这几个类可以改变文本的大小写。
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</plowercased text.
UPPERCASED TEXT.
Capitalized Text.
地址
让联系信息以最接近日常使用的格式呈现。在每行结尾添加 <br> 可以保留需要的样式。
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
列表样式ul是 无序ol是有序列表 只是无样式列表有不同
无样式列表
移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。
<ul class="list-unstyled">
<li>...</li>
</ul>内联代码
通过 <code> 标签包裹内联样式的代码片段。
表格（把类加到table标签中）
基本实例
任意<table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。条纹状表格
通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。 就是各行变色
带边框的表格
添加 .table-bordered 类为表格和其中的每个单元格增加边框。
鼠标悬停
通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
紧缩表格
通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
状态类
通过这些状态类可以为行或单元格设置颜色。
| Class | 描述 |
|---|---|
.active |
鼠标悬停在行或单元格上时所设置的颜色 |
.success |
标识成功或积极的动作 |
.info |
标识普通的提示信息或动作 |
.warning |
标识警告或需要用户注意 |
.danger |
标识危险或潜在的带来负面影响的动作 |
响应式表格
将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
表单
基本实例
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div></form>内联表单
为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
水平排列的表单
通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。
被支持的控件
表单布局实例中展示了其所支持的标准表单控件。
输入框
包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。
只有正确设置了 type 属性的输入控件才能被赋予正确的样式。
文本域
支持多行文本的表单控件。可根据需要改变 rows 属性。
<textarea class="form-control" rows="3"></textarea>多选和单选框
多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。
设置了 disabled 属性的单选或多选框都能被赋予合适的样式。对于和多选或单选框联合使用的 <label> 标签，如果也希望将悬停于上方的鼠标设置为“禁止点击”的样式，请将 .disabled 类赋予 .radio、.radio-inline、.checkbox、.checkbox-inline 或 <fieldset>。
下拉列表（select）
使用默认选项或添加 multiple 属性可以同时显示多个选项。
输入框焦点 （获取焦点以后的样式）
我们将某些表单控件的默认 outline 样式移除，然后对 :focus 状态赋予 box-shadow 属性。
按钮
预定义样式
使用下面列出的类可以快速创建一个带有预定义样式的按钮
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>尺寸
需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 可以获得不同尺寸的按钮。
.btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。button 元素
由于 :active 是伪状态，因此无需额外添加，但是在需要让其表现出同样外观的时候可以添加 .active 类。
图片
响应式图片
在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-
100%; 和 height: auto; 属性，从而让图片在其父元素中更好的缩放。
图片形状
通过为 <img> 元素添加以下相应的类，可以让图片呈现不同的形状。
<img src="..." alt="..." class="img-rounded">方框
<img src="..." alt="..." class="img-circle">圆框
<img src="..." alt="..." class="img-thumbnail">带边框的方框关闭按钮
通过使用一个象征关闭的图标，可以让模态框和警告框消失。
<button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>三角符号
通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意，向上弹出式菜单中的三角符号是反方向的。
下拉的三角
<span class="caret"></span>
关于颜色
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>p的背景色<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>快速浮动
<div class="pull-left">...</div>左浮
<div class="pull-right">...</div>右浮