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并不总是那么容易：

网格必须解决的问题示例：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

Bootstrap 3网格在html中的较少vs

1 个答案: