一、Bootstarp是什么？
简单、灵活的用于搭建WEB页面的HTML、CSS、JS的工具集
（基于HTML5和CSS3）
总结：简洁强大的前端开发框架，可以让WEB开发更迅速、更简单
二、如何使用Bootstarp？（获取getbootstarp.com）
Bottstarp分为2和3两个大方向版本
bootstarp2 兼容好，功能略弱
1、下载：
分别对应的是框架 、 源码 、 Sass
2、引入：
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified Javas cript -->
<s cript src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></s cript>
三、bootstrap包含了什么？
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff
注意：bootstarp中的JS插件依赖Jquery因此jQunery要在bootstarp先前引入 四、页面模版<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!--在IE运行最新的渲染模式-->
<meta name="viewport" content="width=device-width, initial-scale=1"><!--初始化移动浏览显示-->
<!--
viewport可以让开发者控制页面的大小和缩放
width=device-width让宽度等于设备的宽度
initial-scale=1 初始缩放比例 -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet"><!--载入bootstarp的样式-->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn‘t work if you view the page via file:// -->
<!--[if lt IE 9]>
<s cript src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></s cript>
<!--为使IE6、7、8版本（IE9以下版本）浏览器兼容-->
<s cript src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></s cript>
<!--为使IE6、7、8版本浏览器兼容css3样式-->
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap‘s Javas cript plugins) -->
<s cript src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></s cript>
<!-- 加入jquery -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- 加入bootstarp -->
<s cript src="js/bootstrap.min.js"></s cript>
</body>
</html>
五、全局样式
在制作Web页面时，前端人员都习惯为网站设置一个全局样式（reset.css）。
bootstarp也帮你预先写好（其中包含）
- 移除body的margin声明
- 设置body的背景色为白色
- 为排版设置了基本的字体、字号和行高
- 设置全局链接颜色，且当链接处于悬浮“:hover”状态时才会显示下划线样式
六、标题元素
依旧是H1到H6，但是Bootstarp对其进行了优化
为了让非标题元素和标题使用相同的样式，还特意定义了.h1~.h6六个类名。
七、副标题
bootstarp使用<small>标签来制作副标题<h1>Hello, world!<small>Hello, world!</small></h1>
small标签要嵌套在标题标签中，否则不生效
八、段落文本（正文）
依旧是<p>
九、强调内容
如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。
除此之外，Bootstrap还通过元素标签:<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
十三、对齐风格
在排版中离不开文本的对齐方式。在CSS中常常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格：
? 左对齐，取值left
? 居中对齐，取值center
? 右对齐，取值right
? 两端对齐，取值justify
为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：
? .text-left：左对齐
? .text-center：居中对齐
? .text-right：右对齐
? .text-justify：两端对齐
十四、列表
在HTML文档中，列表结构主要有三种：有序列表、无序列表和定义列表。具体使用的标签说明如下：
无序列表
<ul>
<li>…</li>
</ul>
有序列表
<ol>
<li>…</li>
</ol>
定义列表
<dl>
<dt>…</dt>
<dd>…</dd>
</dl>
Bootstrap根据平时的使用情形提供了六种形式的列表：
? 普通列表
? 有序列表
? 去点列表
? 内联列表
? 描述列表
? 水平描述列表
去点列表
类： .list-unstyled
定义列表
依旧是dl dt dd
内联列表：
通过添加类名“.list-inline”来实现内联列表
水平定义列表
水平定义列表就像内联列表一样，Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。
十五、代码
三种代码风格：
是显示代码的风格
1、使用<code></code>来显示单行内联代码
2、使用<pre></pre>来显示多行块代码
3、使用<kbd></kbd>来显示用户输入代码
在使用代码时，用户可以根据具体的需求来使用不同的类型：
1、<code>：一般是针对于单个单词或单个句子的代码
2、<pre>：一般是针对于多行代码（也就是成块的代码）
3、<kbd>:一般是表示用户要通过键盘输入的内容
，<pre>元素一般用于显示大块的代码，并保证原有格式不变。但有时候代码太多，而且不想让其占有太大的页面篇幅，就想控制代码块的大小。Bootstrap也考虑到这一点，你只需要在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。
十六、表格
表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格
Bootstrap为表格不同的样式风格提供了不同的类名，主要包括：
? .table：基础表格
? .table-striped：斑马线表格
? .table-bordered：带边框的表格
? .table-hover：鼠标悬停高亮的表格
? .table-condensed：紧凑型表格
? .table-responsive：响应式表格
表格行的类
Bootstrap还为表格的行元素<tr>提供了五种不同的类名
.active 表示当前表格的活动信息
.success 表示成功或正确的行为
.info 表示中立的信息或行为
.warning表示警告的
.danger 表示危险或错误
.table基础表格
通过添加类.table控制
.table-striped斑马线表格
实现这个效果通常要先添加 .table 和 .table-striped
.table bordered 带边框的表格
.table-hover 鼠标悬停高亮的表格
.table-condensed 紧凑表格
.table-responsive 相应表格
十七、表单
表单是Bootstrap框架中的核心内容
水平表单
Bootstrap框架默认的表单是垂直显示风格，但很多时候我们需要的水平表单风格（标签居左，表单控件居右）
1、在<form>元素是使用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统。
内联表单
表单的控件都在一行内显示，在<form>元素中添加类名“form-inline”
输入框input
在Bootstrap中使用input时也必须添加type类型，如果没有指定type类型，将无法得到正确的样式，因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型，比如说text类型，对应的是input[type=“text”])的形式来定义样式的。
为了让控件在各种表单风格中样式不出错，需要添加类名“form-control”
下拉菜单select
Bootstrap框架中的下拉选择框使用和原始的一致，多行选择设置multiple属性的值为multiple
文本域textarea
文本域和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。
复选框checkbox和单选按钮radio
1、不管是checkbox还是radio都使用label包起来了
2、checkbox连同label标签放置在一个名为“.checkbox”的容器内
3、radio连同label标签放置在一个名为“.radio”的容器内
为了布局的需要，将复选框和单选按钮需要水平排列。
1、如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”
2、如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”
按钮
按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现：
? input[type=“submit”]
? input[type=“button”]
? input[type=“reset”]
? <button>
在Bootstrap框架中的按钮都是采用<button>来实现。
表单控件大小
可以通过设置控件的height，line-height，padding和font-size等属性来实现控件的高度设置。不过Bootstrap框架还提供了两个不同的类名，用来控制表单控件的高度。这两个类名是：
1、input-sm:让控件比正常大小更小
2、input-lg:让控件比正常大小更大
表单控件状态
表单状态的作用：
每一种状态都能给用户传递不同的信息，比如表单有焦点的状态可以告诉用户可以输入或选择东西，禁用状态可以告诉用户不可以输入或选择东西，还有就是表单控件验证状态，可以告诉用户的操作是否正确等。那么在Bootstrap框架中的表单控件也具备这些状态。
焦点状态是通过伪类“:focus”来实现。Bootstrap框架中表单控件的焦点状态删除了outline的默认样式，重新添加阴影效果。
焦点状态Bootstarp自动添加
表单控件状态(禁用状态)
Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的，在相应的表单控件上添加属性“disabled”。
只需要在需要禁用的表单控件上加上“disabled”
表单控件状态(验证状态)
在制作表单时，不免要做表单验证。同样也需要提供验证状态样式，在Bootstrap框架中同样提供这几种效果。
1、.has-warning:警告状态（黄色）
2、.has-error：错误状态（红色）
3、.has-success：成功状态（绿色）
使用的时候只需要在form-group容器上对应添加状态类名。
转载原文：http://www.zcool.com.cn/article/ZMTEzOTE2.html