html - 更少与 html 中的 Bootstrap 3 网格

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 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 mixin 来定义结构听起来是个不错的主意，但这并不是在本质上复制 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