标题
<h1> 到 <h6> 均可使用。另外， .h1 到 .h6 类也可以使用
<div class="bs-example">
<!-- 直接使用标题标签 -->
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
<hr>
<!-- 使用样式 -->
<div class="h1">h1. Bootstrap heading</div>
<div class="h2">h2. Bootstrap heading</div>
<div class="h3">h3. Bootstrap heading</div>
<div class="h4">h4. Bootstrap heading</div>
<div class="h5">h5. Bootstrap heading</div>
<div class="h6">h6. Bootstrap heading</div>
</div>
01.PNG
副标题
可以在 h 标签中嵌套 <small> 标签，作为副标题
<!-- 直接使用标题标签 -->
<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>
<hr>
<!-- 使用样式 -->
<h1>h1. Bootstrap heading <span class="small">Secondary text</span></h1>
<h2>h2. Bootstrap heading <span class="small">Secondary text</span></h2>
<h3>h3. Bootstrap heading <span class="small">Secondary text</span></h3>
<h4>h4. Bootstrap heading <span class="small">Secondary text</span></h4>
<h5>h5. Bootstrap heading <span class="small">Secondary text</span></h5>
<h6>h6. Bootstrap heading <span class="small">Secondary text</span></h6>
02.PNG
页头
父元素用 page-header 类，内部嵌套标题和副标题
<div class="page-header">
<h1>Bootstrap <small>An intuitive front-end framework</small></h1>
</div>
03.PNG
段落
<p> 标签为一个段落，强调可以添加 .lead 样式
<p>This is how a normal paragraph looks like in Bootstrap.</p>
<p class="lead">This is how a paragraph stands out in Bootstrap.</p>
04.PNG
对齐
.text-left 相关的样式可以设置文本对齐方式
<p class="text-left">左对齐</p>
<p class="text-center">居中对齐</p>
<p class="text-right">右对齐</p>
<p class="text-justify">两端对齐。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam.</p>
<p class="text-nowrap">不设置对齐</p>
05.PNG
文本格式
常用的文本格式标签的可以使用
<p><b>加粗文本</b></p>
<p><big>大号文本</big></p>
<p><code>这是代码</code></p>
<p><em>这是强调文本</em></p>
<p><i>这是斜体文本</i></p>
<p><mark>这是高亮文本</mark></p>
<p><small>小号文本</small></p>
<p><strong>增强文本</strong></p>
<p>这是 <sub>上标</sub> 和 <sup>下标</sup></p>
<p><ins>带下划线文本</ins></p>
<p><del>带删除线的文本</del></p>
06.PNG
大小写转换
<p class="text-lowercase">The quick brown fox jumps over the lazy dog.</p>
<p class="text-uppercase">The quick brown fox jumps over the lazy dog.</p>
<p class="text-capitalize">The quick brown fox jumps over the lazy dog.</p>
07.PNG
情境文本颜色
<p class="text-muted">Muted: This text is grayed out.</p>
<p class="text-primary">Important: Please read the instructions carefully before proceeding.</p>
<p class="text-success">Success: Your message has been sent successfully.</p>
<p class="text-info">Note: You must agree with the terms and conditions to complete the sign up process.</p>
<p class="text-warning">Warning: There was a problem with your network connection.</p>
<p class="text-danger">Error: An error has been occurred while submitting your data.</p>
08.PNG
名人名言引用
使用 <blockquote> 标签，可以通过设置 .pull-right 类，变成右对齐
<!-- 正常引用 -->
<div class="bs-example">
<blockquote>
<p>The world is a dangerous place to live; not because of the people who are evil, but because of the people who don't do anything about it.</p>
<small>by <cite>Albert Einstein</cite></small>
</blockquote>
</div>
<hr>
<!-- 右对齐引用 -->
<div class="bs-example">
<blockquote class="pull-right">
<p>The world is a dangerous place to live; not because of the people who are evil, but because of the people who don't do anything about it.</p>
<small>by <cite>Albert Einstein</cite></small>
</blockquote>
</div>
09.PNG
