Bootstrap-排版

排版（标题、页面主题、强调、缩略语、地址、引用、列表）

by JSDavi

HTML

<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<ul class="breadcrumb">
    <li> <a href="#">排版（标题、页面主题、强调、缩略语、地址、引用、列表）</a>            
    </li>
</ul>

<h1>h1. Bootstrap heading <small>//Small text</small></h1>
<h2>h2. Bootstrap heading <small>//Small text</small></h2>
<h3>h3. Bootstrap heading <i>//italicized</i></h3>
<h4>h4. Bootstrap heading <b>//b text</b></h4>
<h5>h5. Bootstrap heading <strong>//rendered as bold text</strong></h5>
<h6>h6. Bootstrap heading <em>//rendered italicized em斜体没效果</em></h6>

<span>
    <p class="lead">有时以下“强调”text方法不能有效显示，请把它放到span中</p>
    <p class="text-muted text-left">Left aligned text.</p>
    <p class="text-primary text-center">Center aligned text.</p>
    <p class="text-success text-right">Right aligned text.</p>
    <p class="text-info">text-info</p>
    <p class="text-warning">text-warning</p>
    <p class="text-danger">text-danger</p>
</span>

<abbr title="title为全写">attr 缩写 </abbr>
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

<address>
    <br>
        <strong>Twitter, Inc.</strong></br>
    795 Folsom Ave, Suite 600<br>
    San Francisco, CA 94107</br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
  <strong>Full Name</strong><br>
    <a href="mailto:#">[email protected]</a></br>
</address>
//引用
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>