首先引入两插件,分别是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>