如何使用 Bootstrap 搭建更合理的 HTML 結構

前言

Bootstrap 的成功不只在於其簡單易用，更在於其樣式的規範性以及 HTML 結構的合理性。可是不少人在使用 Bootstrap 時只是依照文檔盲目的複製黏貼，並無仔細考慮每一個類的用處，也沒有考慮 HTML 結構搭建的是否合理。在平時的工做中，我一直和同事強調，必定要挖掘框架的精髓，儘量的使用框架自己具備的類實現佈局，幾乎全部的 UI 佈局均可以使用框架自己完成而不須要編寫額外的冗餘的樣式。本文的目的就是介紹如何使用 Bootstrap 搭建經常使用的佈局，並保證佈局具備合理的 HTML 結構。不論是傳統開發，仍是使用框架，搭建佈局的思想是不會變的。本文全部案例均以 Bootstrap 3 爲例， Bootstrap 4 變化較大，但也基本適用，須要讀者仔細比對，不可盲目照抄。

合理利用柵格

保證合理嵌套

Bootstrap 柵格類的隨意嵌套是形成 HTML 結構混亂的主要緣由，雖然 Bootstrap 的柵格類在隨意嵌套時並不會出現嚴重問題，但會引起潛在的問題，對於細節控是沒法容忍的。好比下面的這種常見錯誤嵌套：

<div class="row">
  <div class="col-md-6">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="col-md-6">.col-md-6</div>
</div>

表面看並無大問題，可是若是將柵格描邊，就會看出不一樣，見下面的 CodePen：

See the Pen Bootstrap-demo by Zongbin (@nzbin) on CodePen.

咱們必須明白每一個 Bootstrap 柵格類的做用。其中 .row 和 .col-* 必需要搭配使用，缺一不可，由於 .row 是爲了抵消 .col-* 的 margin 負值，因此並非無關緊要的類。因此，上面例子的正確結構以下：

<div class="row">
  <div class="col-md-6">
    <div class="row">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
  </div>
  <div class="col-md-6">.col-md-6</div>
</div>

這是我工做過程當中見過的最多的一種錯誤，必須格外注意。

靈活利用柵格偏移

柵格的列偏移 .col-{breakpoint}-offset-* 應該也算是比較經常使用的佈局類，可是咱們每每忽視它在大塊版面佈局的做用。舉個例子，好比一個登陸框在右側的登陸頁面：

對於表單在右側的佈局，實現方式有不少，好比單獨使用 float 實現偏移，或者使用絕對/相對定位實現。可是更好的方式應該是使用柵格的列偏移實現，由於柵格支持響應式佈局。

如下是響應式登陸頁的例子：

See the Pen Bootstrap-demo by Zongbin (@nzbin) on CodePen.

建議在 CodePen 中打開查看效果，由於個人博客內容區較窄，因此只能看到響應式佈局的小屏斷點。

雖然柵格佈局很好，但在工做中必定要謹慎使用，由於不少不懂前端的設計師或產品會對前端人員吹毛求疵，這樣的話也只能根據具體要求作一些調整了。

水平表單排列

表單中的橫向柵格佈局很是常見，Bootstrap 官網也給出了案例，可是對於多列的橫向表單佈局會稍顯複雜，過多的柵格嵌套讓人抓狂。可是隻要記住一點，佈局就會遊刃有餘。

經過添加 .form-horizontal 類，表單就能夠橫向排布，此時的 .form-group 類就至關於  .row 類，二者的行爲是同樣的，因此此時無需再添加  .row 類。

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
...
</form>

注意，在 Bootstrap 4 中， .row 類不能省略，須要寫成這樣 .form-group row 才行。其實也沒有什麼區別，都是爲了造成 .row > .col-* > .row > .col-* 這種結構。

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
...
</form>

如下是 Bootstrap 3 橫向表單佈局的例子：

See the Pen Bootstrap-demo by Zongbin (@nzbin) on CodePen.

上面的例子比官網多了一層柵格，只有在大屏中才能看到效果，這種柵格內的表單嵌套在不熟悉 Bootstrap 的狀況下很容易寫亂，但只要記住了上面提到的規則，就能夠垂手可得的寫出來。

靜態表單排列

不少人在看到上面的結構時，幾乎二話不說，就寫出 ul>li 這樣的佈局，並且添加諸如 .list .item 這些無心義的類。依然是開篇提到的，咱們必須始終堅持一個原則，儘量不要隨意添加樣式，而是探索框架自己具備的類，幾乎均可以找到解決方法。

仔細想一想，上面的例子中的佈局方式無非就是柵格內的行內表單。因此實現方法很是簡單，徹底不用本身編寫樣式。

如下是實時演示，建議在大屏查看效果：

See the Pen Bootstrap-demo by Zongbin (@nzbin) on CodePen.

表格結構

關於表格能夠說的並很少，只是建議所有采用響應式表格結構，也就是添加 .table-responsive 元素。由於在實際工做中，表格的列數通常比較多，響應式表格應該是更通用的方案。

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

先排列，再排行

這條規則只是建議，由於 HTML 的塊級元素默認是佔一行，因此先排列能夠減小 HTML 的結構，使結構更簡潔。另外一方面，對於高度不一樣的元素，哪怕是很小的差距，都會出現佈局的錯位，見下面的 CodePen：

See the Pen Bootstrap-demo by Zongbin (@nzbin) on CodePen.

爲了解決這個問題，必須在每一行都添加 .row 。不過在某些時候，咱們也不得不這樣寫。

<div class="row">
  <div class="col-xs-6">
  ...
  </div>
  <div class="col-xs-6">
  ...
  </div>
</div>
<div class="row">
  <div class="col-xs-6">
  ...
  </div>
  <div class="col-xs-6">
  ...
  </div>
</div>
...

若是是先排列，就不用擔憂上面的問題，這種排列方式有點像瀑布流。

<div class="row">
  <div class="col-xs-6">
  ...
  ...
  </div>
  <div class="col-xs-6">
  ...
  ...
  </div>
</div>

這條建議須要根據實際的需求調整，須要和設計師以及產品作好溝通，否則確定面臨返工的危險。只能說從結構上而言，先排列會好一些。假如使用 Flex  佈局的話，就能夠很好地解決這個問題了。

總結

先說點題外話，我一直以爲優秀的網頁做品不是或者不全是設計師決定的，甚至不該該由設計師決定，由於國內的設計師真正懂前端的仍是少數，並且設計風格難以緊跟潮流。設計師和產品常常將交互掛在嘴邊，可是他們提出的不少交互形式在咱們前端人員看來都是網頁必備的基本要素，並非一個亮點。反觀國外，設計師懂前端甚至很精通，前端開發者也是設計師或者交互設計師，每一個人都是複合型人才，這是值得咱們學習的方面。

言歸正傳，本文主要介紹了在使用 Bootstrap 時如何搭建更合理的結構，然而在實際工做中，無論咱們用不用框架，都應該儘量的精簡併規範化 HTML 結構，這是前端開發人員應該養成的良好習慣。另外說明一點，由於框架是不少問題的抽象，因此在通用性的前提下，不可避免的會有一些冗餘的 HTML 結構。

我在開篇就強調儘可能不要編寫冗餘的樣式，可是若是真的不能知足佈局要求時，咱們首先應該使用 helper 解決，Bootstrap 3 的 helper 並不豐富，而 Bootstrap 4 則添加了大量的 helper 輔助類。我在以前也寫了一篇關於 helper 的文章《如何編寫通用的 Helper Class》，感興趣的話能夠看一看。