一 文本居中
col-xx-offset-xx：水平居中
center-block：使用于不涉及float标签的水平居中，也不涉及列的居中，让哪里居中就写到哪里,本质是：margin：0 auto。
自定义居中，涉及列的居中：
.col-contered{
float:none;
margin:0 auto;
}
文本居中或者display：inline ：text-center。
垂直居中，用在父标签，让子标签垂直居中：
vertical-center{
dispaly：flex；
align-items：center；
}
二 Bootstrap组件
字体图标：span表标签加上一个样式类的格式；格式：class=‘前缀 样式’
三 下拉菜单
下拉菜单：使用javacript插件，让其具有交互性
将下拉菜单和菜单的触发器都放在dropdown里面，或者另一个声明position：relative的元素，然后加入到html的代码里面去。
通过为下拉菜单父元素加上dropup类，可以让下拉菜单向上弹出。
对齐：默认情况下，下拉菜单是沿着父元素的上沿和左侧被定为100%的宽度的。为dropdown-menu加上dropdown-menu-right类可以让菜单右边对齐。
标题：标明一组动作
分割线：为下拉菜单添加分割线，用于为多个链接分组
禁用菜单项：为菜单中的某个元素添加上disabled类。
四 按钮组
按钮：听够按钮容器将按钮放在同一行，于按钮插件联合使用可以设置单选和多选框的样式和恶行为。
按钮工具栏：将一组<div class="btn-group"> 组合进一个 <div class="btn-toolbar"> 中就可以做成更复杂的组件。
尺寸：给btn-group加上btn-group-*类，就可以为按钮设置大小了
............
嵌套：将btn-group放入到另一个btn-group里面就可以了。
垂直排列：将一堆按钮堆叠起来排列；分布式按钮下拉菜单不支持这一种
...
两段对齐排列的按钮组：让每一个按钮长度相同，同时让他们填满父元素的长度。
a元素：将一系列的btn元素放在btn-group和btn-group-justified中即可
...
button元素：为了将 <button> 元素用于两端对齐的按钮组中，必须将每个按钮包裹进一个按钮组中you must wrap each button in a button group。大部分的浏览器不能将我们的 CSS 应用到对齐的 <button> 元素上，但是，由于我们支持按钮式下拉菜单，我们可以解决这个问题。
按钮式下拉菜单：将按钮变成下拉菜单的开关
分裂式下拉菜单：多一个分开的按钮
尺寸：
向上下拉菜单：为父元素添加dropup类就可以将下拉菜单向上打开
五 输入框组
为input标签的前面，后面或者两边添加上文字或者按钮就可以实现对表单控件的扩展，为input-group赋予input-group-addon或者input-group-btn类就可以为form-control的前或者后面添加上额外的元素了。
@@example.com$ .00https://example.com/users/
尺寸：为input-group添加上相应的尺寸，其内部的元素就可以自动调整自身的尺寸，不需要为单另的每个输入框添加重复的尺寸类了。
@@@
额外的多选和单选框：将单选和多选框添加到输入框中
额外元素的按钮：为输入框添加一层input-group-btn类的按钮
额外元素的按钮式下拉菜单：
额外元素的分裂式下拉菜单：
六 导航
在Bootstrap中，导航组件都是依赖于nav类，状态来也是共用的。改变修饰类可以改变样式。
标签页：nav-tabs类式依赖于nav基类的
胶囊式标签类：使用nav-pills类实现的
胶囊式标签类的垂直排列：为该元素的父元素添加上nav-stacked即可
两端对齐的标签页：在大于768px的屏幕上添加nav-justified就可以将标签页的宽度设置相同，并铺满一行，在小屏幕上就会堆叠起来。
禁用链接：还是只要加上disabled类即可
添加下拉菜单：为html代码添加上下拉菜单的插件即可
带有下拉菜单的标签页：
带有下拉菜单的胶囊式标签页：
七 导航条
默认样式的导航条：导航条是导航页头的基础组件，并且可开可关。并且视口会根据屏幕大小开或者关
品牌图标：将导航条内放置品牌标志的地方替换成img标签就可以展示自己的品牌图标。
表单：将表单放置于navbar-form之内就可以呈现很好垂直对齐，并且在较窄的视呈现折叠状态。
按钮：对于不包含在form中的button元素，加上navbar-btn后，可以让特在导航条中垂直居中。
文本：不文本包含在navbar-text中时，为了有正确的行为和颜色，通常使用p标签。
非导航的链接：navbsr-link类可以让链接有正确的默认颜色和反色设置。
组件排列：添加navbar-left和navbar-right工具类让导航链接，表单，按钮或者文本对齐。
固定在顶部：添加上navbar-fixed-top类就可以将导航条固定在顶部了。还可以包含container或者container-fluid容器让导航条居中
固定在底部：添加上navbar-fixed-bottom类就可以将导航条固定在底部了。还可以让导航条居中，方法同上。
静止在顶部：通过加上navbar-static-top类即可创建以恶搞随着页面向下滚动时导航条消失。
反色的导航条：通过添加navbar-inverse类改变导航条的外观。
八 路径导航
通过添加css的：before和content属性为各个路径之间加上分割符。
九 分页
默认分页：
禁用和激活状态：为不可点击的页码添加上disabled类，给当前页面添加active类。
我们建议将 active 或 disabled 状态的链接（即 <a> 标签）替换为 <span> 标签，或者在向前/向后的箭头处省略<a> 标签，这样就可以让其保持需要的样式而不能被点击。
尺寸：通过添加pagination-lg或者pagination-sm来选择尺寸的大小
翻页：用简单的标记和样式做一个上一页和下一页的简单翻页
对齐链接：将页码左右对齐
可选的禁用状态：disabled类也可以用于翻页中的链接
十 标签
Example heading New
可用的变体：改变标签的外观
DefaultPrimarySuccessInfoWarningDanger
十一 徽章
给链接、导航等元素嵌套 <span class="badge"> 元素，可以很醒目的展示新的或未读的信息条目。
适配导航的激活状态：Bootstrap 提供了内置的样式，让胶囊式导航内处于激活状态的元素所包含的徽章展示相匹配的样式。
十二 巨幕
可以将巨幕和浏览器保持一定的宽度并且没有圆角，可以将组件放在container元素的外面，并且在组件内部添加一个container元素
...
十三 页头
页头组件能为h1标签增加适当的空间，并且与页面的其他部分形成一定的分割。他支持h1标签内部嵌套samll元素的默认效果。
Example page header Subtext for header
十四 缩略图
通过缩略图组件扩展Bootstrap的栅格系统，可以很容易的展示栅格样式的图像，视频和文本等内容。
默认样式的实例：
...
自定义内容：添加一点点额外对的标签，就可以八任意类型的html内容，例如标题，段落或者按钮加入缩略图组件内。
十五 警告框
将任意文本和一个可选的按钮组合到一起，就能组成一个警告框，alert类时必须设置的。不同的类代表着不同的警告信息。
............
可关闭的警告框：为警告框添加上alert-dismissible类和一个关闭按钮
Warning! Better check yourself, you're not looking too good.
警告框里面的链接：用alert-link工具类，可以为连接设置与当前警告框相同的颜色。
十六 进度条
基本实例：
带有提示标签的进度条：将设置sr-only类的span标签从进度条中移除，从而让当前进度条显示出来
根据情境变化效果：根据不同的场景显示不同的效果
条纹效果：为进度条加上条纹
动画效果：为progress-bar-striped加上aactive类，使其呈现由右向左运动的效果
堆叠效果：将多个进度条放在同一个progress中。
十七 媒体对象
默认样式：
Media heading
...
对齐：图片或者其他媒体可以和底部，顶部和中部对齐。
Middle aligned media
...
媒体对象列表：用一点点额外的标记，就能在列表内使用媒体对象组件
-
Media heading
...
十八 列表组
列表组是灵活又强大的组件，不仅能用于显示一组简单的元素，还能用于复杂的定制的内容。
基本实例：最简单的列表组仅仅是一个带有多个列表条目的无序列表，另外还需要设置适当的类。我们提供了一些预定义的样式，你可以根据自身的需求通过 CSS 自己定制。
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
十九 徽章
给列表组加上徽章组件，他会被自动放在右边
- 14 Cras justo odio
二十 连接
将li标签换成a标签，就可以组成一个全部是链接的列表组。但是也需要将ul标签替换成div标签
二十一 按钮
列表组中的元素也可以直接是按钮，但是父标签必须是div标签。
被禁用的条目：为list-group-item加上disabled类就可以让单个条目显示成灰色，表出禁用的效果
情景类：为列表中的条目加上情景类，默认样式和链接列表都可以。还可以为列表中的条目设置active状态。
- Dapibus ac facilisis in
- Cras sit amet nibh libero
- Porta ac consectetur ac
- Vestibulum at eros
二十二 定制内容
列表组的每一个元素都可以是任何html内容，甚至是带有链接的列表组
二十三 面版
基本实例：默认的panel组件所做的只是设置基本的边框和内补来包含内容
Basic panel example
带有标题的面版：通过panel-heading可以很简单的为面版加入一个标题容器。也可以通过设置hn系列标签添加一个预定的标题格式。不过hn系列的格式会被panel-heading的样式覆盖
Panel heading without titlePanel contentPanel title
Panel content
带注脚的面版：将按钮和次要的文本放入panel-footer容器内。
Panel content
情景效果：
...............
带表格的面版：为面板不需要边框的表格加上table类。如果是带有panel-body的面版，我们为表格上方加上一个边框，看上去有分割效果
Panel heading...
...
如果没有panel-body，面板标题会和表格链接起来，没有缝隙。
Panel heading...
带有列表组的面版：可以简单的在任何面版中加上具有最大宽度的列表组
Panel heading...
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
二十四 具有响应式特性的嵌入内容
根据被嵌入内容的外部容器的宽度，自动创建一个固定的比例，从而让浏览器自动确定视频或 slideshow 的尺寸，能够在各种设备上缩放。
这些规则被直接应用在iframe，embed，video和object元素上。最终样式与其他属性相匹配，只要明确使用一个派生出来的embed-responsie-item类即可。
注意：iframe元素不需要设置frameborder=0属性，内部已经这样做了
二十五 Well
默认效果：将Well用在元素上，就能有嵌入的简单效果
...
可选类/样式：这两个修饰类可以控制组件的内补和圆角的设置。
...
...