排版

标题

可以使用<h1>...<h6>,也可以使用类名h1~h6
使用<small>制作副标题

段落

默认字号:14p，line-height:1,42857143，颜色为深灰色，字体为sans-serif(可根据需要进行修改)

强调内容

添加类名lead
<small>
<strong>
<em>
<cite>

粗体

<b>
<strong>

斜体

<em>
<i>

强调相关的类

.text-muted:提示，使用浅灰色（＃999）
.text-primary:主要，使用蓝色（＃428bca）
.text－success：成功，使用浅绿色（＃3c763d）
.text－info：通知信息，使用浅蓝色（＃31708f）
.text－warning：警告，使用黄色（＃8a6d3b）
.text－danger：危险，使用褐色（＃a94442）

文本对齐风格

.text-left:左对齐
.text-center:居中对齐
.text-right:右对齐
.text-justify:两端对齐（各浏览器解析不一致，慎用）

列表

.list-unstyled 去点列表
.list-inline 内联列表,把垂直列表变为水平列表，去掉项目编号
<dl><dt><dd> 定义列表
.dl-horizontal 水平定义列表

代码

<code>单行内联代码
<kbd>用户输入代码
<pre>多行块代码
为<pre>元素添加.pre-scrollable类，可以控制代码块区域最大高度为340px。

注意：不管是用哪种代码风格，代码中遇到小于号用’&lt’代替，大于号用’&gt’代替

表格

表格类型

.table 基础表格
.table-striped 斑马线表格
.table-bordered 带边框的表格
.table-hover 鼠标悬停高亮的表格
.table-condensed 紧凑型表格
.table-responsive 响应型表格

表格行的类

<tr>

.active 表示当前活动的信息
.success 表示成功或正确的行为
.info 表示中立的信息或行为
.warning 表示警告，需要特别注意
.danger 表示危险或可能是错误的行为

表单

<input><select><textarea>

.gorm-group 内联表单
<lable>标签里加.sr-only标签将隐藏

<form>

.form-horizontal 水平表单（标签居左，表单控件居右）
.form-inline 内联表单

表单控件

input

.form-control 定制效果

下拉选项框select

multiple 统一样式风格

文本域textarea

.form-control 无需设置cols属性

复选框checkbox和单选radio

.checkbox
.radio

复选框和单选按钮水平排列

label分别添加

.checkbox-inline
.radio-inline

按钮类型

<button>

input[type=’submit’]
input[type=’button’]
input[type=’reset’]

表单控件大小

<input><textarea><select>

.input-sm 让控件比正常大小更小
.input-lg 让控件比正常大小更大

表单控件状态（焦点状态）

.form-control //焦点状态是通过伪类:focus 实现的。

表单控件状态（禁用状态）

disabled 不过如果fieldset设置了disabled，但legend中如果有输入框的话，这个输入框无法被禁用。

表单控件状态（验证状态）

.has-warning 警告（黄色）
.has-error 错误（红色）
.has-success 成功（绿色）

若想显示相应的icon，只需在上面的属性基础上添加

.has-feedback

同时必须在表单中添加一个

1	<span class='glyphicon glyphicon-warning-sign/glyphicon-ok/glyphicon-remove form-control-feedback'>

元素

表单提示信息

.help-block 块状提示信息

按钮

.btn 基本按钮
.btn-default 默认按钮 在.btn基础上添加

//强烈建议使用button或a标签来制作按钮

定制风格

.btn-primary 主要按钮
.btn-success 成功按钮
.btn-info 信息按钮
.btn-waring 警告按钮
.btn-danger 危险按钮
.btn-link 链接按钮

按钮大小

.btn-lg 大型按钮
.btn-sm 小型按钮
.btn-xs 超小型按钮

块状按钮

.btn-block 可以让按钮充满整个容器

按钮状态－活动状态

对于<button>元素添加伪类实现

:hover 悬浮状态
:active 点击状态
:focus 焦点状态

对于<a>元素通过添加相应的类实现

按钮状态－禁用状态

在标签中添加disabled属性，可以禁止元素的默认行为
或添加类名.disabled，不会禁止按钮的默认行为

图像

.img-responsive 响应式图片
.img-rounded 圆角图片
.img-circle 圆形图片
.img-thumbnail 缩略图片

图标

.glyphicon

所有icon都是以glyphicon-前缀的类名开始，然后后缀表示图标的名称。

网格系统

工作原理

基本用法

列偏移

col-md-offset-* 向右偏移，星号代表要便宜的列组合数

列排序

.col-md-push-*
.col-md-pull-*

菜单、按钮及导航

下拉菜单

<div> 添加.dropdown
<button> 添加.dropdown-toggle data-toggle="dropdown"
<ul> 添加.dropdown-menu

下拉分割线

添加空的<li>并给这个<li>添加.divider

菜单标题

.dropdown-header

对齐方式

在<ul>添加.pull-left或.dropdown-menu-left 默认是左对齐
在<ul>添加.pull-right或.dropdown-menu-right 右对齐

下拉菜单（菜单项状态）

:hover 悬浮状态
:focus 焦点状态
.active 当前状态
.disabled 禁用状态

按钮

按钮组

.btn-group

不管是用什么标签，.btn-group容器里的标签元素需要带有类名.btn

按钮工具栏

将按钮组.btn-group按组放在一个大的容器.btn-toobar中

.btn-group-lg 大按钮组
.btn-group-sm 小按钮组
.btn-group-xs 超小按钮组

嵌套分组

下拉菜单和普通按钮排列在一起，实现类似于导航菜单的效果，只需将.dropdown的容器换成btn-group。

垂直分组

只要把水平分组的.btn-group换成.btn-group-vertical即可

等分按钮

只需在按钮组.btn-group追加.btn-group-justified

按钮下拉菜单

把div.dropdown换成div.btn-group

按钮的向上向下三角形

在<button>标签中添加<span calss="caret"></span> 向下三角形
在.btn-group类上追加.dropup向上三角形

向上弹起的下拉菜单

在.btn-group类上添加.dropup
如果是普通向上糖醋下拉菜单，只需在.dropdown添加.dropup

导航条，分页导航

导航条

基础导航条

首先中执着导航的列表（<ul class="nav"）基础上添加类名navbar-nav
在列表外部添加一个容器(div)，并且使用类名navbar和navbar-default

为导航条添加标题、二级菜单及状态

1
2
3

<div class="navbar-header">
    <a href="##" class="navbar-brand">标题</a>
</div>

带表单的导航条

.navbar-form

导航条中的按钮、文本和链接

除了navbar-brand中的a元素和navbar-nav的ul和navbar-form 之外，还可以使用其他元素

.navbar-btn 导航条中的按钮
.navbar-text 导航条中的文本
.navbar-link 导航条中的普通链接

需要配合navbar-brand,navbar-nav使用，且数量不能超过2个

固定导航条

.navbar-fixed-top 导航条固定住浏览器窗口顶部
.navbar-fixed-bottom 导航条固定住浏览器窗口底部

由于导航条默认高度是50px，页面主内容顶部和底部都被固定导航条给遮住了，解决办法:

body {
    padding-top:70px;/*有顶部固定导航条时设置*/
    padding-bottom:70px;/*有底部固定导航条时设置*/
}

响应式导航条

保证主窄屏时需要折叠的内容必须包裹在带一个div内，并且为这个div加入.collapse``.navbar-collapse两个类名。最后再为这个div 添加一个类名或id名。

保证在窄屏时要显示的图标样式（固定写法）

<button class="navbar-toggle" type="button" data-toggle="collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

并为button添加data-target=”.类名／#id名”（由需要折叠的div决定）

反色导航条

在默认导航条基础上，将navbar-deafult换成navbar-inverse

分页导航（带页码的分页导航）

带页码的分页导航
带翻页的分页导航

在ul标签上加入.pagination即可
大小设置：

pagination-lg 让分页导航变大
pagination-sm 让分页导航变小

分页导航（翻页分页导航）

在ul标签上加入.pager即可
对齐样式设置：
在<li>标签内添加：

previous：让上一步按钮居左
next: 让下一步按钮居右

徽章

使用badge样式来实现

1	<a href="#">index<span class="badge">42</span></a>

其他内置组件

缩略图

通过.thumbnail样式配合网格系统来实现
在缩略图的基础上添加一个div名为.caption的容器，放置标题，文本描述，按钮等。

警示框

警示框样式

在.alert样式基础上追加：

.alert-success 成功警示框
.alert-info 信息警示框
.alert-warning 警告警示框
.alert-danger 错误警示框

可关闭的警示框

在.alert样式基础上添加.alert-dismissable
在button标签中加入class="close"
要确保关闭按钮元素上设置了自定义属性:"data-dismiss="alert""

警示框的链接

通过给警示框的链接添加一个名为.alert-link的类名

进度条

基本样式

外容器用.progress
子容器用.progress-bar,style=”width:40%”

进阶版：

role="progressbar"：告诉搜索引擎这个div的作用时进度条
aria-valuenow="40": 当前进度条的进度为40%
aria-valuemin="0": 进度条的最小值为0%
aria-valuemax="100": 进度条的最大值为100%

彩色进度条

.progress-bar-info:信息进度条，蓝色
progress-bar-success:成功进度条，绿色
progress-bar-warning:警告进度条，黄色
progress-bar-danger:错误进度条，红色

条纹进度条

在外容器.progress基础上添加.progress-striped

动态条纹进度条

在条纹进度条基础上加上.active

层叠进度条

总宽度不超过100%即可

带label的进度条

只需在进度条中添加需要的值即可

媒体对象

默认媒体对象

.media 媒体对象的容器
.media-object 媒体对象的对象，通常是图片
.media-body 主体内容，常常是图片侧边内容
.media-heading 媒体对象的标题，可选

还常常使用.pull-left或.pull-right来控制媒体对象的浮动方式

媒体对象的嵌套

只需将另一个媒体对象结构放置在媒体对象的主题内容.media-body里即可

媒体对象列表

1 2	<ul class="media-list"> <li class="media">

列表组

基础列表组

list-group 列表组容器，常用的是ul，也可以是ol，div
list-group-item 列表项，常用的是li，也可以是div

带徽章的列表组

只需在.list-group-item中添加徽章组件.badge

1	<span class="badge">98</span>

带链接的列表组

将ul.list-group使用div.list-group来替换
用a.list-group-item替换li.list-group-item

自定义列表组

list-group-item-heading
list-group-item-text

列表项的状态设置

active 表示当前状态
disabled 表示禁用状态

多彩列表组

在list-group-item基础上添加即可

list-group-item-success
list-group-item-info
list-group-item-warning
list-group-item-danger

面板

基础面板

<div class="panel panel-default">
    <div class="panel-body">基础面板
    </div>
</div>

带有头和尾的面板

panel-heading 头部
panel-footer 尾部

色彩面板

panel-primary: 重点蓝
panel-success: 成功绿
panel-info: 信息蓝
panel-warning: 警告黄
panel-danger: 危险红

面板中嵌套表格

在panel-body所在的div外面添加

<table class="table table-bordered">
<thead></thead>
...
</table>

面板中的嵌套列表组

直接添加

1
2
3

<ul class="list-group">
<li class="list-group-item"></li>
</ul>

即可

导入JavaScript插件

transition.js 动画过度
modal.js 模态弹窗
dropdown.js 下拉菜单
scrollspy.js 滚动侦测
tab.js 选项卡
tooltop.js 提示框
popover.js 弹出框
alert.js 警告框
button.js 按钮
collapse.js 折叠／手风琴
carousel.js 图片轮播
affix.js 自动定位浮标

动画过渡

模态弹出窗的滑动和渐变效果
选项卡的渐变效果
警告框的渐变效果
图片轮播的滑动效果

模态弹出框

弹出窗三样式：

modal
modal-dialog
modal-content 弹出窗的真正内容都放置在此

modal-content包含三部分：

modal-header 主要包含标题和关闭按钮
modal-body 弹出框的主要内容
modal-footer 主要放置操作按钮

大小样式

modal-lg 大尺寸样式
modal-sm 小尺寸样式

触发模态弹出窗的两种方法

声明式触发法

声明两个必要的属性：data-toggle=”modal”(必须)和data-target=”#mymodal”
data-target可以设置为css的选择符，也可以设置为模态弹窗的id值。

链接<a>元素，可以使用链接元素自带的href属性替代data-target属性
1
<a data-toggle="modal" href="#mymodal">

建议使用第一种方式

为弹出框增加过渡动画效果

可通过为”.modal”增加类名”.fade”为模态弹出框增加过渡效果

模态弹出框的使用(data-参数说明)

模拟弹出框的使用（JavaScript触发）

$(function(){
        $(".btn").click(function(){
            $("#mymodal").modal();
        });
    });

JavaScript触发时的参数设置

参数设置：

事件设置：

下拉菜单

1	data-toggle="dropdown"

排版

标题

段落

强调内容

粗体

斜体

强调相关的类

文本对齐风格

列表

代码

表格

表格类型

表格行的类

表单

表单控件

input

下拉选项框select

文本域textarea

复选框checkbox和单选radio

复选框和单选按钮水平排列

按钮类型

表单控件大小

表单控件状态（焦点状态）

表单控件状态（禁用状态）

表单控件状态（验证状态）

表单提示信息

按钮

定制风格

按钮大小

块状按钮

按钮状态－活动状态

按钮状态－禁用状态

图像

图标

网格系统

工作原理

基本用法

列偏移

列排序

菜单、按钮及导航

下拉菜单

下拉分割线

菜单标题

对齐方式

下拉菜单（菜单项状态）

按钮

按钮组

按钮工具栏

嵌套分组

垂直分组

等分按钮

按钮下拉菜单

按钮的向上向下三角形

向上弹起的下拉菜单

导航

导航类型

导航加下拉菜单（二级导航）

导航条，分页导航

导航条

基础导航条

为导航条添加标题、二级菜单及状态

带表单的导航条

导航条中的按钮、文本和链接

固定导航条

响应式导航条

反色导航条

分页导航（带页码的分页导航）

分页导航（翻页分页导航）

标签

徽章

其他内置组件

缩略图

警示框

警示框样式

可关闭的警示框

警示框的链接

进度条

基本样式

彩色进度条

条纹进度条