上周，假装前端开发写了一个歪瓜裂枣的，让产品“裂开”的页面。
这周，觉得依靠 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 代码实现
代码语言：javascript复制<!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 简直恐怖如斯啊。
夜深了，让我们下周再见。?
这个周末，又一次成功“强迫”自己学习。
感谢各位小伙伴的阅读，这里是一个技术人的学习与分享。
