兼容ie:<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
移动设备: <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--[if lt IE 9]>
<script src="/assets/js/html5shiv.js"></script>
<script src="/static/assets/js/respond.min.js"></script>
<![endif]-->
网格：
超小设备 小型设备 中型设备 大型设备
宽度：col-xs .col-sm .col-md .col-lg
偏移：col-md-offset-1
排序：col-md-push col-md-pull
排版：
<h1><h1><small><small><h1> .lead <blockquote></blockquote> .initialism 缩写 list-inline list-unstyled
containter 居中 containter-fluid 流式布局
page-header 头
page-body
row 行 span 块
表格类
.table .table-bordered .table-hover
.table-striped 内添加斑马线形式的条纹 ( IE8 不支持)
.active .success .info .warning .danger
表单
垂直表单：role="form" .form-group .form-control
内联并排表单： .form-inline role="form" .form-group .form-control
水平表单(lable、input元素在同一行)：.form-horizontal role="form" .form-group .control-label
.form-control
单选择框 radio 与checkbox
垂直： checkbox checkbox radio radio
内联: checkbox-inline radio-inline
选择框 select: .multiple 可多选
静态控件 .form-control-static
focus 获取焦点
disabled 禁用
按钮：.btn .btn-default .btn-primary .btn-success .btn-info .btn-warning .btn-danger .btn-link .active
.disabled .btn-lg .btn-sm .btn-xs .btn-block
大小：.input-lg .input-sm <span class="help-block"></span>标签label label-default label-primary label-success label-info label-warning label-danger
图片.img-rounded 添加圆角 .img-circle 圆形.img-thumbnail 添加一些内边距（padding）和一个灰色的边框.img-responsive
文本：.text-left .text-center .text-right .text-muted .text-primary .text-success .text-info .text-warning .text-danger背景：.bg-primary .bg-success .bg-info .gb-waning .bg-danger提示警告 alert-success alert-info alert-warning alert-danger alert-dismissable
其他：.pull-left .pull-right .center-block .clearflax .hidden show sr-only
<code>< pre> 显示代码
.text-hide 将页面元素所包含的文本内容替换为背景图 .close 显示关闭按钮 .caret 显示下拉式功能 caret 插入符
下拉菜单：.
按钮组：.btn-group .btn-toolbar .btn-group-vertical 垂直堆叠显示
按钮下拉：input-group-addon
导航：nav nav-tables nav-pills(胶囊样式)nav-stacked .nav-justified disabled
导航栏：.navbar navbar-default role="navigation" nav navbar-navnavbar-inverse面包屑 .breadcrumb 徽章 badge大屏幕 jumbotron缩略图.thumbnail进度条 progress-bar多媒体 media
列表组 list-group list-group-item面板 panel panel-heading panel-body panel-info panel-success panel-error well
模拟框Modal
下拉菜单（Dropdown）
滚动监听（Scrollspy）
标签页（Tab）
提示工具（Tooltip）
弹出框（Popover）
警告框（Alert）
按钮（Button）插件
折叠（Collapse）
轮播（Carousel）
附加导航（Affix）
旋转木马carousel-inner
折叠内容collapse
选项卡：
table-p
breadcrmb 导航路径分页器ul/li
-----------modal 对话框----------------------------
<a href="page.html" data-toggle="modal" data-targer-"#mymodel">弹出</a>
<div id="mymodal" class="modal hide fade">
<div class="modal-header">
<button type="btn" class="colose" data-dismiss="modal"></button>
<h3>对话框标题<h3>
</div>
<div class="modal-body">
<p>对话框主题</p>
</div>
<div class="modal-footer">
<a href="btn" data-dismiss="modal">取消</a>
<a href="#" class="btn btn-primary" data-dismiss = "modal">确定</a>
<div>
</div>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal"
data-target="#myModal">
开始演示模态框
</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
模态框（Modal）标题
</h4>
</div>
<div class="modal-body">
在这里添加一些文本
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-primary">
提交更改
</button>
</div>
</div><!-- /.modal-content -->
</div>
<!-- /.modal -->
--------左右可切换式标签页
------------------
<ulclass="nav
nav-tabs"id="myTab">
<liclass="active"><ahref="#home">首页</a></li>
<li><ahref="#profile">Profile</a></li>
</ul>
<divclass="tab-content">
<divclass="tab-pane
active"id="home">...</div>
<divclass="tab-pane"id="profile">...</div>
</div>
--------弹出提示
------------------
--------警告
------------------
<aclass="close"data-dismiss="alert"href="#">×</a>
--------上下折叠---------------------------------
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
simple collapsible
</button>
<div id="demo" class="collapse in"> … </div>
左侧导航
<div class="">
<a href="#userMeun" class="nav-header collapsed" data-toggle="collapse"><i class="icon-user-md icon-large"></i> 用户管理</a>
<ul id="userMeun" class="nav nav-list collapse">
<li><a href="#"><i class="icon-user"></i> 增加用户</a></li>
<li><a href="#"><i class="icon-edit"></i> 修改用户</a></li>
<li><a href="#"><i class="icon-trash"></i> 删除用户</a></li>
<li><a href="#"><i class="icon-list"></i> 用户列表</a></li>
</ul>
<a href="#articleMenu" class="nav-header collapsed" data-toggle="collapse"><i class="icon-book icon-large"></i> 文章管理</a>
<ul id="articleMenu" class="nav nav-list collapse">
<li><a href="#"><i class="icon-pencil"></i> 添加文章</a></li>
<li><a href="#"><i class="icon-list-alt"></i> 文章列表</a></li>
</ul>
</div>