一.什么是Bootstrap？
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。——《百度百科》
1.Bootstrap：下载地址
2.准备工作
1.响应式布局：
<meta name="viewport" content="width=device-width,initial-scale=1">
3.引入jquery
<script src="js/jquery-1.12.4.min.js"></script>
2.引入文件：
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<script src="dist/js/bootstrap.min.js"></script>
准备工作
二.布局容器类样式：
1..container 和 .container-fluid
.container 固定宽度并且具有响应式。
<div class="container">
<h1> Bootstrap</h1>
<p>Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，
使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，
它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司
）的Breaking News都使用了该项目。[2] 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，
也是基于Bootstrap源码进行性能优化而来。</p>
</div>
样式结果
.container-fluid 自由宽度（100%宽度）
<div class="container-fluid">
<h1> Bootstrap</h1>
<p>Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，
使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，
它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司
）的Breaking News都使用了该项目。[2] 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，
也是基于Bootstrap源码进行性能优化而来。</p>
</div>
样式结果
2.标题样式.h1~.h6
<span class="h1">我是h1</span>
<span class="h2">我是h2</span>
<span class="h3">我是h1</span>
结果样式
3.文本对齐： .text-left .text-center .text-right .text-justify
.text-left 左对齐
.text-center 局中
.text-right 右对齐
.text-justify 两端对齐
<h1 class="text-left">Bootstrap</h1>
<h1 class="text-center">Bootstrap</h1>
<h1 class="text-right">Bootstrap</h1>
<h1 class="text-justify">Bootstrap</h1>
样式结果
4. 样式列表：.list-unstyled(无符号) .list-inline(行内块)
.list-unstyled(无符号)
<ul class="list-unstyled">
<li>Bootstrap</li>
<li>Bootstrap</li>
<li>Bootstrap</li>
<li>Bootstrap</li>
</ul>
结果演示
.list-inline(行内块)
<ul class="list-inline">
<li>Bootstrap</li>
<li>Bootstrap</li>
<li>Bootstrap</li>
<li>Bootstrap</li>
</ul>
结果演示
5.表格样式 .table .table-striped .table-bordered .table-hover .table-condensed
.table
<table class="table">
<tr>
<td>Bootstrap</td>
<td>Bootstrap</td>
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
<tr>
<td>Bootstrap</td>
<td>Bootstrap</td>
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
</table>
结果演示
.table-striped 渐变颜色
<table class="table table-striped" >
<tr>
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
<tr>
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
<tr>
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
<tr>
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
</table>
结果演示
.table-bordered 带边框的表格
<table class="table-bordered table " >
<tr>
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
<tr>
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
<tr>
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
</table>
结果演示
.table-hover 鼠标事件变色
<div class="container"><br>
<table class="table-hover table " >
<tr>
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
<tr>
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
<tr>
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
</table>
结果演示
.table-condensed 紧凑型
<table class="table-condensed table " >
<tr>
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
<tr>
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
<tr>
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
</table>
结果演示
6.行或单元格背景色 .active .success .info .warning .danger
.active 当前颜色
.success 成功颜色
.info 信息颜色
.warning 警告颜色
.danger 危险颜色
<table class=" table" >
<tr>
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr >
<tr class="active">
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr >
<tr class="success">
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
<tr class="info" >
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
<tr class="warning" >
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
<tr class="danger" >
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
</table>
结果演示
<div class="container">
<div class="table-responsive">
<table class=" table table-condensed" >
<tr>
<td>Bootstrap</td>
<td>Bootstrap</td>
............省略....................
</tr>
............省略....................
</table>
</div>
</div>
文集：Bootstrap学习笔记
