Bootstrap2用户指南
3.1.3 强调
阅读(

Bootstrap基础

Bootstrap框架

Bootstrap基本样式

排版

正文

标题

强调

想要强调某个段落的文本,可以为它加上 class="lead" 让它突出显示,这会使段落文本稍稍变大、变粗,行高也被显著放大。如:

<p class="lead">Vivamus sagittis lacus vel augue ….</p>

效果如图 3‑3所示:

强调段落
图3-3 强调段落

HTML中的 <small> 标签用来标识不需要强调的文本,对于不需要强调的行内文本或块级文本,建议使用 <small> 标签。为文本添加这个标签后,文本会缩小到原来大小的 85%。如:

<p>
  <small>This line of text is meant to be treated as fine print.</small>
</p>

效果如图 3‑4所示:

强调内容
图3-4 强调内容

HTML中的 <strong> 标签用来标识从语义上强调的文本,它们一般会被加粗显示,即给相应文本应用 font-weight:bold;。如:

<p>
  The following snippet of text is <strong>rendered as bold text.</strong>
</p>

效果如图 3‑5所示:

强调内容加粗显示
图3-5 强调内容加粗显示

HTML中的 <em> 标签用来标识从语义上强调的文本,它们一般会被渲染为斜体,即给相应文本应用 font-style: italic;。如:

<p>
  The following snippet of text is <em>rendered as italicized text.</em>
</p>

效果如图 3‑6所示:

强调内容斜体显示
图3-6 强调内容斜体显示

说明:

有人可能要问,为什么不使用 <b> 或 <i>,而非要用 <strong> 和 <em> 呢?

在 HTML5 中,<b> 的语义是仅仅突出显示某些词或短语,但不代表它们更重要,比如一些关键词或人名。而 <i> 主要用于表示不同的语言、技术术语、内部对话等。

除了上述这些强调外,Bootstrap 还提供了一些表示强调的工具类,它们是给文本应用特殊的颜色来表示强调:

  • muted:提示,浅灰色
  • text-warning:警告,黄色
  • text-error:错误,红色
  • text-info:信息,浅蓝色
  • text-success:成功,浅绿色

这些工具类可以应用于 <p> 或 <span> 元素。如:

<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 … venenatis.</p>
<p class="text-success">Duis mollis, est non commodo … porttitor ligula.</p>

效果如图 3‑7所示:

强调工具类
图3-7 强调工具类

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验