Bootstrap3 行内文本样式

行内文本

行内文本主要包括打标记的文本、被删除的文本、不再准确的文本、插入的文本、带下划线的文本、小号文本、粗体文本、斜体文本,Bootstrap 会为这些文本添加特殊的样式。

1.打标记的文本

HTML中的 <mark> 标签用来为文本打上标记,通常是在文本中高亮显示某个或某几个字符,旨在引起用户的特别注意。如:

 
  1. <p>
  2.   You can use the mark tag to <mark>highlight</mark> text.
  3. </p>

Bootstrap 会为 <mark> 标签标记的文本添加一个 #fcf8e3 的背景颜色。效果如图 2‑14所示:

高亮显示的文本

图2-14 高亮显示的文本

2.被删除的文本

HTML中的 <del> 标签用来标记已经从文档中删除的文本。如:

 
  1. <p>
  2.   <del>This line of text is meant to be treated as deleted text.</del>
  3. </p>

Bootstrap 会为 <del> 标签标记的文本添加一条删除线。效果如图 2‑15所示:

被删除的文本

图2-15 被删除的文本

3.不再准确的文本

HTML中的 <s> 标签用来标记不再准确或不再相关的文本。如:

 
  1. <p>
  2.   <s>This line of text is meant to be treated as no longer accurate.</s>
  3. </p>

Bootstrap 也会为 <s> 标签标记的文本添加一条删除线。效果如图 2‑16所示:

不再准确的文本

图2-16 不再准确的文本

4.插入的文本

HTML中的 <ins> 标签用来标记向文档中额外插入的文本。如:

 
  1. <p>
  2.   <ins>This line of text is meant to be treated as an addition to the document.</ins>
  3. </p>

Bootstrap 会为 <ins> 标签标记的文本添加一条下划线。效果如图 2‑17所示:

插入的文本

图2-17 插入的文本

5.带下划线的文本

HTML中的 <u> 标签用来标记添加非文本注解的文本。如:

 
  1. <p>
  2.   <u>This line of text will render as underlined</u>
  3. </p>

Bootstrap 也会为 <u> 标签标记的文本添加一条下划线。效果如图 2‑18所示:

带下划线的文本

图2-18 带下划线的文本

6.小号文本

HTML中的 <small>标签用来标记不需要强调的文本,对于不需要强调的inline或block类型的文本,建议包裹在 <small>标签中。标题元素中嵌套的<small>元素被设置不同的font-size。你还可以为行内元素赋予.small类,以代替任何<small>元素。如:

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

Bootstrap 将 <small> 标签标记的文本缩小到原来字体大小的 85% 显示。效果如图 2‑19所示:

小号文本

图2-19 小号文本

7.粗体文本

HTML中的 <strong> 标签用来标记从语义上强调的文本。如:

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

Bootstrap 将 <strong> 标签标记的文本加粗显示,即给文本应用 font-weight:bold; 样式。效果如图 2‑20所示:

强调内容加粗显示

图2-20 强调内容加粗显示

8.斜体文本

HTML中的 <em> 标签用来标记从语义上强调的文本,它们一般会被渲染为斜体。如:

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

Bootstrap 将 <em> 标签标记的文本以斜体显示,即给文本应用 font-style: italic; 样式。效果如图 2‑21所示:

强调内容斜体显示

图2-21 强调内容斜体显示

说明:

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

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

关于作者

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

猜你喜欢

转载自blog.csdn.net/ixygj197875/article/details/89784633