Bootstrap 3网格在html中的较少vs

Question

实现bootstrap 3网格的最佳实践是什么？有两种选择,通过html中的类和通过较少的mixins.

在html和bootstrap.css中使用bootstrap类(这似乎是标准的):

<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>

使用LESS和bootstrap mixins以及适当的html结构:

<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>

和相应的LESS:

#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);
            }
         }
      }
   }
}

让一个.LESS文件简单地使用bootstrap mixins来定义结构听起来是个不错的主意,但这实际上并不是在LESS中已经定义的less文件中重复元素结构.哪一个更易于维护？

Answer 1

我个人认为使用Bootstrap的类会给你一个可维护的结构.否则你可能更喜欢更语义的解决方案.请注意,您认为适当的html结构在我看来没有附加值,并且不是语义.

以更加语义的方式使用和实现Bootstrap并不总是那么容易:

网格必须解决的问题示例:如何在Bootstrap 3中使用语义标记创建多个行？.另外Twitter的Bootstrap 3.x语义移动网格尤其要注意@Gravy的答案(/sf/answers/1306756881/).

同样有趣的是:如何使用sass来正确避免在HTML上嵌入twitter bootstrap类名