模态框 快速选定合适的布局
//引用 <a href="#" role="button" class="dropdown-toggle" data-hover="dropdown"> <i class="glyphicon glyphicon-user"></i> Username <i class="caret"></i></a> <!--模态窗--> <div class="modal fade" id="myModal"> <div class="modal-dialog modal-sg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">店铺编辑</h4> </div> <div class="modal-body"> <!--表单--> <form class="form-horizontal" id="storeForm"> <div class="row"> <div class="col-sm-12"> <div class="form-group"> <label for="inputUserNo" class="col-sm-4 control-label">店铺名称</label> <div class="col-sm-8"> <input type="hidden" name="id" id="bid"/> <input type="text" class="form-control" id="storeName" name="storeName" placeholder="店铺名称"> </div> </div> </div> <!--col-sm-6--> <div class="col-sm-12"> <div class="form-group"> <label for="inputPwd" class="col-sm-4 control-label">电话号码</label> <div class="col-sm-8"> <input type="text" class="form-control" id="telephone" name="telephone" placeholder="电话号码"> </div> </div> </div> <div class="col-sm-12"> <div class="form-group"> <label for="inputUserNo" class="col-sm-4 control-label">店铺地址</label> <div class="col-sm-8"> <input type="text" class="form-control" id="address" name="address" placeholder="店铺地址"> </div> </div> </div> </div> <!--row--> </form> <!--表单--> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary" onclick="saveStore();">保存</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal -->
6*6布局模式
<div class="row"> <div class="col-sm-6"> <div class="form-group"> <label for="inputUserNo" class="col-sm-4 control-label">关区</label> <div class="col-sm-8"> <input type="hidden" name="id" id="orderId"/> <input type="text" class="form-control" name="customsCode" id="customsCode" placeholder="关区" /> </div> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label for="inputName" class="col-sm-4 control-label">网购</label> <div class="col-sm-8"> <input type="text" class="form-control" id="bizTypeCode" name="bizTypeCode" placeholder="网购" /> </div> </div> </div> </div> <!--row1--> <div class="row"> <div class="col-sm-6"> <div class="form-group"> <label for="inputUserNo" class="col-sm-4 control-label">关区</label> <div class="col-sm-8"> <input type="hidden" name="id" id="orderId"/> <input type="text" class="form-control" name="customsCode" id="customsCode" placeholder="关区" /> </div> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label for="inputName" class="col-sm-4 control-label">网购</label> <div class="col-sm-8"> <input type="text" class="form-control" id="bizTypeCode" name="bizTypeCode" placeholder="网购" /> </div> </div> </div> </div> <!--row2-->
有下拉选项框框
<div class="row"> <div class="col-sm-6"> <div class="form-group"> <label for="inputUserNo" class="col-sm-4 control-label">是否处理</label> <div class="col-sm-8"> <select class="form-control" id="status" name="status"> <option value="1">未处理</option> <option value="2">已处理</option> </select> </div> </div> </div> </div> if(obj.status=="1"){ $("#status").val("未处理"); }else{ $("#status").val("已处理"); }
Bootstrap 选项卡插件
<div class='container-fluid'> <h2 class='page-header'>Bootstrap 选项卡</h2> <!-- 选项卡：通过BS的类来控制选项卡的样式 --> <ul class='nav nav-tabs'> <li class='active'><a href='#tab1' data-toggle='tab'>选项一</a></li> <li><a href='#tab2' data-toggle='tab'>选项二</a></li> <li><a href='#tab3' data-toggle='tab'>选项三</a></li> <li><a href='#tab4' data-toggle='tab'>选项四</a></li> <li><a href='#tab5' data-toggle='tab'>选项五</a></li> </ul> <!-- 选项卡的内容定义 --> <div class='tab-content'> <div class='tab-pane active' id='tab1'><p>我是选项卡一的内容</p></div> <div class='tab-pane' id='tab2'><p>我是选项卡二的内容</p></div> <div class='tab-pane' id='tab3'><p>我是选项卡三的内容</p></div> <div class='tab-pane' id='tab4'><p>我是选项卡四的内容</p></div> <div class='tab-pane' id='tab5'><p>我是选项卡五的内容</p></div> </div> </div>
完整DEMO
<!DOCTYPE html> <html> <head> <title>Try Bootstrap Online</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <div class='container-fluid'> <h2 class='page-header'>Bootstrap 选项卡</h2> <!-- 选项卡：通过BS的类来控制选项卡的样式 --> <ul class='nav nav-tabs'> <li class='active'><a href='#tab1' data-toggle='tab'>选项一</a></li> <li><a href='#tab2' data-toggle='tab'>选项二</a></li> <li><a href='#tab3' data-toggle='tab'>选项三</a></li> <li><a href='#tab4' data-toggle='tab'>选项四</a></li> <li><a href='#tab5' data-toggle='tab'>选项五</a></li> </ul> <!-- 选项卡的内容定义 --> <div class='tab-content'> <div class='tab-pane active' id='tab1'><p>我是选项卡一的内容</p></div> <div class='tab-pane' id='tab2'><p>我是选项卡二的内容</p></div> <div class='tab-pane' id='tab3'><p>我是选项卡三的内容</p></div> <div class='tab-pane' id='tab4'><p>我是选项卡四的内容</p></div> <div class='tab-pane' id='tab5'><p>我是选项卡五的内容</p></div> </div> </div> </body> </html>
