较少与 html 中的 Bootstrap 3 网格答案

【问题标题】：Bootstrap 3 grid in less vs in html较少与 html 中的 Bootstrap 3 网格
【发布时间】：2013-12-31 17:41:01
【问题描述】：

实施 bootstrap 3 网格的最佳做法是什么？有两种选择，通过 html 中的类和通过更少的 mixins。

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

使用 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 文件中复制元素结构。哪个更易维护？

【问题讨论】：

您的第二个 HTML 块有点奇怪。虽然乍一看好像你有一个 div 结束标签太多（在又一个测试段落之后）你确实有更多的开始标签而不是结束标签。

标签： html twitter-bootstrap less twitter-bootstrap-3 grid-layout

【解决方案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

【讨论】：