Bootstrap 基础CSS - 排字（Typography） _HTML/CSS

Bootstrap 基础CSS - 排版（Typography）

强调（Emphasis）

使用.lead使段落突出。

<p class="lead">...</p>

用标签显示不重要的文字。

用标签显示重要的文字。

用标签使文字倾斜。

使用颜色来表达一定的含义。

<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

缩写（Abbreviations）

使用<abbr>标签表示缩写，title属性用于对缩写的详细表述。

希望缩写的字体稍微小些时可以添加.initialism。

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

地址（Addresses）

使用<address>标签表示地址，记得在每一行结束时添加 使得格式一致。

<address>
  <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:#">first.last@example.com</a>
</address>

引用（Blockquotes）

使用<blockquote>标签来包含引用的HTML，直接引用时推荐使用标签。

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

用标签来标识引用源。同时使用<cite>标签来包含引用源的名字。

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>

如果希望引用块在右侧排列，可以使用.pull-right。

列表（Lists）

无序列表（Unordered）

使用<ul>和<li>标签。

<ul>
  <li>...</li>
</ul>

有序列表（Ordered）

使用<ol>和<li>标签。

<ol>
  <li>...</li>
</ol>

无样式（Unstyled）

向<ul>添加.unstyled。

<ul class="unstyled">
  <li>...</li>
</ul>

行内（Inline）

将所有列表项放在一行上。只需向<ul>添加.inline。

<ul class="inline">
  <li>...</li>
</ul>

描述（Description）

父项和相应描述的列表。

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

想将父项和描述水平放置的话，只需向<dl>添加.dl-horizontal。