Bootstrap 4中的.h1 .h2 .h3 .h4 .h5 .h6类[关闭]答案

【问题标题】：.h1 .h2 .h3 .h4 .h5 .h6 classes in Bootstrap 4 [closed]Bootstrap 4中的.h1 .h2 .h3 .h4 .h5 .h6类[关闭]
【发布时间】：2020-07-02 02:11:30
【问题描述】：

对文本段落使用.h1 .h2 .h3 .h4 .h5 .h6 Bootstrap 类是一种好习惯吗？（不是标题）。

例如：

<h1>THIS IS A TITLE</h1>
<p class="h5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<h2>THIS IS A SUB TITLE</h2>
<p class="h6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

如果这不是正确的方法，我如何使用 Bootstrap 使用不同的字体大小？（不是标题）

【问题讨论】：

标签： css bootstrap-4 font-size

【解决方案1】：

正如 Jakub 从引导文档中提到的：

.h1 到 .h6 类也可用，当您想要匹配标题的字体样式但不能使用关联的 HTML 元素时。

另外，好好想想SEO，这里有一些好的做法：

标题标签对在 Google 中的排名有一些影响

坚持页面上的一个“H1”，并将其余的文本标题设为“H2”、“H3”。保持标题顺序

现在您想让一个元素的大小与 h1、h2 或 h3 相同。例如，您希望 <span> 元素的大小与 h1 相同，但又不想违反 Stick to one H1 on the page 使用类的规则。

另一个示例，您正在按顺序添加标题组并且您想打破该顺序，然后您使用一个类。

【讨论】：

【解决方案2】：

根据 Bootstrap Docs，您可以这样做。

https://getbootstrap.com/docs/4.5/content/typography/#headings

.h1 到 .h6 类也可用，当您想匹配标题的字体样式但不能使用关联的 HTML 元素时。

如果您不想使用<p> 标签，您可以随时使用<div class="h1">。

您始终可以使用 CSS 设置自己的尺寸。

例如：

.myClass{
    font-size:2rem;
    font-weight:700;
    line-height:1.5;
    margin-bottom:1rem;
}

【讨论】：

【解决方案3】：

在 Bootstrap 4.5.0 中，您可以使用显示类来更改所需输出的字体大小。

<h1 class="display-1"> Hello World </h1>
<h1 class="display-2"> Hello World </h1>
<h1 class="display-3"> Hello World </h1>
<h1 class="display-4"> Hello World </h1>
<h1 class="display-5"> Hello World </h1>

您可以尝试其中任何一种，有关更多信息，请访问 Bootstrap Docs > Typography https://getbootstrap.com/docs/4.0/content/typography/

【讨论】：

【解决方案4】：

这是好的做法吗？ 没有。 这是不好的做法吗？ 没有。

如果你想开发一个符合 W3 规范的网页，一个好的做法是正确使用标题标签。

您提到的 Bootstrap 类只是帮助您设置元素样式以使其看起来更好的类。

使用说明

用户代理可以使用标题信息，例如，自动为文档构建目录。

避免使用标题标签来调整文本大小。相反，使用 CSS font-size 属性。标题使用大小来表示它们的相对重要性，但 CSS 更适合通用调整大小。

避免跳过标题级别：总是从开始，下次使用等等。

您应该每页只使用一个。使用多个不会导致错误，但仅使用一个被视为最佳实践。它具有逻辑意义——是最重要的标题，并告诉您整个页面的目的是什么。你不会有一本书有多个名字，或者一部电影有多个名字！可以说，对于屏幕阅读器用户和 SEO，拥有一个顶级标题也更好。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

【讨论】：