整 理：晋 哲
时 间：2016-11-15
说 明：整理后台常用到的Bootstrap元素结构，便于规范运用
本地示例：http://192.168.0.100/BootstrapDemo.html
1、标题及下面的按钮
想要上下元素有间距，使用【form-group】父类包裹起来
<div class="form-group">
<h3>标题文字</h3>
</div>
<div class="form-group">
<button class="btn btn-success">新增模版</button>
</div>
2、功能按钮，分别对应【primary、success、info、danger、warning、default】
<button class="btn btn-primary">保存/提交/确认</button>
<button class="btn btn-success">添加/新建/通过</button>
<button class="btn btn-info">信息/详情/查看数据</button>
<button class="btn btn-danger">删除</button>
<button class="btn btn-warning">修改/审核/警告</button>
<button class="btn btn-default">默认/普通</button>
元素右对齐，使用【pull-right】
<div class="form-group">
<button class="btn btn-success">新增模版</button>
<button class="btn btn-primary pull-right">保存</button>
</div>
3、用于表单中的文字按钮
<button class="btn btn-link">编辑</button>
<button class="btn btn-link">删除</button>
<a class="btn btn-link btn-sm" href="#">编辑</a>
<a class="btn btn-link btn-sm" href="#">删除</a>
<a class="btn btn-link btn-xs" href="#">编辑</a>
<a class="btn btn-link btn-xs" href="#">删除</a>
4、内页分类标题
<div class="breadcrumb">1、类目选择</div>
<div class="breadcrumb">2、基本信息</div>
<div class="breadcrumb">3、商品规格</div>
如果想要调整字体大小，可以改动<div>标签，使用标签<h3>、<h4>
<h3 class="breadcrumb">1、类目选择</h3>
<h4 class="breadcrumb">1、类目选择</h4>
5、表单，使用【form-horizontal】包裹起来
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">用户名：</label>
<div class="col-sm-5"><input type="text" class="form-control"></div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">密码：</label>
<div class="col-sm-5"><input type="text" class="form-control"></div>
</div>
</div>
如果没有label标题，又需要表单对齐的，使用【col-sm-offset-*】
<div class="form-group">
<div class="col-sm-offset-2 col-sm-5">
<button class="btn btn-primary">保存</button>
</div>
</div>
6、水平排列的表单，使用【form-inline、radio-inline、checkbox-inline】
<div class="form-horizontal">
<div class="form-group form-inline">
<label class="col-sm-2 control-label">有效期：</label>
<input type="text" class="form-control"> 至 <input type="text" class="form-control">
</div>
<div class="form-group">
<label class="col-sm-2 control-label">单项选择：</label>
<label class="radio-inline"><input type="radio" name="option1" value="选项一"> 选项一</label>
<label class="radio-inline"><input type="radio" name="option1" value="选项二"> 选项二</label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">多选选择：</label>
<label class="checkbox-inline"><input type="checkbox" value="选项一"> 选项一</label>
<label class="checkbox-inline"><input type="checkbox" value="选项二"> 选项二</label>
</div>
</div>
7、多列展示，使用栅格样式
<div class="form-horizontal">
<div class="form-group">
<div class="form-group col-sm-4">
<label class="col-sm-4 control-label">多列设置：</label>
<div class="col-sm-8"><input type="text" class="form-control"></div>
</div>
<div class="form-group col-sm-4">
<label class="col-sm-4 control-label">多列设置：</label>
<div class="col-sm-8"><input type="text" class="form-control"></div>
</div>
<div class="form-group col-sm-4">
<label class="col-sm-4 control-label">多列设置：</label>
<div class="col-sm-8"><input type="text" class="form-control"></div>
</div>
</div>
</div>
8、分页
<nav>
<ul class="pagination">
<li><a href="#"><span>上一页</span></a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#"><span>下一页</span></a></li>
</ul>
</nav>
9、开关控件
<!-- 引入开关控件CSS -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.min.css">
<!-- 开关控件HTML -->
<div class="switch" data-on="primary" data-off="info">
<input type="checkbox" name="is_on" data-on-text="开启" data-off-text="关闭" checked />
</div>
<!-- 引入开关控件JS -->
<script src="http://cdn.bootcss.com/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script>
<script>
$(function() {
$('input[name="is_on"]').bootstrapSwitch();
$('input[name="is_on"]').on('switchChange.bootstrapSwitch', function(event, state) {
console.log(state);
});
})
</script>
10、模态框
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">点击弹出模态框</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" 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>
<h4 class="modal-title" id="myModalLabel">标题</h4>
</div>
<div class="modal-body">
显示内容
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
11、表格
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>First</th>
<th>Second</th>
<th>Third</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
