1. Bootstrap 简介
bootstrap 是一种崭新的增广样本统计方法，为解决小样本问题提供了很好的思路。它是非参数统计中一种重要的估计统计量方差进而进行区间估计的统计方法。

可以通过多种方法来建立 bootstrap 的数据生成过程 (DGP) 。所谓的 bootstrap DGP 是对未知的 「真实 DGP」的一种估计。如果 bootstrap DGP 在某种意义上接近真实的 DGP，那么由 bootstrap DGP 生成的数据将与真实 DGP 生成的数据相似(如果已知的话)。如果是这样，则进行模拟使用 bootstrap DGP 获得的 P 值与真实 P 值足够接近，可以进行准确的推理。

Bootstrap 的基本思想是：如果 观测样本 是从母体中随机抽取的，那么它将包含母体的全部的信息，那么我们不妨就把这个观测样本视为 “总体”。可以简单地概括为：既然样本是抽出来的，那我何不从样本中再抽样。

具体而言，Bootstrap 的第一步是生成一系列 bootstrap 经验样本 (Empirical Sample) (有时也被形象地称为 「伪样本」)，每个样本都是初始数据的一次有放回抽样。通过对 经验样本 的计算，获得统计量的分布。例如，要进行 1000 次 bootstrap，求平均值的置信区间，可以对每个经验样本 计算平均值。这样就获得了 1000 个平均值。对这 1000 个平均值的分位数进行计算， 即可获得置信区间。已经证明，在初始样本足够大且初始样本是从母体中随机抽取的情况下，bootstrap 抽样能够无偏接近总体的分布。

Bootstrap 的基本步骤如下：

Step 1: 采用有放回抽样方法从原始样本中抽取一定数量的子样本。
Step 2: 根据抽出的样本计算想要的统计量。
Step 3: 重复前两步 K 次，得到 K 个统计量的估计值。
Step 4: 根据 K 个估计值获得统计量的分布，并计算置信区间。

实际应用过程中，对于包含 N 个观察值的 观测样本 而言，Bootstrap 抽样得到的经验样本也会包含 N 个观察值。这意味着，在某个 经验样本 中，有些观察值可能被多次抽中，而有些观察值则可能一次都没有被抽中

1.2 标准差与标准误
简言之，统计量的标准差就称为 标准误。详情参见 「标准差与标准误 - 简书」，以及「标准差，标准与置信区间」。

2. 布局容器和栅格网格系统

2.1 布局容器

• container 类⽤于固定宽度并⽀持响应式布局的容器

<div class="container">
 ...
</div>

• container-fluid类⽤于100% 宽度，占据全部视⼝（viewport）的容器

<div class="container-fluid">
 ...
</div>

2.2 栅格网格系统
随着屏幕或视⼝（viewport）尺⼨的增加，系统会⾃动分为最多12列。栅格系统⽤于通过⼀系列的⾏（row）与列（column）的组合来创建⻚⾯布局，你的内容就可以放⼊这些创建好的布局中

具体设备根据如下配置

 数据⾏(.row)必须包含在容器（.container）中，以便为其赋予合适的对⻬⽅式和内距(padding)。
在⾏(.row)中可以添加列(.column), 只有列（column）才可以作为⾏容器(.row)的直接⼦元素，但列数之和不能超过平分的总列数，⽐如12。如果⼤于12,则⾃动换到下⼀⾏

列组合

<div class="container">
 <div class="row">
 <div class="col-md-4">4列</div>
 <div class="col-md-8">8列</div>
 </div>
</div>

列偏移

<div class="container">
 <div class="row">
 <div class="col-md-1">1列</div>
 <div class="col-md-1">2列</div>
 <div class="col-md-1 col-md-offset-8">11列</div>
 <div class="col-md-1">12列</div>
 </div>
</div>

列排序

<div class="container">
 <div class="row">
 <div class="col-md-1 col-md-push-10">1列</div>
 <div class="col-md-1 col-md-pull-1">1列</div> 
 </div>
</div>

3. 常用样式

标题

• 提供 .h1~.h6的样式名，标签设置对应的样式名则会有对应的标题效果
• 提供 .small的样式名，有副标题的效果。

 <h1>h1. Bootstrap heading<small>副标题</small></h1>
 <div class="h1">Bootstrap标题1<span class="small" >副标题</span></div>

段落

• 通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。

  <small>:小号字
  ​<b><strong>:加粗
  <i><em>:斜体 <p>以后的你会感谢现在努力的你</p>
   <p class="lead">以后的你会感谢现在努力的你</p>
   <p class="lead"><small>以后的</small><b>你</b>会<i>感谢</i>现在<em>努力</em>的<strong>你</strong></p>
  
  

  强调

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

对齐
对齐效果
Bootstrap通过定义四个类名来控制文本的对齐风格：
.text-left：左对齐
.text-center：居中对齐
.text-right：右对齐

关于列表
列表

去点列表
class=“list-unstyled”

内联列表
class=“list-inline”

定义列表
使用样式 class=“dl-horizontal” 制作水平定义列表 : 当标题宽度超过160px时，将会显示三个省略号

关于表格
基础样式
1）.table：基础表格

附加样式

.table-striped：斑马线表格

.table-bordered：带边框的表格

.table-hover：鼠标悬停高亮的表格

table-condensed：紧凑型表格，单元格没内距或者内距较其他表格的内距小

<table class="table table-bordered table-striped table-hover table-condensed">
	<tr class="info">
	  <th>JavaSE</th>
		<th>数据库</th>
		<th>JavaScript</th>
	</tr>
	<tr class="active">
		<td>面向对象</td>
		<td>oracle</td>
		<td>json</td>
	</tr>
	<tr class="danger" >
		<td>数组</td>
		<td>mysql</td>
		<td>ajax</td>
	</tr>
	<tr class="warning">
		<td>面向对象</td>
		<td>oracle</td>
		<td>json</td>
	</tr>
	<tr class="success">
		<td>数组</td>
		<td>mysql</td>
		<td>ajax</td>
	</tr>
 </table>

4. 表单

4.1 控件

表单控件

• .form-control(适中)
• .input-lg（较大）
• .input-sm（较小）
• 输入框 text

演示代码如下

 <div class="container">
	 <!--  文本框 -->
	 <div class="row">
		 <div class="col-sm-3">
					 <input type="text" name="" id=""  />
			 <input type="text" name="" id="" class="form-control" />
			 <input type="text" name="" id="" class="form-control input-lg" />
			 <input type="text" name="" id="" class="form-control input-sm" />
		 </div>
	 </div>
 </div> 

关于复选框 checkbox

• 垂直显示： .checkbox
• 水平显示： .checkbox-inline

代码显示

 <div class="row"> 
 <input type="checkbox" >游戏
 <input type="checkbox" >学习
 <br>
	 <!-- 垂直显示 -->
	 <div>
		 <div class="checkbox">
			 <label><input type="checkbox" >游戏</label>
		 </div>
		 <div class="checkbox">
			 <label><input type="checkbox" >学习</label>
		 </div>
	 </div>
	 
	 <!-- 水平显示 -->
	 <div>
		 <label class="checkbox-inline">
			 <input type="checkbox" >游戏
		 </label>
		 <label class="checkbox-inline">
			 <input type="checkbox" >学习
		 </label>
	 </div>
	 
 </div>

单选框 radio

垂直显示： .radio
水平显示： .radio-inline
关于按钮框
使用 button 实现
基础样式： btn
附加样式：btn-primary，btn-info ， btn-success， btn-warning ，btn-danger， btn-link，btn-default
按钮大小：使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮

<div class="row">
	 <button>按钮</button>
	 <hr>
	 <button class="btn">按钮</button>
	 <button class="btn btn-primary">按钮</button>
	 <button class="btn btn-info">按钮</button>
	 <button class="btn btn-danger">按钮</button>
	 <button class="btn btn-warning">按钮</button>
	 <button class="btn btn-success">按钮</button>
	 <button class="btn btn-link">按钮</button>
	 <hr>
	 <button class="btn btn-primary btn-xs">按钮</button>
	 <button class="btn btn-info btn-sm">按钮</button>
	 <button class="btn btn-danger btn-lg">按钮</button>
	 <hr>
	 <a href="##" class="btn btn-info">a标签按钮</a>
	 <span class="btn btn-success">span标签按钮</span>
	 <div class="btn btn-warning">div标签按钮</div>
	 <br>
	 <!-- 按钮禁用-->
	 <!-- 样式上禁用 -->
	 <button class="btn btn-warning disabled" onclick="alert(1)">按钮</button>
	 <!-- 禁用 -->
	 <button class="btn btn-success" disabled="disabled"  onclick="alert(1)">按钮</button>
	 
 </div>

4.2 布局
水平表单

向⽗元素添加 role=“form”
把标签和控件放在⼀个带有 class .form-group 的中。这是获取最佳间距所必需的
具体role的作用是

role是无障碍阅读，是给有阅读障碍的人设置的属性，有阅读障碍的人可以用读屏软件来解析，跟正常人没多大关系。可以不设置，不设置的话读屏软件就无法解析，有阅读障碍的人也就"看"不了
属性role的存在，是为了告诉Accessibility类应用（比如屏幕朗读程序，为盲人提供的访问网络的便利程序），这是一个按钮。在html5元素内，标签本身就是有语义的，因此role是不必添加的，至少是不推荐的，但是bootstrap的案例内很多都是有类似的属性和声明的，目的是为了兼容老版本的浏览器（用户代理），如果你的代码使用了html5标签，并且不准备支持老版本的浏览器，不妨不使用role标签。

内联表单

将表单的控件都在⼀⾏内显示form-inline
注意label不会显示，存在的意义：如果没有为输⼊控件设置label标签，屏幕阅读器将⽆法正确识别。

5. 插件
5.1 导航框

class 为

nav nav-tabs 标签式的导航菜单
nav nav-pills基本的胶囊式导航菜单
pagination分页导航
pager翻页导航
breadcrumb面包屑导航
导航中如果有默认选中的多一个这个属性class="active"
示意代码

 <ul class="nav nav-tabs">
   <li> <a href="#">Home</a></li>
   <li><a href="#">SVN</a></li>
   <li><a href="#">iOS</a></li>
   <li><a href="#">VB.Net</a></li>
   <li class="active"><a href="#">Java</a></li>
   <li><a href="#">PHP</a></li>
 </ul>

5.2 下拉菜单

1、使用一个类名为dropdown 或btn-group的div 包裹整个下拉框:

   <div class="dropdown"></div>

2、默认向下dropdown，向上弹起加入 . dropup 即可
3、使用button作为父菜单，使用类名: dropdown-toggle 和自定义data-toggle属性

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button>

4、在button中 使用font 制作下拉箭头

5、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu
6、分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能
7、分组标题: li 添加类名 “dropdown-header” 来实现分组的功能
8、对齐方式:
1)、dropdown-menu-left 左对齐 默认样式
2)、dropdown-menu-right 右对齐
9、激活状态（.active）和禁用状态（.disabled）

<div class="dropdown">
 <!-- 按钮 -->
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
	喜欢的频道  
	<!-- 下拉箭头的图标 -->
	<span class="caret"></span>
</button>
<!-- 下拉菜单列表 -->
<ul class="dropdown-menu">
	<li class="dropdown-header">——综艺——</li>
	<li><a href="#">乘风破浪的姐姐们</a></li>
	<li><a href="#">奇葩说</a></li>
	<li><a href="#">中国有嘻哈</a></li>
	<li class="divider"></li>
	<li class="dropdown-header">——电影——</li>
	<li><a href="#">姜子牙</a></li>
	<li><a href="#">肖生克的救赎</a></li>
	<li><a href="#">杀手不太冷</a></li>
</ul>
</div>