css - 带有 HTML5 元素的 Bootstrap div 嵌套

Question

关闭。这个问题是opinion-based .它目前不接受答案。












想改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它.

5年前关闭。




Improve this question




使用 Bootstrap 框架时，内容被放置在容器、行和列中。我的问题涉及如何将 Bootstrap div/容器模型与 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 元素，即向搜索引擎、屏幕阅读器等提供有值(value)的信息，您基本上可以这样做:

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

等等。

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

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