基於bootstrap的一些簡單實用
阿新 • • 發佈：2019-02-06
<script type="text/javascript" th:src="@{/assets/js/jquery-1.10.2.min.js}"></script>
<link th:href="@{/assets/bootstrap-3.3.5/css/bootstrap.css}" rel="stylesheet" type="text/css"/>
1.div的佈局
<body>
<section class="content">
<div class="form-horizontal">
<form id="myform">
<div class="box-body">
<div class="box box-success">
<div class="box-header with-border">
<h5 class="box-title">資訊</h5>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i
class="fa fa-minus"></i></button>
</div
<div class="box-body"> <div class="widget-main"> <div class="row"><div class="row">
<div class="col-md-8">
<div class="form-group">
<label for="sysOrgName" class="control-label col-md-2"><span
class="red">*</span>工作單位 </label>
<div class="col-md-10">
// form-control 字型的顏色 info[workUnit] 多個vo或實體組合成一個vo
<input type="hidden" name="info[workUnit]" class="form-control" readonly
th:value="${info.workUnit}"/>
<input name="sysOrgName" readonly id="sysOrgName" class="form-control" style="width: 770px"
th:value="${orgName.name}" type="text"/><input type="text" class="form-control " // 反顯時間格式 和時間外掛
th:value="${#dates.format(info.time,'yyyy-MM-dd')}"
id="crtTime" style="width: 275px"
onclick="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true,isShowClear:false,maxDate:new Date()})"
name="info[time]"/>
<input type="text" class="form-control " id="firstTime"
onchange="editor.bjDate2(this)" style="width: 275px" //設定時間的限制 最大和最小
onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:00',isShowClear:false,readOnly:true,maxDate:'%y-%M-%d' ,minDate:'#F{$dp.$D(\'firstTime\')}'})"
th:value="${#dates.format(info.firstTime,'yyyy-MM-dd HH:mm:ss')}"
name="info[firstTime]"/><input type="checkbox" value="1" //checkbox 反顯選中
name="info[check]"
th:checked="${info.check== '1'}">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</section>
2 table
<table><tr><th></th></tr>
<tr><td cospan=''''></td>
<td rowspan=''''></td>
</tr>
</table>