第一个bootstrap模板样式
移动端优先
所有bootstrap js插件前先放jquery.js框架
Bootstrap 101 Template
Normalize.css
为了增强跨浏览器表现的一致性，我们使用了 Normalize.css。
布局容器（宽度布局）
.container 类用于固定宽度并支持响应式布局的容器。
...
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
...
栅格系统
所有“列（column）必须放在 ” .row 内。
只有列能作为行的直接子元素
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。系统会自动分为最多12列。只定义类12个样式类
1. row表示行，必须放在container或container-fluid中
2. row被均分成12列， 列的语法是col-xx-**
xx的取值范围：xs（手机）->sm（平板）->md（中等屏幕，台式电脑）->lg（超大屏）
**的取值范围：1~12
3. 只有列能作为行的直接子元素
媒体查询
Title
列偏移(居中，右移动)
col-xx-offset-**
.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
嵌套列
任意一列，都可以在内部在定义row,均分成12份
列排序(推（push），拉（pull）)
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
排版
在标题内还可以包含 标签或赋予 .small 类的元素，可以用来标记副标题。
Title
来了，就是深圳人！
别想走！
页面主体
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 元素和所有段落元素。另外， （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
.lead 类可以让段落突出显示。
...
Marked text（让字体高亮的显示）
You can use the mark tag to highlight text.
被删除的文本
This line of text is meant to be treated as deleted text.
无用文本
This line of text is meant to be treated as no longer accurate.
插入文本
额外插入的文本使用 标签。
带下划线的文本
为文本添加下划线，使用 标签
小号文本
标签包裹，其内的文本将被设置为父容器字体大小的 85%。
着重
通过增加 font-weight 值强调一段文本。
rendered as bold text
斜体
用斜体强调一段文本。
rendered as italicized text
对齐
Left aligned text.
Center aligned text.
Right aligned text.
Justified text.
No wrap text.
改变大小写
Lowercased text.
Uppercased text.
Capitalized text.
缩略语
当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的 元素的增强样式。
attr
首字母缩略语
为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。
HTML
地址
让联系信息以最接近日常使用的格式呈现。在每行结尾添加
可以保留需要的样式。
knight Plan
平山村 世外桃源创意园
深圳市南山区, 0755
Phone: (123) 456-7890
张大大
[email protected]
引用
将任何 HTML 元素包裹在 中即可表现为引用样式。对于直接引用，我们建议用 标签。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
列表
无序列表
- ...
有序列表
- ...
无样式列表
- ...
内联列表
- ...
描述
带有描述的短语列表。
- ...
- ...
代码
内联代码
通过 标签包裹内联样式的代码片段。
用户输入
通过 标签标记用户通过键盘输入的内容。
代码块
多行代码可以使用
标签。为了正确的展示代码，注意将尖括号做转义处理。变量
通过 标签标记变量。y = mx + b y = mx + b程序输出
通过 标签来标记程序输出的内容。表格
基本实例
为任意
条纹状表格
通过 .table-striped 类可以给
...
带边框的表格
添加 .table-bordered 类为表格和其中的每个单元格增加边框。
...
鼠标悬停
通过添加 .table-hover 类可以让
...
紧缩表格
...
状态类
通过这些状态类可以为行或单元格设置颜色。
Class 描述
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
响应式表格
将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
...
表单
输入框
包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。
按钮
让一个人毁灭之前,先让其膨胀
Bootstrap常用组件
无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。
内置图标
使用span标签加class
fontawesome图标
使用i标签加class
您可以将Font Awesome图标使用在几乎任何地方，只需要使用CSS前缀 fa ，再加上图标名称。 Font Awesome是为使用内联元素而设计的。我们通常更喜欢使用 ，因为它更简洁。 但实际上使用 才能更加语义化。
使用 fa-lg (33%递增)、fa-2x、 fa-3x、fa-4x，或者 fa-5x 类 来放大图标。
fa-lg
fa-2x
fa-3x
使用 fa-fw 可以将图标设置为一个固定宽度。主要用于不同宽度图标无法对齐的情况。 尤其在列表或导航时起到重要作用。
Home
使用 fa-spin 类来使任意图标旋转，现在您还可以使用 fa-pulse 来使其进行8方位旋转。尤其适合 fa-spinner、fa-refresh 和 fa-cog 。
组合使用
如果想要将多个图标组合起来，使用 fa-stack 类作为父容器， fa-stack-1x 作为正常比例的图标， fa-stack-2x 作为大一些的图标。
Font Awesome 完全兼容 Bootstrap 的所有组件。
下拉菜单：
在body中需要导入才有相应动作
新的css文件能覆盖上面的bootstrap.css文件信息