<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
对比下 不用Bootstrap是怎么样的
用了：
---------------------------页面主体-------------------------------------
页面主体
Bootstrap 将全局
font-size设置为 14px，line-height设置为 1.428。这些属性直接赋予<body>元素和所有段落元素。另外，<p>（段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
<div class="container-fluid"> <p>这是一个段落哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p> <p>这是另一个段落哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p> </div>
段落之间有了一个分隔
中心内容
通过添加
.lead类可以让段落突出显示
<div class="container-fluid"> <p class="lead">这是一个段落哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p> <p>这是另一个段落哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p> </div>
（虽然我觉得变淡了反而不是突出显示了）
Marked text
For highlighting a run of text due to its relevance in another context, use the
<mark>tag.You can use the mark tag to highlight text.
You can use the mark tag to <mark>highlight</mark> text.被删除的文本
对于被删除的文本使用
<del>标签。
This line of text is meant to be treated as deleted text.<del>This line of text is meant to be treated as deleted text.</del>无用文本
对于没用的文本使用
<s>标签。
This line of text is meant to be treated as no longer accurate.<s>This line of text is meant to be treated as no longer accurate.</s>插入文本
额外插入的文本使用
<ins>标签。This line of text is meant to be treated as an addition to the document.
<ins>This line of text is meant to be treated as an addition to the document.</ins>带下划线的文本
为文本添加下划线，使用
<u>标签。This line of text will render as underlined
<u>This line of text will render as underlined</u>利用 HTML 自带的表示强调意味的标签来为文本增添少量样式。
小号文本
对于不需要强调的inline或block类型的文本，使用
<small>标签包裹，其内的文本将被设置为父容器字体大小的 85%。标题元素中嵌套的<small>元素被设置不同的font-size。你还可以为行内元素赋予
.small类以代替任何<small>元素。This line of text is meant to be treated as fine print.
<small>This line of text is meant to be treated as fine print.</small>着重
通过增加 font-weight 值强调一段文本。
The following snippet of text is rendered as bold text.
<strong>rendered as bold text</strong>斜体
用斜体强调一段文本。
The following snippet of text is rendered as italicized text.
<em>rendered as italicized text</em>
这些是一些更新过外观的样式
<p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> <p class="text-justify">Justified text.</p> <p class="text-nowrap">No wrap text.</p>
<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">Capitalized text.</p>
<p>这是一个<abbr title="段落就是P拉~">段落</abbr></p>
引用
在你的文档中引用其他来源的内容。
默认样式的引用
将任何 HTML 元素包裹在
<blockquote>中即可表现为引用样式。对于直接引用，我们建议用<p>标签。
<blockquote> <p>这是一段引用的文字</p> </blockquote>
然后是一段有序列表和无序列表的基础，不列出来了
无样式列表
移除了默认的
list-style样式和左侧外边距的一组元素（只针对直接子元素）。这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。
<ul class="list-unstyled"> <li>元素1</li> <li>元素2</li> <li>元素3</li> <li>元素4</li> <li> <ul> <li>元素1</li> <li>元素2</li> <li>元素3</li> </ul> </li> </ul>
显示：
内联列表
通过设置
display: inline-block;并添加少量的内补（padding），将所有元素放置于同一行。
<ul class="list-inline"> <li>元素1</li> <li>元素2</li> <li>元素3</li> <li>元素4</li> <li> <ul> <li>元素1</li> <li>元素2</li> <li>元素3</li> </ul> </li> </ul>
效果：
水平排列的描述
.dl-horizontal可以让<dl>内的短语及其描述排在一行。开始是像<dl>的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。
<dl class="dl-horizontal"> <dt>这是要介绍的人</dt> <dd>这个人很牛批</dd> <dt>这是某某开</dt> <dd>没有开挂！</dd> </dl>
效果：
(其实我也不知道为什么我要复制粘贴(感觉好敷衍劣质（人类的本质）
-----------------到表格辣~-------------------------------------
表格
基本实例
为任意
<table>标签添加.table类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。
<table class="table"> <tr> <th>列1</th> <th>列2</th> <th>列3</th> </tr> <tr> <td>项1</td> <td>项2</td> <td>项3</td> </tr> <tr> <td>项1</td> <td>项2</td> <td>项3</td> </tr> </table>
不加之前：
加了后：
好像占了100%的父容器宽(
条纹状表格
通过
.table-striped类可以给<tbody>之内的每一行增加斑马条纹样式。
效果：
带边框的表格
添加
.table-bordered类为表格和其中的每个单元格增加边框。
效果：
鼠标悬停
通过添加
.table-hover类可以让<tbody>中的每一行对鼠标悬停状态作出响应。
就是会变色=。=：
鼠标这时候☞在第二行 白变灰了
紧缩表格
通过添加
.table-condensed类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
效果：行高看起来小了
状态类
通过这些状态类可以为行或单元格设置颜色。
<table class="table table-striped table-bordered table-hover table-condensed"> <tr class="danger"> <th>列1</th> <th>列2</th> <th>列3</th> </tr> <tr> <td class="success">项1</td> <td>项2</td> <td>项3</td> </tr> <tr class="warning"> <td>项1</td> <td>项2</td> <td>项3</td> </tr> </table>
效果：FBI Warning！
响应式表格
将任何
.table元素包裹在.table-responsive元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
<div class="container table-responsive"> <table class="table table-striped table-bordered table-hover table-condensed"> <tr class="danger"> <th>列1</th> <th>列2</th> <th>列3</th> </tr> <tr> <td class="success">项1</td> <td>项2</td> <td>项3</td> </tr> <tr class="warning"> <td>项1</td> <td>项2</td> <td>项3</td> </tr> </table> </div>
反正我没看懂（
本节结束