Question

有很多关于bootstrap元素的教程。

但我想知道我必须在哪里使用nav / header / container / row / well / panel / section

例如..它需要使用第12列的行吗？

1-目前我这样做：

<body>
<div class="container-fluid"> /*only for top navbar*/
    <nav>  
</div>

<div class="container"> /* for body */
    <header></header>

    <main class="row">
        <div class="col-md-2"></div>
        <div class="col-md-5"></div>
        <div class="col-md-5"></div>
   </main>

   <footer class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
   </footer>
</div>

</body>

是真的吗？

2-这种格式是真的还是必要的？

<div class="row">
   <div class="col-md-12"></div>
</div>

3-哪一个是标准的？

<div class ="well">
    <div class="row"> <div class="col-md-*"></div> </div>
</div>

或

<div class ="row">
    <div class="well"> <div class="col-md-*"></div>  </div>
</div>

4-剂量需要对所有部分使用“容器”类还是仅为父部分使用？

Answer 1

表示1： - 是的，这是一种正确的方法。每当你想在他们的第一个父级中使用像 col-xs-12 这样的引导列类时，你必须把类放在“行”中。

2： - 这是真的。方法也附件。

for 3： - 第一个选项是正确的。

for 4： - 取决于页面设计的需要。如果所有站点都在同一容器中，则可以将其放在父类中。

Answer 2

您提到的所有选项都是正确的。

然而，下面的书面结构是有道理的。这意味着如果您在col或container中使用container-fluid，则应该在row中。

  <div class="container">
       <div class="row">
            <div class="col-*-*">
            </div>
       </div>
   </div>

如果您想检查自举文件的编写情况，可以在http://www.bootlint.com/上查看

Answer 3

但我想知道我必须在哪里使用nav / header / section / footer

所有这些字段仅用于语义目的，实际上它们都可以是div。在未来甚至现在，搜索引擎优化的最佳做法是<{1}}用于导航，nav用于页脚等。例如footer应该用于介绍内容时，它通常包含header个标签。

网络上有很多信息，这里有一个reference

所有其他引导类只是您可以自己应用的样式。例如，如果您不需要全宽度元素，则<h1> - <h6>可以对您的所有内容使用一次，但有时您需要一个全宽度元素（图像）然后您不想换行所有内容都放入容器中。

Here you want to use multiple containers and not one for everything (Fiddle)

希望这对你有所帮助。

Bootstrap3：什么是标准结构和布局？

3 个答案: