1 bootstrap简介
Bootstrap是目前主流的响应式前端框架，那么Bootstrap的优势体现在：
- 移动设备优先：从Bootstrap3开始，框架包含了整个库移动设备优先的样式
- 浏览器支持：所有主流浏览器都支持Bootstrap
- 容易上手：只要具备HTML和CSS的基础就可以上手
- 响应式设计：Bootstrap的响应式CSS能够适应于台式机、平板电脑以及手机
- 包含强大的内置组件，易于定制
2 Bootstrap的使用
2.1 表格
在Bootstrap中表格的标签更加丰富，效果也更加美观，下面会介绍表格的标签和样式
标签：
- table为表格添加基础样式
- thead表格标题行的容器元素
- tbody表格主体中的表格行的容器元素
- tr表格行
- td默认的表格单元格
- th特殊的表格单元格，必须在thead标签中使用
- caption关于表格存储内容的描述或总结
外观样式：
- .table 为任意的table添加基本样式(只有横向分割线)
- .table-striped在tbody内添加斑马纹样式的条纹，也就是隔行变色
- .table-borded为所有表格的单元格添加边框
- .table-hover在tbody内的任意一行启用鼠标悬停状态，鼠标悬停高亮突出显示
- .table-condensed使表格更加精凑
请景色样式：适用在th、tr、td
- .active激活效果
- .success表示成功的动作
- .info表示普通的提示信息
- .waring表示警告的信息
- .danger表示危险所带来的负面影响的动作
响应式表格实例 table-responsive将表格设置为响应式
<body style="padding: 100px;">
<table class="table table-responsive">
<caption>产品记录表格</caption>
<thead>
<tr>
<th>产品名称</th>
<th>日期</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr class="info">
<td>苹果</td>
<td>2020-1-1</td>
<td>新鲜</td>
</tr>
<tr class="active">
<td>丑八怪</td>
<td>2020-2-1</td>
<td>新鲜</td>
</tr>
<tr class="success">
<td>车厘子</td>
<td>2020-3-1</td>
<td>新鲜</td>
</tr>
<tr class="warning">
<td>樱桃</td>
<td>2020-4-1</td>
<td>新鲜</td>
</tr>
<tr class="danger">
<td>橘子</td>
<td>2020-5-1</td>
<td>新鲜</td>
</tr>
</tbody>
</table>
</body>
2.2 表单
表单有两种布局：默认布局和内联布局
先看默认布局
<body style="padding: 100px;">
<form >
<div class="form-group">
<label>邮箱</label>
<input type="email" class="form-control" placeholder="输入邮箱...">
</div>
<div class="form-group">
<label>密码</label>
<input type="password" class="form-control" placeholder="输入密码...">
</div>
<div class="form-group">
<button class="btn btn-primary">提交</button>
</div>
</form>
</body>
内联布局
内联布局会使所有表单元素居于一行(当小于768px时，会自动还原成移动端样式)
<body style="padding: 100px;">
<form class="form-inline">
<div class="form-group">
<label>邮箱</label>
<input type="email" class="form-control" placeholder="输入邮箱...">
</div>
<div class="form-group">
<label>密码</label>
<input type="password" class="form-control" placeholder="输入密码...">
</div>
<div class="form-group">
<button class="btn btn-primary">提交</button>
</div>
</form>
</body>
除了布局外，还要介绍表单常用的控件：输入框、文本框、复选框、复选按钮、单选框以及单选按钮。
输入框
<body style="padding: 100px;">
<form>
<div class="form-group">
<label for="">输入框</label>
<input type="text" class="form-control" placeholder="请输入文本...">
</div>
</form>
</body>
文本框
<body style="padding: 100px;">
<form>
<div class="form-group">
<label for="">文本框</label>
<textarea class="form-control" cols="30" rows="5"></textarea>
</div>
</form>
</body>
复选框
checkbox默认
checkbox-inline内联
<div class="checkbox">
<label >
<input type="checkbox">抽烟
</label>
</div>
<div class="checkbox">
<label >
<input type="checkbox">学习
</label>
</div>
<hr>
<div class="checkbox-inline">
<label >
<input type="checkbox">阅读
</label>
</div>
<div class="checkbox-inline">
<label >
<input type="checkbox">睡觉
</label>
</div>
复选按钮
<form >
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox">学习
</label>
<label class="btn btn-primary">
<input type="checkbox">吃饭
</label>
<label class="btn btn-primary">
<input type="checkbox">睡觉
</label>
<label class="btn btn-primary">
<input type="checkbox">阅读
</label>
</div>
</form>
单选框
<label class="radio">
<input type="radio" name="sex">男
</label>
<label class="radio">
<input type="radio" name="sex">女
</label>
<hr>
<label class="radio-inline">
<input type="radio" name="age">17
</label>
<label class="radio-inline">
<input type="radio" name="age">18
</label>
单选按钮
<label class="btn btn-primary">
<input type="radio" name="gender">男
</label>
<label class="btn btn-primary">
<input type="radio" name="gender">女
</label>
2.3 按钮
在Bootstrap中按钮有以下几种样式：
<button class="btn btn-default">1</button>
<button class="btn btn-primary">2</button>
<button class="btn btn-success">3</button>
<button class="btn btn-info">4</button>
<button class="btn btn-warning">5</button>
<button class="btn btn-danger">6</button>
<button class="btn btn-link">7</button>
按钮大小设置：
<button class="btn btn-default btn-lg">1</button>
<button class="btn btn-primary">2</button>
<button class="btn btn-success btn-sm">3</button>
<button class="btn btn-info btn-xs">4</button>
按钮状态：激活状态和禁用状态，其中激活状态时，按钮在激活时呈现为被按压的外观；禁用状态时，颜色会变淡50%，并且失去渐变
<button class="btn btn-default">1</button>
<button class="btn btn-default active">2</button>
<button class="btn btn-default disabled">3</button>
2.4 图片
在Bootstrap中关于图片有以下几点属性：
- .img-rounded：添加border-radius:6px获得圆片圆角
- .img-circle:添加border-radius:50%使整个图片变成圆形
- .img-thumbnail:添加一些内边距和一个灰色边框
<img src="pig.jpeg" class="img-rounded">
<img src="pig.jpeg" class="img-circle">
<img src="pig.jpeg" class="img-thumbnail">
响应式图片
<img src="pig.jpeg" class="img-responsive">
2.5 下拉菜单组件
<div class="dropdown">
<button class="btn btn-primary" data-toggle="dropdown">菜单<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">前端</a></li>
<li><a href="#">后端</a></li>
<li><a href="#">全栈</a></li>
</ul>
</div>
关键点：外围容器使用class="dropdown"包裹，内部点击按钮事件绑定data-toggle="dropdown"，菜单元素使用class="dropdown-menu"。
2.6 分页组件
<ul class="pagination">
<li class="previous"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li ><a href="#">2</a></li>
<li ><a href="#">3</a></li>
<li class="next"><a href="#">»</a></li>
</ul>
2.7 栅格系统
bootstrap的栅格系统将整个页面水平方向平均划分为12个小格子，但浏览器发生变化时，我们可以控制每行元素占用几个格子，从而达到响应式效果。
<style>
.a{
height: 50px;
border: 1px solid black;
background-color: #eeeeee;
}
</style>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 a">1</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">1</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">1</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">1</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">1</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">1</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">1</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">1</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">1</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">1</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">1</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">1</div>
</div>
</div>
col-lg-3 ：当大屏幕时，一个div占3份，一行显示4个div
col-md-4 ：当中屏幕时，一个div占4份，一行显示3个div
col-sm-6：当小屏幕时，一个div占6份，一行显示2个div
超小屏幕时，一个div占12份，一行就显示一个div
2.8 缩略图组件
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail"><img src="pig.jpeg"></div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail"><img src="pig.jpeg"></div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail"><img src="pig.jpeg"></div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail"><img src="pig.jpeg"></div>
</div>
</div>
2.9 模态框组件
模态框有以下几个相关属性：
- data-toggle="modal" 触发类型：模态框modal
- data-target="#myModal"触发的节点
- data-backdrop="static"点击黑灰色背景，不会关闭模态框
<button class="btn btn-warning" data-toggle="modal" data-target="#myModal"></button>
<div class="modal" id="myModal" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
<h4 class="modal-title">友情提示</h4>
</div>
<div class="modal-body">
<hr>
<img src="pig.jpeg" width="200px">
<hr>
<input type="text">
</div>
<div class="modal-footer">
<button class="btn btn-info">确定</button>
<button class="btn btn-default" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
3 小案例
首页轮播图：
- 大小屏幕自动适应，扩大缩小浏览器
- 滚动数字区点击左右切换图片
- 左右区域点击切换
- 默认5秒种自动切换下一张
- 最后一张，回到第一张
<div id="lunbotu" class="carousel slide" data-ride="carousel" >
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#lunbotu"></li>
<li data-slide-to="1" data-target="#lunbotu"></li>
<li data-slide-to="2" data-target="#lunbotu"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="pig.jpeg">
</div>
<div class="item">
<img src="pig.jpeg">
</div>
<div class="item">
<img src="pig.jpeg">
</div>
</div>
<a href="#lunbotu" data-slide="prev" class="carousel-control left">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#lunbotu" data-slide="next" class="carousel-control right">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
data属性解释：
- data-slide接受关键字prev或next，用来改变幻灯片相当于当前位置
- data-slide-to来向轮播图底部创建一个原始滑动索引，data-slide-to="2"将把滑动块移动到一个特定索引，索引从0开始
- data-ride="carousel"属性用户标记轮播在页面加载时开始动画播放
响应式导航条
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">科技有限公司</a>
<button class="navbar-toggle" data-toggle="collapse" data-target="#nav">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="nav" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>主页</a></li>
<li ><a href="#"><span class="glyphicon glyphicon-tint"></span>产品</a></li>
<li ><a href="#"><span class="glyphicon glyphicon-camera"></span>介绍</a></li>
<li ><a href="#"><span class="glyphicon glyphicon-earphone"></span>联系我们</a></li>
</ul>
</div>
</div>
</div>
