如何使用 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

咱们必须明白每一个 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

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

上面的例子比官网多了一层栅格，只有在大屏中才能看到效果，这种栅格内的表单嵌套在不熟悉 Bootstrap 的状况下很容易写乱，但只要记住了上面提到的规则，就能够垂手可得的写出来。

静态表单排列

不少人在看到上面的结构时，几乎二话不说，就写出 ul>li 这样的布局，并且添加诸如 .list .item 这些无心义的类。依然是开篇提到的，咱们必须始终坚持一个原则，尽量不要随意添加样式，而是探索框架自己具备的类，几乎均可以找到解决方法。

仔细想一想，上面的例子中的布局方式无非就是栅格内的行内表单。因此实现方法很是简单，彻底不用本身编写样式。

如下是实时演示，建议在大屏查看效果：

See the Pen Bootstrap-demo

表格结构

关于表格能够说的并很少，只是建议所有采用响应式表格结构，也就是添加 .table-responsive 元素。由于在实际工做中，表格的列数通常比较多，响应式表格应该是更通用的方案。

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

先排列，再排行

这条规则只是建议，由于 HTML 的块级元素默认是占一行，因此先排列能够减小 HTML 的结构，使结构更简洁。另外一方面，对于高度不一样的元素，哪怕是很小的差距，都会出现布局的错位，见下面的 CodePen：

See the Pen Bootstrap-demo

为了解决这个问题，必须在每一行都添加 .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》，感兴趣的话能够看一看。