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>

</ol>

无序列表：

<ul>

</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

//表格

.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>