65.9K
CodeProject 正在变化。 阅读更多。
Home

引导你的网页 3 - 制作文本

Peter Leow
starIconstarIconstarIconstarIconstarIcon

5.00/5 (4投票s)

2016年3月3日

CPOL

3分钟阅读

viewsIcon

12262

使用 Bootstrap 制作上下文相关、高效且不同的文本内容。

 

前言

接续上一篇 Bootstrap 您的网页 2 – 响应式布局 的内容。您已经掌握了 Bootstrap 的响应式、移动优先的栅格系统，现在是时候深入了解 Bootstrap 对网页内容的样式了。让我们从文本开始。

Bootstrap 的 HTML 排版

文本内容是任何网页内容中最基本但又不可或缺的部分。默认情况下，Bootstrap 会以 14px 的字体大小和 1.428 的行高在 `<body>` 部分和所有 `<p>` 元素中渲染普通文本。此外，每个 `<p>` 元素默认会有一个等于其计算行高一半（或 10px）的底部外边距。

 

请查看下方图 1 中的这两个网页，了解 Bootstrap 如何不同地样式化一些更常见的 HTML 排版元素——`<h1>` 到 `<h6>`、`<small>`、`<p>`、`<mark>`、`<abbr>`、`<blockquote>` 和 `<pre>`。

Figure 1: Bootstrap's Typography vs Default HTML's Typography
图 1：Bootstrap 的排版 vs 默认 HTML 的排版

您可以分别在线查看它们，网址是 Bootstrap 的排版 和 默认 HTML 的排版。除了是否存在 Bootstrap 框架和第一个标题的不同之外，这两个页面都包含相同的 HTML 排版元素和文本内容。您可以在 Bootstrap 的排版 和 默认 HTML 的排版 下载源代码。

尝试其他 HTML 排版元素，例如 `<code>`、`<kbd>`、`<ul>`、`<ol>` 和 `<dl>`，看看它们是如何被 Bootstrap 不同地样式化的。这项作为您的家庭作业。

Bootstrap 的排版类

Bootstrap 引入了自己的排版类，用于进一步样式化 HTML 中的文本内容。它们可以分为四类——上下文文本类、大小写类、文本对齐类 和 自定义样式类。让我们逐一介绍。

上下文文本类

上下文文本类通过上下文文本颜色和上下文背景颜色来传达含义。

  • 上下文文本颜色包括如下类：`.text-muted`、`.text-primary`、`.text-success`、`.text-info`、`.text-warning` 和 `.text-danger`，如以下代码所示，它将内容样式化，如图 2 所示。
    <h2>Bootstrap's Contextual Text</h2>
<code>.text-muted</code>
<p class="text-muted">Sorry, the service is temporarily not available.</p>
<code>.text-primary</code>
<p class="text-primary">You must agree to the terms and conditions.</p>
<code>.text-success</code>
<p class="text-success">You have successfully changed your password.</p>
<code>.text-info</code>
<p class="text-info">The next train is due to arrive in 5 minutes.</p>
<code>.text-warning</code>
<p class="text-warning">POLICE LINE DO NOT CROSS</p>
<code>.text-danger</code>
<p class="text-danger">You are entering a radioactive zone.</p>
    Figure 2: Bootstrap's Contextual Text
    图 2：Bootstrap 的上下文文本

    您可以 下载代码 并 在线查看网页。

  • 另一方面，上下文背景颜色包括如下类：`.bg-primary`、`.bg-success`、`bg-info`、`.bg-warning` 和 `.bg-danger`，如以下代码所示，它将内容样式化，如图 3 所示。
    <h2>Bootstrap's Contextual Background</h2>
<code>.bg-primary</code>
<p class="bg-primary">You must agree to the terms and conditions.</p>
<code>.bg-success</code>
<p class="bg-success">You have successfully changed your password.</p>
<code>.bg-info</code>
<p class="bg-info">The next train is due to arrive in 5 minutes.</p>
<code>.bg-warning</code>
<p class="bg-warning">POLICE LINE DO NOT CROSS</p>
<code>.bg-danger</code>
<p class="bg-danger">You are entering a radioactive zone.</p>
    Figure 3: Bootstrap's Contextual Background
    图 3：Bootstrap 的上下文背景

    您可以 下载代码 并 在线查看网页。

大小写类

大小写类包括 `.text-lowercase`、`.text-uppercase` 和 `.text-capitalize`，它们分别将文本转换为全小写、全大写和每个单词的首字母大写，如以下代码所示，它将内容样式化，如图 4 所示。

<h2>Bootstrap's Capitalization</h2>
<code>.text-lowercase</code>
<p class="text-lowercase">HTML ELEMENTS SHOULD BE WRITTEN IN LOWERCASE</p>
<code>.text-uppercase</code>
<p class="text-uppercase">police line do not cross</p>
<code>.text-capitalize</code>
<p class="text-capitalize">peter leow</p>
Figure 4: Bootstrap's Capitalization
图 4：Bootstrap 的大小写

您可以 下载代码 并 在线查看网页。

文本对齐类

文本对齐类包括 `.text-left`、`.text-center`、`.text-right`、`.text-justify` 和 `.text-nowrap`，如以下代码所示，它将文本对齐，如图 26 所示。

<h2>Bootstrap's Text Alignment Classes</h2>
<code>.text-left</code>
<p class="text-left" style="background-color:#CFF;margin-top:1%">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl risus, sollicitudin efficitur sapien a, dignissim pellentesque nibh. Curabitur nec mauris enim. Sed finibus posuere interdum. Sed sodales mi quam, quis ultricies felis aliquam non.</p>
<code>.text-center</code>
<p class="text-center" style="background-color:#9FC;margin-top:1%">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl risus, sollicitudin efficitur sapien a, dignissim pellentesque nibh. Curabitur nec mauris enim. Sed finibus posuere interdum. Sed sodales mi quam, quis ultricies felis aliquam non.</p>
<code>.text-right</code>
<p class="text-right" style="background-color:#CFF;margin-top:1%">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl risus, sollicitudin efficitur sapien a, dignissim pellentesque nibh. Curabitur nec mauris enim. Sed finibus posuere interdum. Sed sodales mi quam, quis ultricies felis aliquam non.</p>
<code>.text-justify</code>
<p class="text-justify" style="background-color:#9FC;margin-top:1%">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl risus, sollicitudin efficitur sapien a, dignissim pellentesque nibh. Curabitur nec mauris enim. Sed finibus posuere interdum. Sed sodales mi quam, quis ultricies felis aliquam non.</p>
<code>.text-nowrap</code>
<p class="text-nowrap" style="background-color:#CFF;margin-top:1%">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl risus, sollicitudin efficitur sapien a, dignissim pellentesque nibh. Curabitur nec mauris enim. Sed finibus posuere interdum. Sed sodales mi quam, quis ultricies felis aliquam non.</p>
Figure 5: Bootstrap's Text Alignment
图 5：Bootstrap 的文本对齐

您可以 下载代码 并 在线查看网页。

自定义样式类

Bootstrap 提供了更多排版类，如表 1 所示，用于进一步样式化 HTML 排版元素。

表 1：Bootstrap 的自定义样式类
类 解释
.dl-horizontal 当浏览器窗口展开时，将描述列表 `<dl>` 中每个术语 `<dt>` 及其描述 `<dd>` 的位置从默认的垂直堆叠更改为水平并排。

 
.initialism 为 `<abbr>` 的内容设置较小的字体大小。

 

initialism
.lead 使 `<p>` 的内容脱颖而出。

 

lead
.list-inline 将列表项水平并排排列，而不是默认的垂直排列。

 
.list-unstyled 删除直接列表项的项目符号和左边距。

 

list-unstyled
.small 使 `<p>` 的内容变小。

 

small

下一部分

在用 Bootstrap 制作了您的文本内容后，我们将在下一期看看 Bootstrap 如何装饰 HTML 表格。下次见……

这篇文章 Bootstrap 您的网页 3 – 制作文本 最先发布于 Peter Leow's Code Blog。

© . All rights reserved.