HTML5 & Bootstrap class="container", 可以应用于body还是只应用于div？

Question

我一直碰到这个问题，每个人都保持： a) 想要用 divs 包装 HTML5 语义标签，并且 b) 想要将 class 选择器应用于 div 而不是语义标签。就好像人们出于某种原因害怕将 classes 添加到语义标签上。

例如，我经常被告知这是 "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 标签

中有列 class

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

但是 "the correct" 方法是添加另一个 div 标签来应用 class,

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

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

Answer 1

我建议坚持

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

格式。

如果您打算与许多其他开发人员或 bootstrap 模板一起工作-您会看到容器 classes 通常嵌套行 class divs.

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

为了一致性
为了轻松更改样式和与其他项目的可重用性 - 这甚至打开了直接替换其他项目或 bootstrap 模板的 css 样式表的大门。（我用这个取得了一些令人惊讶的好结果）。

但是，如果您坚持要提供非 div 标签 "container" 和 "col-X" 标签，请保持一致。不过，我不会推荐它，并且会将任何遵循其自身约定的模板视为代码质量差的指标。

HTML5 & Bootstrap class="container", can it be applied to body or only div?