html - Bootstrap 3 网格在 less 与在 html 中的比较

Question

实现 Bootstrap 3 网格的最佳实践是什么？有两种选择，通过 html 中的类和通过 less 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 mixin 以及适当的 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);
            }
         }
      }
   }
}

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

Answer 1

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

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

必须解决的网格问题示例:How can I create multiple rows using semantic markup in Bootstrap 3? 。另外Twitter's Bootstrap 3.x semantic mobile grid特别注意@Gravy(https://stackoverflow.com/a/18667955/1596547)的回答。

也很有趣:How to use sass to properly avoid embedding twitter bootstrap class names on HTML