01 排版
//标题
h1~h6 class属性对应h1~h6
//副标题 <small>标签
<h1>Bootstrap标题一<small>我是副标题</small></h1>
//强调内容 class属性对应lead
<p class="lead">这部分内容需要特别的强调，我和别人长得不一样</p>
//粗体 <strong>标签
<p>我在学习<strong>Bootstrap</strong>，我要掌握<strong>Bootstrap</strong>的所有知识。</p>
//斜体 <em> <i>
<p>我在慕课网上跟<em>大漠</em>一起学习<i>Bootstrap</i>的使用。我一定要学会<i>Bootstrap</i>。</p>
//加颜色强调内容 calss对应下面的值对应不同的颜色
.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）
//文本对齐方式 class对应下面的值
.text-left 左对齐
.text-center 居中对齐
.text-right 右对齐
.text-justify 两端对齐
//普通列表
有序列表:
<ol>
<li></li>
<li></li>
<li></li>
</ol>
无序列表：
<ul>
<li></li>
<li></li>
<li></li>
</ul>
//不带符号的无序列表 添加类名list-unstyled
<ul class="list-unstyled">
<li>不带项目符号</li>
<li>不带项目符号</li>
</ul>
//水平列表 添加类名list-inline 默认把无序列表的符号去掉
<ul class="list-inline">
<li>W3cplus</li>
<li>Blog</li>
<li>CSS3</li>
<li>jQuery</li>
<li>PHP</li>
</ul>
//定义列表 <dl> 是一个容器 <dt>是标题 <dd> 是内容
<dl>
<dt>W3cplus</dt>
<dd>一个致力于推广国内前端行业的技术博客</dd>
<dt>慕课网</dt>
<dd>一个真心在做教育的网站</dd>
</dl>
显示效果如下：
W3cplus
一个致力于推广国内前端行业的技术博客
慕课网
一个真心在做教育的网站
//水平定义列表 添加类名dl-horizontal 可以是列表水平显示
<dl class="dl-horizontal">
<dt>W3cplus</dt>
<dd>一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文</dd>
<dt>慕课网</dt>
<dd>一个专业的，真心实意在做培训的网站</dd>
</dl>
显示结果如下：
W3cplus 一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文
慕课网 一个专业的，真心实意在做培训的网站
//代码显示
<code> </code> 一般是针对于单个单词或单个句子的代码
<pre> </pre> 一般是针对于多行代码(也就是成块的代码)
<kbd> </kbd> 一般是表示用户要通过键盘输入的内容
//如果代码高度超出340px，就会在Y轴出现滚动条 添加类名pre-scrollable
<pre class="pre-scrollable">
<ol>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
</ol>
</pre>
//表格
.table 基础表格
.table-striped 斑马线表格
.table-bordered 带边框的表格
.table-hover 鼠标悬停高亮的表格
.table-condensed 紧凑型表格
.table-responsive 响应式表格
//tr颜色 对应的类名 取不同的颜色
//基础表格 table
作用如下：
给表格设置了margin-bottom:20px以及设置单元内距
在thead底部设置了一个2px的浅灰实线
每个单元格顶部设置了一个1px的浅灰实线
//斑马线表格 table table-striped
//带边框的表格 table table-bordered
//鼠标悬浮高亮 table table-striped table-bordered table-hover
//紧凑型表格 table table-condensed
//响应式表格 table-responsive
要为table加一个容器
效果：当你的浏览器可视区域小于768px时,表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>表格标题</th>
<th>表格标题</th>
<th>表格标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
</tbody>
</table>
</div>
