「拥抱开源」这个假前端开发有点虎

上周，假装前端开发写了一个歪瓜裂枣的，让产品“裂开”的页面。

这周，觉得依靠 Bootstrap 的强大能力还能补救补救。。。

01 页面分析

上周的实现思路是：表格以上部分拆为三层 div 来实现。

导致出现的问题：每行元素不能固定在应该呆的位置，给人一种整个页面元素很飘忽不定的感觉。

02 设计图再分析

本周，将设计图拿出来再次分析一下。

为了方便实现，这次把表格以上部分拆为左右两块区域。

左边的区域，占大部分宽度。其中内部元素分为三层。
右边的区域，占小部分宽度。其中内部元素分为两层。

03 Grid system

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

Bootstrap 前端框架有一个非常强大的网格系统 Grid system。

它将一行的宽度定义为 12 列，我们想要实现的左右比例是 2:1，也就是两个 div 分别使用 col-8、col-4 的样式。

得到左右比例之后，我们还需要一个上下三层的划分。同样的，Grid system 也提供了垂直对其的工具包。

04 代码实现

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Simple POS</title>
<link rel="icon" th:href="@{/images/favicon.ico}" type="image/x-icon" />
<link rel="bookmark" th:href="@{/images/favicon.ico}"
  type="image/x-icon" />
<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
<style type="text/css">
body {
  font-family: Source Han Serif;
  font-size: 12px;
  line-height: 20px;
}

.height_40 {
  height: 40px;
  line-height: 40px;
}
</style>
</head>
<body>
  <!-- 最外层 Layout -->
  <div class="container">

    <div class="row no-gutters">
      <div class="col-sm-8">
        <div class="row align-items-start height_40">
          <div class="col-2">订单编号：</div>
          <div class="col-4" th:text="${orderNo}"></div>
          <div class="col-2">当前导购员：</div>
          <div class="col-4 input-group-sm">
            <select id="guide" class="custom-select">
              <option value="" selected>请选择导购</option>
              <option th:each="guide:${guides}" th:value="${guide.no}"
                th:text="${guide.name}"></option>
            </select>
          </div>
        </div>

        <div class="row align-items-center height_40">
          <div class="col-2">SKU：</div>
          <div class="col-4 input-group-sm">
            <input id="sku" class="form-control" type="text" />
          </div>
          <div class="col-6">
            <button type="button" class="btn btn-primary">加入购物车（Enter）</button>
            <button type="button" class="btn btn-secondary">移除购物车（F1）</button>
          </div>
        </div>

        <div class="row align-items-end height_40">
          <div class="col">
            汇总：<label id="totalNum">X</label> 件，<label id="totalAmount">YYYY</label>
            元。
          </div>
        </div>

      </div>

      <div class="col-sm-4">
        <div class="col-12 align-self-center">
          <h1 id="systemName" th:text="${systemName}"></h1>
        </div>
        <div class="col-12 align-self-center">
          <button type="button" class="btn btn-danger btn-lg btn-block">结账（F2）</button>
        </div>
      </div>
    </div>

    <div class="row no-gutters">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">货号</th>
            <th scope="col">商品名称</th>
            <th scope="col">尺码</th>
            <th scope="col">颜色</th>
            <th scope="col">吊牌金额</th>
            <th scope="col">实际金额</th>
            <th scope="col">数量</th>
            <th scope="col">合计</th>
          </tr>
        </thead>
        <tbody>
          <tr id="tr-1">
            <th scope="row">1</th>
            <th scope="col" name="productNo"></th>
            <th scope="col" name="productName"></th>
            <th scope="col" name="sizeName"></th>
            <th scope="col" name="colorName"></th>
            <th scope="col" name="tagPrice"></th>
            <th scope="col" name="retailPrice"></th>
            <th scope="col" name="num"></th>
            <th scope="col" name="total"></th>
          </tr>
          <tr id="tr-2">
            <th scope="row">2</th>
            <th scope="col" name="productNo"></th>
            <th scope="col" name="productName"></th>
            <th scope="col" name="sizeName"></th>
            <th scope="col" name="colorName"></th>
            <th scope="col" name="tagPrice"></th>
            <th scope="col" name="retailPrice"></th>
            <th scope="col" name="num"></th>
            <th scope="col" name="total"></th>
          </tr>
          <tr id="tr-3">
            <th scope="row">3</th>
            <th scope="col" name="productNo"></th>
            <th scope="col" name="productName"></th>
            <th scope="col" name="sizeName"></th>
            <th scope="col" name="colorName"></th>
            <th scope="col" name="tagPrice"></th>
            <th scope="col" name="retailPrice"></th>
            <th scope="col" name="num"></th>
            <th scope="col" name="total"></th>
          </tr>
        </tbody>
      </table>

    </div>

  </div>
</body>
<script src="/jquery/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</html>

于是，得到了一个左对齐的页面。

PS. 完整示例代码，见 https://github.com/FoamValue/oPos.git

05 小结

从源代码来看，我只是增加两个样式配置。

全局的字体、文字大小与行高。
自定义指定高度、行高是 40 px 的样式。

通过增加两个样式，以及对原代码的重排。这样简简单单就能让产品“裂开”的页面，变得整整齐齐。

Bootstrap 简直恐怖如斯啊。

夜深了，让我们下周再见。?

这个周末，又一次成功“强迫”自己学习。

感谢各位小伙伴的阅读，这里是一个技术人的学习与分享。