gpt4 book ai didi

css - 将 HTML5 标签与 Bootstrap 一起使用以获得更语义化的网站?

转载 作者:搜寻专家 更新时间:2023-10-31 08:17:19 25 4
gpt4 key购买 nike

看过Bootstrap Expo之一的来源网站 Tsaa Tea Shop我想知道他们所做的,在 BS 类之间添加语义 HTML5 标签,是否会给网站带来更好的语义值(value)?

考虑到他们使用 section element相当多,这可以被视为 HTML5 标签/元素与 BS 一起被接受和良好使用吗?

这里是一个简短的摘录:

<section class="about-us block">
<div class="container">
<div class="row">

<div class="col-md-8 text-center">
<h2 class="section-title">Welcome</h2>

<span class="fa fa-leaf"></span>
</div>

</div>
</div>
</section>

<section class="quote block">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>"We loved our relaxing time with great food and beverages..."</h2>
</div>
</div>
</div>
</section>

目前,我正在着手一个较小的元素,脑子里想着简单的单页布局。

遵循这种方法在考虑语义方面会有什么好处吗?

最佳答案

Bootstrap 默认是非语义的

Twitter Bootstrap 是市场上最非语义 的框架之一。如果您将诸如 containerform-controlcol-sm-2 之类的代码类放入您的代码类中,您就无法实现语义化。

但有时您并不想成为。您想要可读性、实用性和可维护性——这就是为什么它是为它而设计的,并且它在其中很出色。

HTML5 标签

是的,是的。我们拥有所有这些新的、性感的、有用的、多年需要的 HTML5 标签,例如:articlesectionnavmainheaderfooterdetails……但让我们面对现实 — 部分 几乎和与往常一样div

Semantic section 几乎为零。天哪 - 这是一个带有 display:block 的标签,被称为“section”。它最大的(也许是唯一的)优势是提高了可读性,而不是语义。这就足够了。

为什么还要使用新的 HTML 标签

因为:

  1. 更具可读性。
  2. 更容易调试。
  3. 它更现代。
  4. 它更有意义、更重要。

因此,如果您面临决定——使用或不使用 HTML5 标签,请做任何事情,但不要继续这个div-cancer-that-is-the-web -内置

…即使是新标签的缩小版本也更具可读性:

<article><section></section><section></section><aside></aside></article>
<div><div></div><div></div><div></div></div>

关于css - 将 HTML5 标签与 Bootstrap 一起使用以获得更语义化的网站?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30088490/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com