在这一张中我们讲解一下Bootsrap的字符,我们只需根据 Bootstrap 规范来设置字符,即可实现漂亮的排版。我不必担心如何分隔字符,这非常有帮助。
标题
在本章中,我们将从排版中学习。首先,关于标题。使用 <h1> 到 <h6> 标签来创建标题。CSS 是为这些“h 标签”中的每一个准备的。让我们看看使用 Bootstrap 的 h 标签文本是什么样子的。
顶部是正文等的 p 标签。你可以看到 h 标签比 p 标签更厚更大。最右边的项目是每个字符大小规范的 CSS。这是 Bootstrap 提供的 CSS。
“rem”是单位之一。这将默认字体大小视为“1”。Bootstrap 中的默认字体大小是 16px。因此,例如,“2rem”是“32px”。
展示
“display”是一个 CSS 类。当你想让标题比前面的 h 标签更突出时,可以使用它。写入“显示”,后跟一个连字符和一个从 1 到 4 的数字。让我们看看它的样子。
这样就是使用span标签等来写的。当然,你也可以使用 h 标签,但请注意,CSS 类“display”的字体大小优先于 h1 到 h6 标签的字体大小。
字母装饰
让我们从了解 CSS 类“lead”开始。这是应用于 p 标签的类。假设有一个句子,当你在写一个带有 p 标签的句子时,你想让它脱颖而出。在这种情况下,用写“lead”类的 p 标签附上一个句子。让我们看看它长什么样。
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
装饰
Bootstrap 提供了多个用于文本装饰的标签。下面是一个例子。您可以使用 strong,small,mark等 标记将其加粗,并使用 mark 标记突出显示文本。可以在 Bootstrap 官方网站(https://getbootstrap.com/)的“内容”列“排版”中的“内联文本元素”项中找到此类装饰标签的列表。
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
bootstrap的官方网站:
https://getbootstrap.com/docs/5.3/content/typography/#lead