为什么要使用Bootstrap？
Bootstrap下载
Bootstrap环境搭建
Bootstrap全局样式
常用Bootstrap组件
响应式开发
JavaScript插件
Bootstrap实例精选
1， Bootstrap介绍
Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。
它是为实现快速开发Web应用程序而设计的一套前端工具包。
它支持响应式布局，并且在V3版本之后坚持移动设备优先。
2， 为什么要使用Bootstrap？在Bootstrap出现之前：
命名：重复、复杂、无意义（想个名字费劲）
样式：重复、冗余、不规范、不和谐
页面：错乱、不规范、不和谐
在使用Bootstrap之后： 各种命名都统一并且规范化。 页面风格统一，画面和谐。
3， Bootstrap下载官方地址：https://getbootstrap.com
中文地址：
我们使用V3版本的Bootstrap，我们下载的是用于生产环境的Bootstrap。
4， Bootstrap环境搭建目录结构：
bootstrap-3.3.7-dist/ ├── css // CSS文件 │ ├── bootstrap-theme.css // Bootstrap主题样式文件 │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css // 主题相关样式压缩文件 │ ├── bootstrap-theme.min.css.map │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css // 核心CSS样式压缩文件 │ └── bootstrap.min.css.map ├── fonts // 字体文件 │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ ├── glyphicons-halflings-regular.woff │ └── glyphicons-halflings-regular.woff2 └── js // JS文件 ├── bootstrap.js ├── bootstrap.min.js // 核心JS压缩文件 └── npm.js
处理依赖
由于Bootstrap的某些组件依赖于jQuery，所以请确保下载对应版本的jQuery文件，来保证Bootstrap相关组件运行正常。
5， Bootstrap全局样式排版、按钮、表格、表单、图片等我们常用的HTML元素，Bootstrap中都提供了全局样式。
我们只要在基本的HTML元素上通过设置class就能够应用上Bootstrap的样式，从而使我们的页面更美观和谐。
5.1 标题相关标题
<h1>一级标题36px</h1> <h2>二级标题30px</h2> <h3>三级标题24px</h3> <h4>四级标题18px</h4> <h5>五级标题14px</h5> <h6>六级标题12px</h6> <!--除了使用h标签，Bootstrap内置了相应的全局样式--> <!--内联标签应用标题样式--> <span>一级标题36px</span> <span>二级标题30px</span> <span>三级标题24px</span> <span>四级标题18px</span> <span>五级标题14px</span> <span>六级标题12px</span>副标题
<!--一级标题中嵌入小标题--> <h1>一级标题<small>小标题</small></h1> 5.2 文本对齐 <!--文本对齐--> <p>文本左对齐</p> <p>文本居中</p> <p>文本右对齐</p> 5.3 文本大小写 <!--大小写--> <p>Lowercased text.</p> <p>Uppercased text.</p> <p>Capitalized text.</p> 5.4 表格 Class 描述.table-striped 条纹状表格
.table-bordered 带边框的表格
.table-hover 鼠标悬停变色的表格
````.table-condensed 紧缩型表格
.table-responsive 响应式表格
5.5 状态类 Class` 描述
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
5.6 表单
内联表单
表单状态
带图标的表单
5.7 按钮 <a href="#" role="button">Link</a> <button type="submit">Button</button> <input type="button" value="Input"> <input type="submit" value="Submit">按钮样式
<!-- Standard button --> <button type="button">（默认样式）Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type="button">（首选项）Primary</button> <!-- Indicates a successful or positive action --> <button type="button">（成功）Success</button> <!-- Contextual button for informational alert messages --> <button type="button">（一般信息）Info</button> <!-- Indicates caution should be taken with this action --> <button type="button">（警告）Warning</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button">（危险）Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type="button">（链接）Link</button>