Question

使用引导框架时，内容放在容器，行和列中。我的问题解决了如何将bootstrap div / container模型与HTML5元素混合，例如：

<header> 
<main>
<footer>

根据我对使用Bootstrap内容的理解似乎是这样设置的：

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

随后：

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

创建网格/布局。

我的问题是你是否应该在Bootstrap使用的容器/行设置的外部或内部包装带有类/ ID的HTML5元素或DIV，如下所示：

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

或者：

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

或者最后：

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

是否有使用Bootstrap使用类，ID（如页眉，页脚等）对HTML5元素或DIV进行排序的最佳做法？

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

Answer 1

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

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

等等。

标题元素现在用作一行，然后可以使用元素标记设置样式。

（未针对所有不同浏览器和设备中的错误/故障进行测试），Bootstrap的示例基于all-div布局。

Answer 2

我最好的解释方式就是：

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

容器有点像圣诞节礼物盒上的包装纸（当然，如果你庆祝圣诞节）。该行仍然在容器内，但它会将您的内容缩小到更远的范围（因此在类比中：它不是内容，但它不是包装纸，所以它是盒子）。实际内容可能会使用<header>，<main>或<footer>之类的内容，因此实际内容位于<header>标记中，因此它会浮动到顶部，因此为了完成我们的类比，<header>是盒子内部的实际存在，它本身被包装纸包围。

我希望这会有所帮助，而且我知道它肯定在12月附近。对我来说，上面的顺序和推理最有意义（有时候“包装纸”和“不完全包装纸”可能会混淆一些XD）。

Bootstrap div嵌套HTML5元素

2 个答案: