<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap的HTML标准模板</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--你自己的样式文件 -->
<link href="css/your-style.css" rel="stylesheet">
<!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
<!--[if lt IE 9]>
<!--bootstrap模板为使IE6，7，8浏览器兼容html5新增的标签，引入下面-->
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<!--bootstrap模板为使IE6，7，8浏览器兼容css3样式，引入下面-->
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
强调：.lead
斜体：<em>、<i>
强调类：
.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）
如果是hover的话，应该这样用：a.text-primary:hover
文本对齐风格：
.text-left
.text-right
.text-center
.text-justify 两端对齐
列表：
CSS本身：有序列表（ol、li）、无序列表(ul、li)、自定义列表（dl、dt（标题）、dd）
去点列表：.list-unstyled
内联列表：通过添加类名.list-inline来实现内联列表，简单点儿说就是把垂直列表换成水平列表，而且
去掉项目符号（编号），保持水平显示，也可以说内敛列表就是为制作水平导航而生。
定义列表：和CSS的差不多<dl><dt>标题</dt> <dd></dd></dl>
水平定义列表：就是<dt></dt>包含的内容和<dd></dd>在水平上，只有当屏幕大于768时才有这个效果。
代码：在bootstrap主要提供了三种代码风格
使用<code></code>来显示单行内联代码
使用<pre></pre>来显示多行快代码
使用<kbd></kbd>来显示用户输入代码
不管使用哪种代码风格，在代码中碰到小于号(<)要使用硬编码"<"来替代，大于号(>)要使用">"来替代。
而且对于<pre>代码块风格，标签前面留多少空格，在显示效果中就会留多少个空格。
当使用<pre>元素时，有时候代码太多，不想让其占有太大的页面篇幅，在pre标签上，添加类名
.pre-scrollable，可以控制代码块区域最大高度为340px，一旦超出，Y轴上有滚动条
表格：<table>
<thead>表头
<tr>
<th></th>
</tr>
</thead>
<tbody>表体
<tr>
</td></td
</tr>
</tbody>
</table>
为不同的样式风格提供了不同的类名：
.table:基础表格
.table-striped:斑马线表格
.table-bordered:带边框的表格
.table-hover:鼠标悬停高亮的表格
.table-condensed:紧凑型表格
.table-responsive:响应式表格
表格行的类：
.active:表示当前活动的信息
.success:表示成功或者正确的行为
.info:表示中立的信息或行为
.warning:表示警告，需要特别注意
.danger:表示危险或者可能是错误的行为
表单：
水平表单：bootstrap框架默认的表单是垂直风格的，但很多时候我们需要的水平表单
风格（标签居左，表单控件居右）。
要实现水平表单效果，需要2个条件：1是在<form>元素使用类名"form-horizontal"
2是要配合bootstrap框架的网格系统。
内联表单：有时候我们需要把表单的控件都在一行内显示，只需要在<form>元素中添加类
名"form-inline"即可。
表单控件：输入框input
表单控件：下拉选择框select
表单控件：文本域textarea
表单控件：复选框checkbox，需要添加类名.checkbox
表单控件：单选择按钮radio，需要添加类名.radio
表单控件：复选框和但选按钮水平排列，需要添加在label上添加类名checkbox-inline或
radio-inline
表单控件：按钮，通常使用<button>来设置
类有几种类型btn、btn-primary、btn-info、btn-success、btn-warning、
btn-danger、btn-inverse、btn-default、btn-link
表单控件：设置控件的大小，类名：input-sm, input-lg,这个仅仅是对高度进行了处理，
如果要对宽度进行处理的话，那么就要用到BootStrap框架里的网格系统
表单控件：禁用状态，bootstrap框架的表单的禁用状态和普通的表单的表单禁用状态
是一样的，在相应的表单控件上添加属性"disabled"
如：<input class="form-control" type="text" placeholder="表单已经
禁用不能输入" disabled>
如：在bootstrap框架中，如果fieldset设置了disabled属性，整个域都
处于被禁用状态。
如：据说对于整个禁用的域，如果legend中有输入框的话，那么这个框
是无法被禁用的。<filedset disabled><legend><input type="text"
class="form-control" placeholder="啦啦啦" /></lengend></filedset>
表单控件：验证状态。成功状态：.has-success，错误状态：.has-error，警告状态：.has-warning
，是和form-group放一起的，如果要加图标的话，需要加has-feedback,这个是放在
成功状态类名的后面的。然后在后面加上span。如：
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
<span class="glyphicon glyphicon-remove form-control-feedback">
表单控件：表单提示信息。<span class="help-block"></span>
表单控件：多标签支持按钮
<button class="btn btn-default" type="button"></button>
<input type="submit" class="btn btn-default">
<span class="btn btn-default"></span>
<div class="btn btn-default"></div>
表单控件：按钮大小，.btn-lg, .btn-sm
表单控件：块状按钮，制作按钮时，需要在制作按钮的时候需要按钮宽度充满整个父容器。
可以使用类：.btn-block。
表单控件：方法一：在标签中添加disabled属性。方法二：在元素标签中添加类名"disabled"
图像：
.img-responsive 响应式图片，主要针对于响应式设计
.img-rounded 圆角图片
.img-circle: 圆形图片
.img-thumbnail 缩略图片
图标：
如：glyphicon glyphicon-search、 glyphicon glyphicon-asterisk
网格系统：网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份（也有24或32份，但12最
常见），再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。bootstrap
框架中的网格系统就是将容器平分成12份的。
页偏移：有的时候我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段
来。这个时候就可以使用列偏移（offset）功能来实现。使用列偏移也非常简单，只需要在列元素
上添加类名"col-md-offset-*"（其中星号代表要偏移的列组合数），那么具有这个类名的列就会
向右偏移。例如,你在列元素上添加"col-md-offset-4"，表示该列向右移动4个列的宽度。
列排序：其实就是改变列的方向。需要添加类名col-md-push-*和col-md-pull-*（*代表移动的列
组合数）
列的嵌套：在一个列里，又可以添加行，最多依然是可以分成12份，不过12份的最大宽度是父元素的宽度。
下拉菜单：
基本用法：1.使用一个名为"dropdown"的容器包裹了整个下拉菜单元素<div class="dropdown"></div>
2.使用了一个<button>按钮作为父菜单，并且定义类名为"dropdown-toggle"和自定义"data-
toggle"属性，且值必须和最外容器类名一致，此示例为: data-toggle="dropdown"
3.下拉菜单项使用ul列表，并且定义一个类名为"dropdown-menu"，此示例为：
<ul class="dropdown-menu">
实现原理：通过js，给父容器"div.dropdown"添加或移除类名"open"来控制下拉菜单显示或隐藏。
下拉分割线：<li role="presentation" class="divider"></li>
菜单标题：<li role="presentation" class="dropdown-header"></li>
对齐方式：bootstrap下拉菜单默认是左对齐，如果要让下拉菜单相对于父容器右对齐时，可以在"dropdown-
menu"上添加一个"pull-right"或者"dropdown-menu-right"类名
菜单项状态：当前状态(.active)和禁用状态(.disabled)
按钮：
按钮组：使用一个名为"btn-group"的容器，把多个按钮放在这个容器中。
按钮工具栏：将按钮组"btn-group"放在一个大的容器"btn-toolbar"中。
按钮组大小："btn-group-lg"、"btn-group-sm"、"btn-group-xs"
嵌套分组：很多时候，我们常把下拉菜单和普通的按钮排列在一起，实现类似于导航菜单的效果
直接为那个按钮设置为按钮组，将<ul></ul>写在里面就可以了。
垂直嵌套分组：需要将类名"btn-group"换成"btn-group-vertical"
等分按钮：等分按钮也常被称为是自适应分组按钮，只要再按钮组"btn-group"上追加一个
"btn-group-justified"。注意：在制作等分按钮时，请尽量使用<a>标签元素来
制作按钮，因为使用button标签元素的话，使用display:table在部分浏览器下支持并不好
按钮下拉菜单：从外观上看和下拉菜单差不多，按钮下拉菜单的原理是点击一下菜单，会显示隐藏的
下拉菜单。
按钮的向下向上三角形：实现方法：需要在".btn-group"类上追加"dropup"类名（这也是
做向上谈起下拉菜单要用的类名）。
向上弹起的下拉菜单：同上
导航：
基础样式：标签形tab导航，也称为选项卡导航
<ul class="nav nav-tabs">
<li><a href="#">ha</a></li>
</ul>
选项卡活动状态：<li class="active"><a href="#">ha</a><li>
选项卡禁用状态：<li class="disabled"><a href="#">hh</a></li>
胶囊形(pills)导航：<ul class="nav nav-pills">
<li class="active"><a></a></li>
</ul>
垂直堆叠的导航：只需要在"nav-pills"的基础上添加一个"nav-stacked"类名即可。
自适应导航：自适应导航指的是导航占容器全部宽度，而且菜单项可以像表格的单元格一样
自适应宽度，需要加一个类名"nav-justified",当然也需要和"nav-tabs"或者
"nav-pills"配合使用。
导航加下拉菜单（二级导航）：将li标签作为父容器，使用类名"dropdown"，同时在li中嵌套
另一个列表ul就可以了。
如：
<ul class="nav nav-pills">
<li class="active"><a href="##">这是首页</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">haha</a></li>
</ul>
</li>
</ul>
面包屑式菜单：为ol加入breadcrumb类。
导航条（navbar）：
基础导航条：在制作一个基础导航条时，分以下几步：1.首先在制作导航的列表(<ul class=
nav">)基础上添加类名"navbar-nav"。2.在列表容器外部添加一个容器(div)，并且
使用类名"navbar"和"navbar-default"
为基础导航条添加标题，二级菜单及状态：
添加标题：为要添加的那个标题设置一个容器(div)，添加类名"navbar-header"，
在其下的<a>标签添加类名"navbar-brand"。添加二级菜单，还是以<li>标签为父
元素，设置其类名为dropdown，其子容器为<a>和<ul>，类名按照下拉菜单一样实现。
带表单的导航条：比如加搜索框和按钮。在navbar容器里放置一个带有navbar-form类名的表单
如：
<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-fixed-top和.navbar-fixed-bottom
响应式导航条：此处看代码最好。 http://www.imooc.com/code/3124
反色导航条：只是将navbar-deafult改成了navbar-inverse。
带页码的分页导航：具体能看到多少页，使用<ul>、<li>，在<ul>标签上加入pagination方法，通过"pagination-lg"
让分页导航变大。通过"pagination-sm"让分页导航变小
翻页分页导航：这种分页导航是看不到具体的页码，只会提供一个"上一页"和"下一页"的按钮
为ul添加.paper，为li添加.previous使上一步居左，.next可以使下一步居右。
标签：
使用方法：<h3>Example heading <span class="label label-default">New</span></h3>
label、label-default、label-primary、label-success、label-info、lable-warning
label-danger
徽章：
使用类名badge，如<span class="badge pull-right">3</span>
缩略图：
通过"thumbnail"样式配合bootstrap的网格系统来实现，为缩略图添加描述使用样式caption
警示框：
默认警示框：使用的是alert来实现警示框效果alert,alert-success、alert-info、alert-warning
以及alert-danger
可关闭的警示框：。。
警示框的链接：添加alert-link
进度条：
基本进度条：外容器使用progress，内容器使用progress-bar
彩色进度条：内容器：progress-bar-info以及其他。。
条纹进度条：外容器：progress-striped，内容器:progress-bar-info及其他。
动态条纹进度条：在progress和progress-striped的基础上再加入active
层叠进度条：百分比，多个内容器
带Label的进度条：直接在<div>标签中添加入:10%
媒体对象：
媒体对象的容器：media
媒体对象的对象：media-object
媒体对象的主体：media-body
媒体对象的标题：media-heading
媒体对象可以嵌套，在medio-body里
媒体对象列表：<ul class="media-list"><li class="media"></li></ul>
列表组：
基本列表组：主要包括两个部分，一个是list-group，列表组容器，常用的是ul元素
当然也可以是ol或是div元素。第二个是list-group-item:列表项，常用
的是li元素，也可以是div元素
带徽章的列表组：只要子啊<li></li>中间添加<span class="badge">12</span>就可以了
带链接的列表组：加<a>标签
自定义列表组：list-group-item-heading用来定义列表项头部样式
list-group-item-text用来定义列表项主要内容
列表项的状态：active disabled
多彩列表项：list-group-item-success等等
面板：
基本面板：就是一个div容器运用了"panel"样式，产生一个具有边框的文本显示块。由于
panel不控制颜色，所以在panel的基础上添加一个控制颜色的主题panel-default
另外在里面添加了一个div.penel-body来放面板主体的内容。
带有头和尾的面板：panel-heading,panel-footer
彩色面板：修改panel-default为panel-danger等等
面板中可以嵌套表格 panel-body里嵌套
面板中可以嵌套列表组 panel-body里嵌套
Bootstrap支持的JavaScript插件
动画过渡(Transitions)等等