Css 使用HTML5元素的引导div嵌套

使用引导框架时，内容被放置在容器、行和列中。我的问题涉及如何将引导div/容器模型与HTML5元素混合，例如：

<header> 
<main>
<footer>

据我所知，使用引导内容的方式如下：

<div class="container">
    <div class="row">

随后：

<div class="col-*-*">

创建网格/布局的步骤

我的问题是，您是否应该在Bootstrap使用的容器/行设置的外部或内部使用class/ID包装HTML5元素或DIV，如：

<div class="header">
    <div class="container">
        <div class="row">

或：

或者最后：

<div class="container">
    <div class="row">
        <div class="header">

使用类/ID（如页眉、页脚等）和引导程序对HTML5元素或div进行排序是否有最佳实践

---

PS：我知道我在代码示例中使用了所有div标记，而不是HTML5元素。我只是觉得这将有助于说明我的问题。

引导网格系统基于不限于任何特定元素的类。可以将div用作行或列，也可以用作任何其他HTML元素。如果我正确理解您希望使用HTML5元素，即为搜索引擎、屏幕阅读器等提供有价值的信息，您基本上可以这样做：

<div class="container">
    <header class="row">
        <main class="col-md-6"></main>
        <aside class="col-md-6"></aside>
    </header>
</div>

等等

header元素现在作为行使用，然后可以使用elements标记设置行的样式

---

（没有在所有不同的浏览器和设备中测试错误/故障），Bootstrap的示例基于所有div布局。

我最好的解释是：

<div class="container">
    <div class="row">
        <div class="header">

这个容器有点像圣诞节送给你的盒子上的包装纸（当然，如果你庆祝圣诞节的话）。行仍然在容器中，但它进一步缩小了内容的范围（因此在类比中：它不是内容，但不是包装纸，所以是盒子）。实际内容可能会使用类似于

、

或

的内容，因此，由于实际内容位于

标签中，它将浮在顶部，因此为了结束我们的类比，

是实际的礼物本身，在盒子内，盒子本身被包装纸包围

---

我希望这能有所帮助，我知道现在离十二月还远着呢。对我来说，上面的顺序和推理最有意义（有时“包装纸”和“不完全包装纸”可能会混淆某些XD）。

您需要的所有引导语义都在这里

<div class="container">
    <div class="row">
        <div class="header">