Bootstrap
优雅灵活可扩展前段工具
简单、灵活的用于搭建WEB页面的HTML,CSS,JavaScript的工具集
简洁强大的前端开发框架
让Web开发更迅速，更简单
<head>
<meta charset="utf-8">
<title>...</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
标题<h1>到<h6>：h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。
副标题<small>：small>内的文本字体在h1~h3内，其大小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的75%
段落（正文文本）<p>
强调内容<p class="lead">
粗体<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：两端对齐
列表--简介
无序列表<ul> <li>…</li></ul>
有序列表<ol> <li>…</li></ol>
列表--去点列表 .list-unstyled
列表--内联列表 .list-inline 把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示
列表--定义列表<dl> <dt>…</dt><dd>…</dd></dl>
列表--水平定义列表.dl-horizontal
代码
1、使用<code></code>来显示单行内联代码 一般是针对于单个单词或单个句子的代码
2、使用<pre></pre>来显示多行块代码 一般是针对于多行代码（也就是成块的代码）
3、使用<kbd></kbd>来显示用户输入代码 一般是表示用户要通过键盘输入的内容
.pre-scrollable <pre>元素控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。
表格
.table：基础表格 <table class="table">
.table-striped：斑马线表格
.table-bordered：带边框的表格
.table-hover：鼠标悬停高亮的表格
.table-condensed：紧凑型表格
.table-responsive：响应式表格 <div class="table-responsive"> <table class="table table-bordered">
表格--表格行的类
表格的行元素<tr>五种不同的类名，每种类名控制了行的不同背景颜色
.active 表示当前活动的信息 <tr class="active">
.success 表示成功或者正确的行为
.info 表示中立的信息或行为
.warning 表示警告，需要特别注意
.danger 表示危险或者可能是错误的行为
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
</tbody>
</table>
</div>
表单
基础表单<form role="form">
水平表单form-horizontal <form class="form-horizontal" role="form">
内联表单form-inline <form class="form-inline" role="form"><div class="form-group">
表单控件(输入框input)<input type='text' class="form-control" placeholder="User name">
表单控件(下拉选择框select)<select class="form-control"> <select multiple class="form-control"> <option>1</option>
表单控件(文本域textarea)<textarea class="form-control" rows="3"></textarea>
表单控件(复选框checkbox和单选择按钮radio)<div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>喜欢</label></div>
表单控件(复选框和单选按钮水平排列)<label class="checkbox-inline"> <label class="radio-inline">
表单控件(按钮) input[type=“submit”] input[type=“button”] input[type=“reset”] <button>
表单控件大小 input-sm:让控件比正常大小更小 input-lg:让控件比正常大小更大
<div class="col-xs-4"> <input class="form-control input-lg" type="text" placeholder=".col-xs-4"> </div>
表单控件状态(焦点状态)form-control <div class="col-xs-6"> <input class="form-control input-lg" type="text" placeholder="焦点点状态下效果"> </div>
表单控件状态(禁用状态)<input ... disabled> 禁用整个域<fieldset disabled> 取消禁用域中输入框的禁用<legend>
表单控件状态(验证状态) .has-warning:警告状态（黄色） .has-error：错误状态（红色） .has-success：成功状态（绿色）
表单对应状态显示icon has-feedback <div class="form-group has-success has-feedback">
必须在表单中添加一个span元素<span class="glyphiconglyphicon-warning-sign form-control-feedback"></span>
表单提示信息help-block <span class="help-block">你输入的信息是正确的</span>
按钮
.btn 基本按钮<button class="btn" type="button">我是一个基本按钮</button>
.btn-default 默认按钮
多标签支持
<button class="btn btn-default" type="button">button标签按钮</button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<a href="#" class="btn btn-default">a标签按钮</a>
<span class="btn btn-default">span标签按钮</span>
<div class="btn btn-default">div标签按钮</div>
定制风格
基础按钮.btn
默认按钮.btn-default
主要按钮.btn-primary
成功按钮.btn-success
信息按钮.btn-info
警告按钮.btn-warning
危险按钮.btn-danger
链接按钮.btn-link
按钮大小
大型按钮.btn-lg
正常按钮
小型按钮.btn-sm
超小型按钮.btn-xs
块状按钮btn-block
按钮状态——活动状态
悬浮状态(:hover)
点击状态(:active)
焦点状态（:focus）
按钮状态——禁用状态
方法1：在标签中添加disabled属性 <button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button>
方法2：在元素标签中添加类名“disabled” <button class="btn btn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>
图像
img-responsive：响应式图片，主要针对于响应式设计
img-rounded：圆角图片
img-circle：圆形图片
img-thumbnail：缩略图片
图标<span class="glyphicon glyphicon-search"></span>
网格系统
实现原理：网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。
工作原理：
1、数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。
2、在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12。
3、具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素
4、通过设置内距（padding）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（margin）来抵消内距(padding)的影响
基本用法：网格系统用来布局，其实就是列的组合。Bootstrap框架的网格系统中有四种基本的用法。
Container width(Class prefix)：None auto(.col-xs-) 750px(.col-sm-) 970px(.col-md-) 1170px(.col-lg-)
列偏移：col-md-offset-*
列排序：col-md-push-* col-md-pull-*
列的嵌套：
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">.col-md-8</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
<div class="col-md-2">.col-md-3
<div class="row">
<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>
</div>
</div>
</div>
</div>
下拉菜单
下拉菜单（下拉分隔线）：<li role="presentation" class="divider"></li>
下拉菜单（菜单标题）
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">第一部分菜单头部</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">第二部分菜单头部</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
</ul>
</div>
下拉菜单（对齐方式）：Bootstrap框架中下拉菜单默认是左对齐，如果你想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名
下拉菜单（菜单项状态）：悬浮状态（:hover），焦点状态（:focus），当前状态（.active），禁用状态（.disabled）
<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
按钮（按钮组）
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" class="btn btn-success"><span class="glyphicon glyphicon-zoom-in"></span></button>
<button type="button" class="btn btn-info"><span class="glyphicon glyphicon-zoom-out"></span></button>
<button type="button" class="btn btn-warning"><span class="glyphicon glyphicon-download"></span></button>
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-upload"></span></button>
</div>
按钮（按钮工具栏）
<div class="btn-toolbar">
<div class="btn-group btn-group-lg">
......
</div>
</div>
按钮（嵌套分组）<div class="btn-group">
按钮（垂直分组）<div class="btn-group-vertical">
按钮（等分按钮）<div class="btn-group btn-group-justified">
按钮下拉菜单
按钮的向下向上三角形<div class="btn-group dropup">
导航（基础样式）
<ul class="nav nav-tabs">
<li><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li><a href="##">Responsive</a></li>
</ul>
导航（标签形tab导航）<ul class="nav nav-tabs">
导航（胶囊形(pills)导航）<ul class="nav nav-pills">
导航（垂直堆叠的导航）<ul class="nav nav-pills nav-stacked">
分隔线<li class="nav-divider"></li>
自适应导航<ul class="nav nav-tabs nav-justified">
面包屑式导航<ol class="breadcrumb">
导航条
为导航条添加标题、二级菜单及状态
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="##" class="navbar-brand">慕课网</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页</a></li>
<li class="dropdown">
<a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="##">CSS3</a></li>
<li><a href="##">JavaScript</a></li>
<li class="disabled"><a href="##">PHP</a></li>
</ul>
</li>
<li><a href="##">名师介绍</a></li>
<li><a href="##">成功案例</a></li>
<li><a href="##">关于我们</a></li>
</ul>
</div>
带表单的导航条
<form action="##" class="navbar-form navbar-left" rol="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入关键词" />
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
导航条中的按钮、文本和链接： navbar-btn navbar-text navbar-link
固定导航条
navbar-fixed-top：导航条固定在浏览器窗口顶部
navbar-fixed-bottom：导航条固定在浏览器窗口底部
响应式导航条
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
<a href="##" class="navbar-brand">慕课网</a>
</div>
<!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
<div class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页</a></li>
<li><a href="##">系列教程</a></li>
<li><a href="##">名师介绍</a></li>
<li><a href="##">成功案例</a></li>
<li><a href="##">关于我们</a></li>
</ul>
</div>
</div>
反色导航条<div class="navbar navbar-inverse" role="navigation">
分页导航（带页码的分页导航）<ul class="pagination pagination-lg">
分页导航（翻页分页导航）<ul class="pager">
标签
<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">错误标签</span>
徽章<li><a href="#">Messages <span class="badge">3</span></a></li>
缩略图
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img alt="100%x180" src="http://img.imooc.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" >
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img alt="100%x180" src="http://img.imooc.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img alt="100%x180" src="http://img.imooc.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img alt="100%x180" src="http://img.imooc.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
</a>
</div>
</div>
</div>
默认警示框
<div class="alert alert-success" role="alert">恭喜您操作成功！</div>
<div class="alert alert-info" role="alert">请输入正确的密码</div>
<div class="alert alert-warning" role="alert">您已操作失败两次，还有最后一次机会</div>
<div class="alert alert-danger" role="alert">对不起，您输入的密码有误</div>
可关闭的警示框
<div class="alert alert-success alert-dismissable" role="alert">
<button class="close" type="button" data-dismiss="alert">×</button>
恭喜您操作成功！
</div>
警示框的链接
<div class="alert alert-success" role="alert">
<strong>Well done!</strong>
You successfully read
<a href="#" class="alert-link">this important alert message</a>
</div>
基本进度条
<div class="progress">
<div class="progress-bar" style="width:40%">
</div>
</div>
彩色进度条
<div class="progress-bar progress-bar-success" style="width:40%"></div>
<div class="progress-bar progress-bar-info" style="width:60%"></div>
<div class="progress-bar progress-bar-warning" style="width:80%"></div>
<div class="progress-bar progress-bar-danger" style="width:50%"></div>
条纹进度条
<div class="progress progress-striped">
动态条纹进度条
<div class="progress progress-striped active">
正常层叠进度条
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:20%"></div>
<div class="progress-bar progress-bar-info" style="width:10%"></div>
<div class="progress-bar progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div>
层叠条纹进度条
<div class="progress-bar progress-bar-success progress-bar-striped" style="width:20%"></div>
带Label的进度条
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>
媒体对象
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://img.mukewang.com/52e1d29d000161fe06000338-300-170.jpg" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">系列：十天精通CSS3</h4>
<div>全方位深刻详解CSS3模块知识，经典案例分析，代码同步调试，让网页穿上绚丽装备！</div>
</div>
</div>
基础列表组
<ul class="list-group">
<li class="list-group-item">揭开CSS3的面纱</li>
<li class="list-group-item">CSS3选择器</li>
<li class="list-group-item">CSS3边框</li>
<li class="list-group-item">CSS3背景</li>
<li class="list-group-item">CSS3文本</li>
</ul>
带徽章的列表组
<li class="list-group-item">
<span class="badge">13</span>揭开CSS3的面纱
</li>
带链接的列表组
<li class="list-group-item">
<a href="##">揭开CSS3的面纱</a>
</li>
自定义列表组
<div class="list-group">
<a href="##" class="list-group-item">
<h4 class="list-group-item-heading">图解CSS3</h4>
<p class="list-group-item-text">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性...</p>
</a>
<a href="##" class="list-group-item">
<h4 class="list-group-item-heading">Sass中国</h4>
<p class="list-group-item-text">致力于为中国开发者提供最全面，最具影响力，最前沿的Sass相关技术与教程...</p>
</a>
</div>
组合列表项的状态
<div class="list-group">
<a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>
<a href="##" class="list-group-item"><span class="badge">15902</span>W3cplus</a>
<a href="##" class="list-group-item"><span class="badge">59020</span>慕课网</a>
<a href="##" class="list-group-item disabled"><span class="badge">0</span>Sass中国</a>
</div>
多彩列表组
<div class="list-group">
<a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>
<a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>W3cplus</a>
<a href="##" class="list-group-item list-group-item-info"><span class="badge">59020</span>慕课网</a>
<a href="##" class="list-group-item list-group-item-warning"><span class="badge">0</span>Sass中国</a>
<a href="##" class="list-group-item list-group-item-danger"><span class="badge">10</span>Mobile教程</a>
</div>
基础面板
<div class="panel panel-default">
<div class="panel-body">我是一个基础面板，带有默认主题样式风格</div>
</div>
带有头和尾的面板
<div class="panel panel-default">
<div class="panel-heading">图解CSS3</div>
<div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
<div class="panel-footer">作者：大漠</div>
</div>
彩色面板 panel-primary：重点蓝 panel-success：成功绿 panel-info:信息蓝 panel-warning：警告黄 panel-danger：危险红
<div class="panel panel-primary">
<div class="panel-heading">图解CSS3</div>
<div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
<div class="panel-footer">作者：大漠</div>
</div>
面板中嵌套表格
<div class="panel panel-default">
<div class="panel-heading">图解CSS3</div>
<div class="panel-body">
<p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
</p>
<table class="table table-bordered">
<thead>
<tr>
<th>＃</th>
<th>我的书</th>
<th>发布时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>《图解CSS3》</td>
<td>2014-07-10</td>
</tr>
</tbody>
</table>
</div>
<div class="panel-footer">作者：大漠</div>
</div>
导入JavaScript插件
一次性导入：
<!—导入jQuery版本库，因为Bootstrap的JavaScript插件依赖于jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<!—- 一次性导入所有Bootstrap的JavaScript插件（压缩版本） -->
<script src="js/bootstrap.min.js"></script>
单独导入：
? 动画过渡（Transitions）:对应的插件文件“transition.js”
? 模态弹窗（Modal）:对应的插件文件“modal.js”
? 下拉菜单（Dropdown）：对应的插件文件“dropdown.js”
? 滚动侦测（Scrollspy）：对应的插件文件“scrollspy.js”
? 选项卡（Tab）：对应的插件文件“tab.js”
? 提示框（Tooltips）：对应的插件文件“tooltop.js”
? 弹出框（Popover）：对应的插件文件“popover.js”
? 警告框（Alert）：对应的插件文件“alert.js”
? 按钮（Buttons）：对应的插件文件“button.js”
? 折叠/手风琴（Collapse）：对应的插件文件“collapse.js”
? 图片轮播Carousel：对应的插件文件“carousel.js”
? 自动定位浮标Affix：对应的插件文件“affix.js”
动画过渡（Transitions）
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">通过data-target触发</button>
<!-- 模态弹出窗内容 -->
<div class="modal fade" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">模态弹出窗标题</h4>
</div>
<div class="modal-body">
<p>模态弹出窗主体内容</p>
</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>
</div>
优雅灵活可扩展前段工具
简单、灵活的用于搭建WEB页面的HTML,CSS,JavaScript的工具集
简洁强大的前端开发框架
让Web开发更迅速，更简单
如何开始使用Bootstrap
中文网站：
下载：http://v3.bootcss.com/getting-started/#download
CSS样式：http://v3.bootcss.com/css/
组件：http://v3.bootcss.com/components/
<head>
<meta charset="utf-8">
<title>...</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
标题<h1>到<h6>：h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。
副标题<small>：small>内的文本字体在h1~h3内，其大小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的75%
段落（正文文本）<p>
强调内容<p class="lead">
粗体<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：两端对齐
列表--简介
无序列表<ul> <li>…</li></ul>
有序列表<ol> <li>…</li></ol>
列表--去点列表 .list-unstyled
列表--内联列表 .list-inline 把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示
列表--定义列表<dl> <dt>…</dt><dd>…</dd></dl>
列表--水平定义列表.dl-horizontal
代码
1、使用<code></code>来显示单行内联代码 一般是针对于单个单词或单个句子的代码
2、使用<pre></pre>来显示多行块代码 一般是针对于多行代码（也就是成块的代码）
3、使用<kbd></kbd>来显示用户输入代码 一般是表示用户要通过键盘输入的内容
.pre-scrollable <pre>元素控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。
表格
.table：基础表格 <table class="table">
.table-striped：斑马线表格
.table-bordered：带边框的表格
.table-hover：鼠标悬停高亮的表格
.table-condensed：紧凑型表格
.table-responsive：响应式表格 <div class="table-responsive"> <table class="table table-bordered">
表格--表格行的类
表格的行元素<tr>五种不同的类名，每种类名控制了行的不同背景颜色
.active 表示当前活动的信息 <tr class="active">
.success 表示成功或者正确的行为
.info 表示中立的信息或行为
.warning 表示警告，需要特别注意
.danger 表示危险或者可能是错误的行为
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
</tbody>
</table>
</div>
表单
基础表单<form role="form">
水平表单form-horizontal <form class="form-horizontal" role="form">
内联表单form-inline <form class="form-inline" role="form"><div class="form-group">
表单控件(输入框input)<input type='text' class="form-control" placeholder="User name">
表单控件(下拉选择框select)<select class="form-control"> <select multiple class="form-control"> <option>1</option>
表单控件(文本域textarea)<textarea class="form-control" rows="3"></textarea>
表单控件(复选框checkbox和单选择按钮radio)<div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>喜欢</label></div>
表单控件(复选框和单选按钮水平排列)<label class="checkbox-inline"> <label class="radio-inline">
表单控件(按钮) input[type=“submit”] input[type=“button”] input[type=“reset”] <button>
表单控件大小 input-sm:让控件比正常大小更小 input-lg:让控件比正常大小更大
<div class="col-xs-4"> <input class="form-control input-lg" type="text" placeholder=".col-xs-4"> </div>
表单控件状态(焦点状态)form-control <div class="col-xs-6"> <input class="form-control input-lg" type="text" placeholder="焦点点状态下效果"> </div>
表单控件状态(禁用状态)<input ... disabled> 禁用整个域<fieldset disabled> 取消禁用域中输入框的禁用<legend>
表单控件状态(验证状态) .has-warning:警告状态（黄色） .has-error：错误状态（红色） .has-success：成功状态（绿色）
表单对应状态显示icon has-feedback <div class="form-group has-success has-feedback">
必须在表单中添加一个span元素<span class="glyphiconglyphicon-warning-sign form-control-feedback"></span>
表单提示信息help-block <span class="help-block">你输入的信息是正确的</span>
按钮
.btn 基本按钮<button class="btn" type="button">我是一个基本按钮</button>
.btn-default 默认按钮
多标签支持
<button class="btn btn-default" type="button">button标签按钮</button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<a href="#" class="btn btn-default">a标签按钮</a>
<span class="btn btn-default">span标签按钮</span>
<div class="btn btn-default">div标签按钮</div>
定制风格
基础按钮.btn
默认按钮.btn-default
主要按钮.btn-primary
成功按钮.btn-success
信息按钮.btn-info
警告按钮.btn-warning
危险按钮.btn-danger
链接按钮.btn-link
按钮大小
大型按钮.btn-lg
正常按钮
小型按钮.btn-sm
超小型按钮.btn-xs
块状按钮btn-block
按钮状态——活动状态
悬浮状态(:hover)
点击状态(:active)
焦点状态（:focus）
按钮状态——禁用状态
方法1：在标签中添加disabled属性 <button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button>
方法2：在元素标签中添加类名“disabled” <button class="btn btn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>
图像
img-responsive：响应式图片，主要针对于响应式设计
img-rounded：圆角图片
img-circle：圆形图片
img-thumbnail：缩略图片
图标<span class="glyphicon glyphicon-search"></span>
网格系统
实现原理：网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。
工作原理：
1、数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。
2、在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12。
3、具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素
4、通过设置内距（padding）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（margin）来抵消内距(padding)的影响
基本用法：网格系统用来布局，其实就是列的组合。Bootstrap框架的网格系统中有四种基本的用法。
Container width(Class prefix)：None auto(.col-xs-) 750px(.col-sm-) 970px(.col-md-) 1170px(.col-lg-)
列偏移：col-md-offset-*
列排序：col-md-push-* col-md-pull-*
列的嵌套：
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">.col-md-8</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
<div class="col-md-2">.col-md-3
<div class="row">
<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>
</div>
</div>
</div>
</div>
下拉菜单
下拉菜单（下拉分隔线）：<li role="presentation" class="divider"></li>
下拉菜单（菜单标题）
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">第一部分菜单头部</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">第二部分菜单头部</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
</ul>
</div>
下拉菜单（对齐方式）：Bootstrap框架中下拉菜单默认是左对齐，如果你想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名
下拉菜单（菜单项状态）：悬浮状态（:hover），焦点状态（:focus），当前状态（.active），禁用状态（.disabled）
<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
按钮（按钮组）
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" class="btn btn-success"><span class="glyphicon glyphicon-zoom-in"></span></button>
<button type="button" class="btn btn-info"><span class="glyphicon glyphicon-zoom-out"></span></button>
<button type="button" class="btn btn-warning"><span class="glyphicon glyphicon-download"></span></button>
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-upload"></span></button>
</div>
按钮（按钮工具栏）
<div class="btn-toolbar">
<div class="btn-group btn-group-lg">
......
</div>
</div>
按钮（嵌套分组）<div class="btn-group">
按钮（垂直分组）<div class="btn-group-vertical">
按钮（等分按钮）<div class="btn-group btn-group-justified">
按钮下拉菜单
按钮的向下向上三角形<div class="btn-group dropup">
导航（基础样式）
<ul class="nav nav-tabs">
<li><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li><a href="##">Responsive</a></li>
</ul>
导航（标签形tab导航）<ul class="nav nav-tabs">
导航（胶囊形(pills)导航）<ul class="nav nav-pills">
导航（垂直堆叠的导航）<ul class="nav nav-pills nav-stacked">
分隔线<li class="nav-divider"></li>
自适应导航<ul class="nav nav-tabs nav-justified">
面包屑式导航<ol class="breadcrumb">
导航条
为导航条添加标题、二级菜单及状态
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="##" class="navbar-brand">慕课网</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页</a></li>
<li class="dropdown">
<a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="##">CSS3</a></li>
<li><a href="##">JavaScript</a></li>
<li class="disabled"><a href="##">PHP</a></li>
</ul>
</li>
<li><a href="##">名师介绍</a></li>
<li><a href="##">成功案例</a></li>
<li><a href="##">关于我们</a></li>
</ul>
</div>
带表单的导航条
<form action="##" class="navbar-form navbar-left" rol="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入关键词" />
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
导航条中的按钮、文本和链接： navbar-btn navbar-text navbar-link
固定导航条
navbar-fixed-top：导航条固定在浏览器窗口顶部
navbar-fixed-bottom：导航条固定在浏览器窗口底部
响应式导航条
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
<a href="##" class="navbar-brand">慕课网</a>
</div>
<!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
<div class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页</a></li>
<li><a href="##">系列教程</a></li>
<li><a href="##">名师介绍</a></li>
<li><a href="##">成功案例</a></li>
<li><a href="##">关于我们</a></li>
</ul>
</div>
</div>
反色导航条<div class="navbar navbar-inverse" role="navigation">
分页导航（带页码的分页导航）<ul class="pagination pagination-lg">
分页导航（翻页分页导航）<ul class="pager">
标签
<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">错误标签</span>
徽章<li><a href="#">Messages <span class="badge">3</span></a></li>
缩略图
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img alt="100%x180" src="http://img.imooc.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" >
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img alt="100%x180" src="http://img.imooc.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img alt="100%x180" src="http://img.imooc.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img alt="100%x180" src="http://img.imooc.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
</a>
</div>
</div>
</div>
默认警示框
<div class="alert alert-success" role="alert">恭喜您操作成功！</div>
<div class="alert alert-info" role="alert">请输入正确的密码</div>
<div class="alert alert-warning" role="alert">您已操作失败两次，还有最后一次机会</div>
<div class="alert alert-danger" role="alert">对不起，您输入的密码有误</div>
可关闭的警示框
<div class="alert alert-success alert-dismissable" role="alert">
<button class="close" type="button" data-dismiss="alert">×</button>
恭喜您操作成功！
</div>
警示框的链接
<div class="alert alert-success" role="alert">
<strong>Well done!</strong>
You successfully read
<a href="#" class="alert-link">this important alert message</a>
</div>
基本进度条
<div class="progress">
<div class="progress-bar" style="width:40%">
</div>
</div>
彩色进度条
<div class="progress-bar progress-bar-success" style="width:40%"></div>
<div class="progress-bar progress-bar-info" style="width:60%"></div>
<div class="progress-bar progress-bar-warning" style="width:80%"></div>
<div class="progress-bar progress-bar-danger" style="width:50%"></div>
条纹进度条
<div class="progress progress-striped">
动态条纹进度条
<div class="progress progress-striped active">
正常层叠进度条
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:20%"></div>
<div class="progress-bar progress-bar-info" style="width:10%"></div>
<div class="progress-bar progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div>
层叠条纹进度条
<div class="progress-bar progress-bar-success progress-bar-striped" style="width:20%"></div>
带Label的进度条
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>
媒体对象
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://img.mukewang.com/52e1d29d000161fe06000338-300-170.jpg" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">系列：十天精通CSS3</h4>
<div>全方位深刻详解CSS3模块知识，经典案例分析，代码同步调试，让网页穿上绚丽装备！</div>
</div>
</div>
基础列表组
<ul class="list-group">
<li class="list-group-item">揭开CSS3的面纱</li>
<li class="list-group-item">CSS3选择器</li>
<li class="list-group-item">CSS3边框</li>
<li class="list-group-item">CSS3背景</li>
<li class="list-group-item">CSS3文本</li>
</ul>
带徽章的列表组
<li class="list-group-item">
<span class="badge">13</span>揭开CSS3的面纱
</li>
带链接的列表组
<li class="list-group-item">
<a href="##">揭开CSS3的面纱</a>
</li>
自定义列表组
<div class="list-group">
<a href="##" class="list-group-item">
<h4 class="list-group-item-heading">图解CSS3</h4>
<p class="list-group-item-text">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性...</p>
</a>
<a href="##" class="list-group-item">
<h4 class="list-group-item-heading">Sass中国</h4>
<p class="list-group-item-text">致力于为中国开发者提供最全面，最具影响力，最前沿的Sass相关技术与教程...</p>
</a>
</div>
组合列表项的状态
<div class="list-group">
<a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>
<a href="##" class="list-group-item"><span class="badge">15902</span>W3cplus</a>
<a href="##" class="list-group-item"><span class="badge">59020</span>慕课网</a>
<a href="##" class="list-group-item disabled"><span class="badge">0</span>Sass中国</a>
</div>
多彩列表组
<div class="list-group">
<a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>
<a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>W3cplus</a>
<a href="##" class="list-group-item list-group-item-info"><span class="badge">59020</span>慕课网</a>
<a href="##" class="list-group-item list-group-item-warning"><span class="badge">0</span>Sass中国</a>
<a href="##" class="list-group-item list-group-item-danger"><span class="badge">10</span>Mobile教程</a>
</div>
基础面板
<div class="panel panel-default">
<div class="panel-body">我是一个基础面板，带有默认主题样式风格</div>
</div>
带有头和尾的面板
<div class="panel panel-default">
<div class="panel-heading">图解CSS3</div>
<div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
<div class="panel-footer">作者：大漠</div>
</div>
彩色面板 panel-primary：重点蓝 panel-success：成功绿 panel-info:信息蓝 panel-warning：警告黄 panel-danger：危险红
<div class="panel panel-primary">
<div class="panel-heading">图解CSS3</div>
<div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
<div class="panel-footer">作者：大漠</div>
</div>
面板中嵌套表格
<div class="panel panel-default">
<div class="panel-heading">图解CSS3</div>
<div class="panel-body">
<p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
</p>
<table class="table table-bordered">
<thead>
<tr>
<th>＃</th>
<th>我的书</th>
<th>发布时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>《图解CSS3》</td>
<td>2014-07-10</td>
</tr>
</tbody>
</table>
</div>
<div class="panel-footer">作者：大漠</div>
</div>
导入JavaScript插件
一次性导入：
<!—导入jQuery版本库，因为Bootstrap的JavaScript插件依赖于jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<!—- 一次性导入所有Bootstrap的JavaScript插件（压缩版本） -->
<script src="js/bootstrap.min.js"></script>
单独导入：
? 动画过渡（Transitions）:对应的插件文件“transition.js”
? 模态弹窗（Modal）:对应的插件文件“modal.js”
? 下拉菜单（Dropdown）：对应的插件文件“dropdown.js”
? 滚动侦测（Scrollspy）：对应的插件文件“scrollspy.js”
? 选项卡（Tab）：对应的插件文件“tab.js”
? 提示框（Tooltips）：对应的插件文件“tooltop.js”
? 弹出框（Popover）：对应的插件文件“popover.js”
? 警告框（Alert）：对应的插件文件“alert.js”
? 按钮（Buttons）：对应的插件文件“button.js”
? 折叠/手风琴（Collapse）：对应的插件文件“collapse.js”
? 图片轮播Carousel：对应的插件文件“carousel.js”
? 自动定位浮标Affix：对应的插件文件“affix.js”
动画过渡（Transitions）
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">通过data-target触发</button>
<!-- 模态弹出窗内容 -->
<div class="modal fade" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">模态弹出窗标题</h4>
</div>
<div class="modal-body">
<p>模态弹出窗主体内容</p>
</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>
</div>
</div>
参考：http://www.imooc.com/course/list?c=bootstrap
1161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
