Bootstrap基础运用示例

整   理：晋 哲

时   间：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>