设置Bootstrap容器,行,列时的正确格式是什么?

时间:2016-06-14 20:21:32

标签: html css twitter-bootstrap-3

我刚刚开始使用Bootstrap,我正试图围绕它。我理解行和列以及容器的工作原理。我只是不知道"语法"用于设置div。

我想做这样的事吗

<div class="container-fluid">
 <div class="row">
   <div class="col-xs-12">
      <div>Content Goes In Here</div> 
   </div>
 </div>
</div>

或者它会是这样的:

<div class="container-fluid">
 <div class="row col-xs-12">
    <div>Content Goes In Here</div> 
 </div>
</div>

或者它可能是我没有看到的另一种方式。我只想确保我为Bootstrap编写div的方式是正确的,并且我没有使用太多的DIV&#39>

我是否希望我的所有当前代码都是css free,如框架的Width,Height,Padding能够正常工作等?

让我知道某个方向。谢谢!

1 个答案:

答案 0 :(得分:0)

你的第一个例子肯定是正确的:

<div class="container-fluid">
 <div class="row">
   <div class="col-xs-12">
      <div>Content Goes In Here</div> 
   </div>
 </div>
</div>

当你刚开始时,它似乎有很多<div>个标签,但是我们试着不把它们都想象为<div>,而是将每个标记视为它们的类。例如,第一个是container-fluid,第二个是row,第三个是col-xs-12

作为一般的经验法则,内联样式越少越好,是的。每当你发现需要对宽度做任何事情或看起来应该由引导程序处理的东西时,它可能应该是你应该在引导程序中找到可以处理你想要做的事情的任何东西。

这是关于Bootstrap 3的更正式的教程:http://www.w3schools.com/bootstrap/