HTML5 和Bootstrap class="container"，可以应用到body还是只用div?

2022-01-24 00:00:00 class containers html css twitter-bootstrap

我一直碰到这个每个人都会遇到的问题:a) 想要用 div 包装 HTML5 语义标签，并且b) 希望将类选择器应用于 div 而不是语义标签.就好像人们出于某种原因害怕将类贴到语义标签上.

I keep bumping into this issue where everyone keeps: a) wanting to wrap HTML5 semantic tags with divs, and b) wants to apply class selectors to the divs and not the semantic tags. It's as if people are afraid of slapping classes onto semantic tags for some reason.

例如，我经常被告知这是不正确的"，

For example, I am constantly told that this is "incorrect",

<body class="container">
    <header class="row">
        <div class="col-md-12"> ...

这样的东西更可取，

<body>
   <div class="container">
      <div class="row">
          <div class="col-md-12"> ...

在这里，第一个示例我在 h2 标记中有列类

And here, where the first example I have the column class in the h2 tag 

    <div class="row">
        <h2 class="col-4 feature">Featured Work</h2>
    </div>

但正确"的方法是添加另一个 div 标签来应用该类，

But "the correct" way is to add yet another div tag to apply the class,

    <div class="row">
        <div class="col-4 feature">
            <h2>Featured Work</h2>
        </div>
    </div>

我知道这可能是基于意见的，但我发现在处理 HTML5 时，意见实际上很重要，因为几乎每个人都有问题，没有其他方法可以在没有意见的情况下敲定细节.

I understand that this might be opinion-based, but I have found that when dealing with HTML5, opinions actually matter since virtually everyone is having issues and there is no other way to hammer out the details without opinions.

推荐答案

我建议坚持

<body>
   <div class="container">
      <div class="row">
          <div class="col-md-12"> ...

格式.

如果您打算与许多其他开发人员或使用引导模板合作 - 您会看到 container 类通常嵌套 row 类 div.

If you intend to work with a lot other developers or with bootstrap templates- you will see that the container classes typically nest row class divs.

由于我们谈论的是标记，因此没有正确答案，但强烈建议遵循此约定.

Since we are talking about markup there is no right answer, but following this convention is strongly recommended.

  1. 为了一致性
  2. 为了轻松更改样式和与其他项目的可重用性——这甚至为从其他项目或引导模板中直接替换 CSS 样式表打开了大门.(我在这方面取得了一些令人惊讶的好结果).

但是，如果您坚持给非 div 标签容器"和col-X"标签，请保持一致.不过我不会推荐它，并且会认为任何遵循自己约定的模板都是代码质量差的指标.

However, if you insist on giving non-div tags "container" and "col-X" tags, be consistent. I wouldn't recommend it though and would consider any template that follows its own convention to be an indicator of poor code quality.

相关文章