BootStrap
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。
使用Bootstrap的好处：
Bootstrap简单灵活，可用于架构流行的用户界面，具有 友好的学习曲线，卓越的兼容性，响应式设计，12列栅格系统，样式向导文档，自定义JQuery插件，完整的类库，基于Less等特性。
- bootstap英文官方: https://getbootstrap.com/
- bootstrap中文官网：http://www.bootcss.com/
6.1 栅格系统
响应式布局方案
把一行(row)平均切成 12 列(col-*)，再用断点前缀(xs/sm/md/lg/xl/xxl) 控制不同屏幕宽度下每份占几格
列偏移：
.col-md-offset-* 类可以将列向右侧偏移
.col-md-offset-4 ：将.col-md-4 元素向右侧偏移了4个列的宽度嵌套列：在已经存在的
.col-sm-* 元素内，添加一个新的.row 元素和一系列.col-sm-* 元素【Tip】内嵌的
row 同样包含12 个列列排序：使用
.col-md-push-*（向右）和.col-md-pull-*（向左）类改变列的顺序
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.row [class*= 'col-md-'] {
border: 1px solid rebeccapurple;
}
</style>
<link rel="stylesheet" href="dist/css/bootstrap.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
</div>
<div class="row">
<div class="col-md-6">col-md-1</div>
<div class="col-md-6">col-md-1</div>
</div>
<div class="row">
<div class="col-md-9">col-md-1</div>
<div class="col-md-3">col-md-1</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-9">col-md-6</div>
<div class="col-md-6 col-sm-3">col-md-6</div>
</div>
<h3>列偏移</h3>
<div class="row">
<div class="col-md-4 col-md-offset-3">col-md-4</div>
</div>
<h3>列嵌套</h3>
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>
</div>
</div>
</div>
<h3>列排序</h3>
<div class="row">
<div class="col-md-4 col-md-push-2">col-md-4</div>
</div>
<div class="row">
<div class="col-md-4 col-md-push-4">col-md-4</div>
<div class="col-md-4 col-md-pull-4">col-md-4(2)</div>
</div>
<div class="row">
<div class="col-md-4 pull-right col-md-pull-2">col-md-4</div>
</div>
</div>
</body>
</html>6.2 样式
.table 类：基本的样式 — 少量的内补（padding）和水平方向的分隔线
.table-striped 类：给<tbody> 之内的每一行增加斑马条纹样式
.table-bordered 类：为表格和其中的每个单元格增加边框
.table-hover 类：让<tbody> 中的每一行对 鼠标悬停 状态作出响应状态类：为行或单元格设置颜色
Class 描述 .active鼠标悬停在行或单元格上时所设置的颜色 .success标识成功或积极的动作 .info标识普通的提示信息或动作 .warning标识警告或需要用户注意 .danger标识危险或潜在的带来负面影响的动作
html<div class="row"> <div class="col-md-8 col-md-offset-2"> <table border="1" class="table table-striped table-hover table-bordered"> <tr> <th>序号</th> <th>姓名</th> <th>年龄</th> <th>部门</th> </tr> <tr class="success"> <td>1</td> <td>张三</td> <td>23</td> <td>销售</td> </tr> <tr> <td>2</td> <td>李四</td> <td>23</td> <td>销售</td> </tr> <tr class="danger"> <td>3</td> <td>王五</td> <td>23</td> <td>销售</td> </tr> </table> </div> </div>
.form-control 类的<input>、<textarea> 和<select> 元素默认设置宽度属性为width: 100%;
html<div class="row"> <div class="col-md-8 col-md-offset-2"> <form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="form-group"> <div class="row"> <div class="col-md-6"> <select class="form-control"> <option>销售</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> </div> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </div>
<a>、<button> 或<input> 元素可以添加按钮类 btn
html<a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value="Input"> <input class="btn btn-default" type="submit" value="Submit">
预定义样式
-
btn-default 默认样式 -
btn-primary 首选项 -
btn-success 成功 -
btn-info 一般信息 -
btn-warning 警告 -
btn-danger 危险 -
btn-link 链接
-
6.3 组件
1）图标
html
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>【Tip】
- 图标类不能和其它组件直接联合使用
- 只对内容为空的元素起作用，不包含任何文本内容或子元素的元素
2）导航条
6.4 JavaScript 插件
模态框 modal.js
方法
.modal(options)js$('#myModal').modal('show') // 手动打开模态框 $('#myModal').modal('hide') // 手动隐藏模态框模态框事件-,%E4%BA%8B%E4%BB%B6,-Bootstrap%20%E7%9A%84%E6%A8%A1)