Skip to content
电脑工程师入门

电脑工程师入门

create tomorrow, create happiness

  • 实用软件教程
    • Excel
    • WordPress
    • Powerpoint
    • PowerApps
    • PowerAutomateDesk
  • 计算机语言入门
    • PHP
    • Bootstrap
    • JavaScript
    • Python
    • HTML
    • WordPress
  • 咨询
  • Home
  • Bootstrap
  • 第八章【超入门】Bootstrap的字符
  • HOME
  • Bootstrap
  • 第八章【超入门】Bootstrap的字符

第八章【超入门】Bootstrap的字符

Bootstrap

在这一张中我们讲解一下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

标签:Bootstrap

文章导航

❮ Previous Post: 第七章【超入门】Bootstrap的轮播
Next Post: 第九章 【超入门】Bootstrap的按钮 ❯

关联内容

Bootstrap
第一章【超入门】Bootstrap基本用法
Bootstrap
第二章【超入门】Bootstrap的基础
Bootstrap
第三章【超入门】理解Bootstrap 断点
Bootstrap
第四章【超入门】Bootstrap的布局
Bootstrap
第五章【超入门】Bootstrap导航
Bootstrap
第六章【超入门】Bootstrap表格

实用软件教程

  • Powerpoint
  • Excel
  • PowerAutomateDesk
  • Wordpress
  • Powerapps

编程语言入门

  • JavaScript
  • HTML
  • PHP
  • Python
  • Bootstrap

Copy right by flashyonder.com