客运综合管理系统—出站稽查

首先引入两插件，分别是bootstrap.min.css和layui.css

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">客运综合管理系统</li>
        <li class="breadcrumb-item">出站查询</li>
        <li class="breadcrumb-item">出站稽查</li>
    </ol>
</nav>

头部信息，效果如下图

在最外层div中给个container-fluid的类，使用 .container-fluid 类，可以使div宽度扩展到整个宽度（如果没有被其它CSS容器包含，则应是浏览器运行时的宽度，否则应是父容器中允许的最大宽度，一般视为100%宽度）
下面是页面头部的代码，效果如下图(头部样式截图)

<div class="container-fluid">

<h2 class="w-100 text-center">出站稽查</h2>

<div class="col-8 pb-2">
<form class="form-inline form-row">
<label class="col-form-label mr-2" for="searchStudentNumber">车辆牌号：</label>
<input class="form-control form-control-sm mr-3" id="searchStudentNumber" name="StudentNumber" />
<label class="col-form-label mr-2" for="searchStudentNumber">车牌号：</label>
<input class="form-control form-control-sm mr-3" id="searchStudentNumber" name="StudentNumber" />
<div class="form-group"><button class="btn btn-primary" type="submit">车辆信息</button></div>
<label class="col-form-label mr-2" for="searchStudentNumber">班次：</label>
<select class="layui-form-label col-2"></select></form></div></div>

table-bordered table表格的类，给table表格自动划分

<table class="table table-bordered">
//Table表头
<thead><tr>
<th style="width:150px;" class="text-center">检查项目</th>
<th class="text-center">检查要求</th>
<th class="text-center">检查结果</th>
</tr></thead>

以下内容为table的内容，最外层包裹的是tbody，再是tr、th、td（决定一行的内容，td越多行内划分也就越多）

<tbody><tr>
<th scope="row">一、超载检查</th>
<td>超载或人数不符合客车不出站</td>
<td><input type="checkbox" name="" title="安检" lay-skin="primary" class="layui-checkbox mt-1 float-left">
<p>是否合格</p>
</td></tr>

……（嵌套顺序tr、th、td需要则嵌多少，此为一行）
colspan="2"将一行内的两个格子合并为一个

<tr><th scope="row" colspan="2">
<label class="col-form-label" for="searchStudentNumber">综合检查结果</label>
<input class="col-9" id="searchStudentNumber" name="StudentNumber" />
</th>
<td><input type="checkbox" name="" title="安检" lay-skin="primary" class="layui-checkbox mt-1 float-left">
<p class="text-danger">全部合格</p>
</td></tr>
<tr><th scope="row" colspan="3">
<form class="form-horizontal" role="form" id="formInsertExaminee" action="" method="post">
<label class="col-form-label" for="searchStudentNumber">车型：</label>
<input class="col-1" id="searchStudentNumber" name="StudentNumber" />
<label class="col-form-label" for="searchStudentNumber">乘客数量：</label>
<input class="col-1" id="searchStudentNumber" name="StudentNumber" />
……
<label class="col-form-label" for="searchStudentNumber">稽查员：</label>
<select class="col-1" id="searchStudentNumber" name="StudentNumber"></select>
</form></th></tr></tbody></table>