//引用
<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 -->
View Code
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-->
View Code
有下拉选项框框
<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("已处理");
}
View Code
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>
View Code
完整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>
View Code
