Bootstrap 3网格格式与html格式的比较

实现Bootstrap3网格的最佳实践是什么？有两种选择，通过html中的类和较少的混合

在html和bootstrap.css中使用引导类（这似乎是标准的）：

<div class="container">
    <div class="row">
        <div class="column-md-6 column-xs-8">
            <p>test</p>
        </div>
        <div class="column-md-6 column-xs-4">
            <div class="row">
                <div class="column-md-8 column-xs-6">
                    <p>Another test</p>
                </div>
                <div class="column-md-4 column-xs-6">
                    <p>Yet another test</p>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="maincontent">
    <div id="maincontentarea">
       <div id="blogarticles">
          <p>test</p>
       </div>
       <div id="whatsnew">
          <div id="whatsnewarea">
             <div id="whatsnewheading">
                <p>Another test</p>
             <div>
             <div id="whatsnewlist">
               <p>Yet another test</p></div>
             <div>
          </div>
       </div>
    </div> 
 <div>

---

简单地使用引导程序mixin来定义结构，拥有一个.LESS文件听起来是个不错的主意，但这并不是本质上复制LESS文件中已经在LESS中定义的元素结构。哪一个更易于维护？

我个人认为使用Bootstrap的类将为您提供一个可维护的结构。否则，您可能更喜欢语义更丰富的解决方案。注意，在我看来，适当的html结构没有附加值，也不是语义的

以更具语义的方式使用和实现引导并不总是那么容易：

必须解决的网格问题示例：。还要特别注意@Gravy（）的答案

---

同样有趣的是：

您的第二块HTML有点奇怪。虽然乍一看似乎一个div-end标记太多（在另一个测试段落之后），但实际上开始标记比结束标记多。

#maincontent{
   .container();
   #maincontentarea{
      .make-row();
      #blogarticles{
         .make-md-column(6);
         .make-xs-column(8);
      }
      #whatsnew{
         .make-md-column(6);
         .make-xs-column(4);
         #whatsnewarea{
            .make-row();
            #whatsnewheading{
              .make-md-column(8);
            }
            #whatsnewlist{
              .make-xs-column(6);
            }
         }
      }
   }
}