公交查询
<div class="row" id="query"> <div class="col-md-3"></div> <div class="col-md-6"> <div class="query" style="margin-top: 5em;" > <div class="col-md-3" id="layout-left" style="margin-left: 0;padding: 0"> <div id="navigation" style="height: 125px;border-style: solid;border-width: 1px;border-color: #00a2d4"> <ul id="bus" class="nav nav-pills nav-stacked"> <li class="active"> <a href="#query-line" data-toggle="tab"><h4 style="text-align: center">线路查询</h4></a> </li> <li> <a href="#query-station" data-toggle="tab"><h4 style="text-align: center">站点查询</h4></a> </li> </ul> </div> </div> <div class="col-md-8" id="layout-right" style="border-style: solid;border-width: 1px;border-color: #00a2d4;height: 125px;"> <div class="row" id="switchCity"> <!-- 按钮 --> <button class="btn btn-success" data-toggle="modal" data-target="#exampleModal" style="float: left" value="{$city.id}" id="cityId"> {$city.name} [切换城市] </button> <!-- 模态框 --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h5 class="modal-title" id="exampleModalLabel">选择城市</h5> </div> <div class="modal-body"> <form action="index/index" class="form-inline"> <div class="form-group"> <select class="form-control m-b-xs" id="provinces"> <option selected="selected">请选择<span class="caret"></span></option> {foreach $provinces as $key=>$pr} <option value="{$pr.id}">{$pr.name}</option> {/foreach} </select> <select class="form-control m-b-xs" id="city"> <option value="">请选择<span class="caret"></span></option> </select> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary" id="chose">确定</button> </div> </div> </div> </div> </div> <div class="row" style="margin-top: 1em"> <div class="col-md-2"></div> <div class="col-md-8"> <div id="busContent" class="tab-content" > <!-- 线路查询 --> <div id="query-line" class="tab-pane fade in active"> <div class="input-group"> <input type="text" class="form-control" id="lineId" placeholder="输入线路名称,如“25”"> <span class="input-group-btn"> <button class="btn btn-primary" type="submit" id="lineSearch"> <span class="glyphicon glyphicon-search" aria-hidden="true"></span>查询 </button> </span> </div> </div> <!-- 站点查询 --> <div id="query-station" class="tab-pane fade"> <div class="input-group"> <input type="text" class="form-control" id="stationName" placeholder="输入站点名,如“火车站”"> <span class="input-group-btn"> <button class="btn btn-primary" type="button" id="stationSearch"> <span class="glyphicon glyphicon-search" aria-hidden="true"></span>查询 </button> </span> </div> </div> </div> </div> </div> </div> </div> </div> </div>
效果图