Bootstrap框架
Bootstrap框架的概述和优点
目标
bootstrap的作用
什么是Bootstrap
Bootstrap一个前端的框架，提高前端的开发效率，制作出更加专业，漂亮的页面。基于html、css、js技术。
bootstrap中文官网：http://www.bootcss.com
Bootstrap的优势
- 自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式。能够自适应于台式机、平板电脑和手机。
- Bootstrap支持所有的主流浏览器。如：Internet Explorer、 Firefox、 Opera、 Google Chrome、Safari。
- 只要具备 HTML 和 CSS 的基础知识，就可以开始学习 Bootstrap。
小结
bootstrap是什么？
前端开发框架,提高前端的开发效率,界面效果美观
什么是响应式设计(重点)
目标
了解什么是响应式设计
传统的网页
电脑上和手机上看到的是不同的页面
电脑上效果
https://www.taobao.com/
手机上效果
https://h5.m.taobao.com/
响应式设计网页
电脑和手机看到的是同一个页面，根据屏幕尺寸不同，网页自动有不同布局
https://www.apple.com/cn/
电脑上效果
手机上效果
响应式布局特点
同一个网页在不同的屏幕上,会自动适应,拥有不同的布局.
小结
说出响应式布局特点？
同一个网页在不同的屏幕上,会自动适应,拥有不同的布局.
Bootstrap的下载和介绍
目标
学习Bootstrap的下载和介绍
下载
http://www.bootcss.com，下载用于生产环境的Bootstrap
Bootstrap包含的内容
![[外链图片转存失败(img-4BtILBvC-1565706473353)(/)]](http://img.e-com-net.com/image/info8/b125ea8780734f31a3979c15558b7a1a.jpg)
-
设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。
-
组件：无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。
-
JavaScript插件：jQuery 插件为 Bootstrap 的组件赋予了“生命”。可以简单地一次性引入所有插件，或者逐个引入到你的页面中。
目录结构
压缩版与标准版的介绍
![[外链图片转存失败(img-VDUDLmIg-1565706473353)(/)]](http://img.e-com-net.com/image/info8/93ee72385b0942978d33755f7332020f.jpg)
功能上是一样的
- 标准版：代码可读性比较好，通常用于开发。
- 压缩版：文件小，通常用于工作环境。
小结
说说bootstrap中这几个目录的作用?
- css：存放Bootstrap提供的CSS样式
- fonts：存放Bootstrap提供的字体
- js：存放Bootstrap提供的JS代码
创建Bootstrap的模板(重点)
目标
学习创建bootstrap的模板
步骤
- 复制解压出来的三个文件夹到项目中：css，js， fonts
- 复制jquery框架：jquery-3.2.1.min.js复制到js目录下
- 复制文档中的："起步->基本模板"中代码到网页，修改网页的内容
此模板文件只要创建1次即可，以后可以重用
离线文档位置:day23\source\Bootstrap离线文档\v3.bootcss.com\index.htm
模板的代码
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap模板title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js">script>
<script src="js/bootstrap.min.js">script>
head>
<body>
body>
html>
小结
创建bootstrap模板的步骤有哪几步？
- 复制bottstrap的css,js,fonts文件到到模块下
- 复制jquery-3.2.1.min.js到js文件夹下
- 复制文档中起步->基本模板的代码到html网页中,修改网络地址位本地地址
栅格系统的介绍
目标
学习Bootstrap的栅格系统和两种布局的容器
栅格系统的介绍
表格
<table>
<tr bgcolor="gray">
<td>姓名th>
<td>电话th>
<td>地址th>
tr>
table>
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，一行会自动分为最多12格。你的内容就可以放入这些创建好的布局中。
Bootstrap 栅格系统的工作原理
<div class="container">
<div class="row">
<div class="col-md-4">
1列占4格子
div>
<div class="col-md-4">
1列占4格子
div>
<div class="col-md-4">
1列占4格子
div>
div>
div>
栅格的参数
| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 (≥992px) | 大屏幕 (≥1200px) | |
|---|---|---|---|---|
| 类前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
两种容器
| 两种容器的类样式名 | 说明 |
|---|---|
| container | 具有固定宽度的容器 |
| container-fluid | 具有100%宽度的容器 |
案例效果
代码
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap两种容器title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js">script>
<script src="js/bootstrap.min.js">script>
<style>
div {
border: 1px solid red;
height: 100px;
}
style>
head>
<body>
<div class="container">
container 固定宽度的容器
div>
<div class="container-fluid">
container-fluid 100%宽度
div>
body>
html>
设备查询@media
通过不同的设备类型和条件定义样式表规则。设备查询让CSS可以更精确作用于不同的设备类型和同一设备的不同条件。设备查询的大部分特性都接受min和max用于表达“大于或等于”和“小于或等于”。打开文件：bootstrap.css，可以看到以下代码：
.container {
padding-right: 15px; 右内边距
padding-left: 15px; 左内边距
margin-right: auto; 居中
margin-left: auto;
}
@media (min-width: 768px) { 如果设备大于等于768，容器的宽度是750
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
- 结论：所以容器container可以随着设备的宽度发生变化
栅格系统有关的类样式名
| 栅格系统 | 描述 | 类似于表格 |
|---|---|---|
| .container | 固定宽度容器 | table |
| .container-fluid | 100%宽度的容器 | table |
| .row | 表示1行，1行最多12格 | tr |
| .col-xx-n xx | 表示1列，1列可以占多格 .col-sm-3 在小屏幕上这1列占3格 .col-lg-6 在大屏幕上这1列占6格 |
td |
小结
-
说出栅格系统的两种容器？
container: 固定宽度容器
container-fluid: 100%宽度的容器
-
一行的类名？
row
-
col-md-4表示什么意思？
这列在中等屏幕上占4个格子
演示：栅格系统的布局案例
目标
通过4个案例学习栅格系统的布局
示例1：基本结构,一列四个格子
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>基本布局title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js">script>
<script src="js/bootstrap.min.js">script>
<style>
.row div {
border: 1px solid red;
height: 100px;
}
style>
head>
<body>
<h1>基本布局h1>
<div class="container">
<div class="row">
<div class="col-md-4">
一列四个格子
div>
<div class="col-md-4">
一列四个格子
div>
<div class="col-md-4">
一列四个格子
div>
div>
<div class="row">
<div class="col-md-4">
一列四个格子
div>
<div class="col-md-4">
一列四个格子
div>
<div class="col-md-4">
一列四个格子
div>
div>
div>
body>
html>
示例2：一行超过12格
如果一行超出了12格，多出的格子会放在下面
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap栅格系统title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js">script>
<script src="js/bootstrap.min.js">script>
<style>
.row div {
border: 1px solid red;
height: 100px;
}
style>
head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
1列占4格子
div>
<div class="col-md-4">
1列占4格子
div>
<div class="col-md-4">
1列占4格子
div>
<div class="col-md-4">
1列占4格子
div>
<div class="col-md-4">
1列占4格子
div>
div>
div>
body>
html>
示例3：不同屏幕的适配
不同的设备上显示不同数量的列:中等屏幕占3格，小屏幕占4格，超小屏幕占6格
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap栅格系统title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js">script>
<script src="js/bootstrap.min.js">script>
<style>
.row div {
border: 1px solid red;
height: 100px;
}
style>
head>
<body>
<div class="container">
<div class="col-xs-6 col-sm-4 col-md-3">
超小屏幕占6格，小屏幕占4格，中等屏幕占3格
div>
<div class="col-xs-6 col-sm-4 col-md-3">
div>
<div class="col-xs-6 col-sm-4 col-md-3">
div>
<div class="col-xs-6 col-sm-4 col-md-3">
div>
<div class="col-xs-6 col-sm-4 col-md-3">
div>
<div class="col-xs-6 col-sm-4 col-md-3">
div>
div>
body>
html>
示例4：显示和隐藏块
可以让某些列在指定的设备上显示或隐藏
在大屏幕上显示，在超小屏幕上隐藏
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>基本布局title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js">script>
<script src="js/bootstrap.min.js">script>
<style>
.row div {
border: 1px solid red;
height: 100px;
}
style>
head>
<body>
<h1>在大屏幕上显示，在超小屏幕上隐藏h1>
<div class="container">
<div class="row">
<div class="col-md-4 visible-lg">
一列占4个格子
在大屏幕上显示
div>
<div class="col-md-4">
一列占4个格子
div>
<div class="col-md-4 hidden-xs">
一列占4个格子
在超小屏幕上隐藏
div>
div>
div>
body>
html>
小结
| 类样式名 | 作用 |
|---|---|
| .row | 表示一行 |
| .col-xs-n | 表示这列在超小屏幕上占n个格子 |
| .col-sm-n | 表示这列在小屏幕上占n个格子 |
| .col-md-n | 表示这列在中等屏幕上占n个格子 |
| .col-lg-n | 表示这列在大屏幕上占n个格子 |
| .hidden-lg/md/sm/xs | 在某些屏幕上隐藏 |
| .visible-lg/md/sm/xs | 在某些屏幕上显示 |
全局CSS样式：按钮
目标
学习使用Bootstrap中的按钮样式
效果
![[外链图片转存失败(img-7dr3rWD0-1565706473357)(/)]](http://img.e-com-net.com/image/info8/2c496c08807f4b61966db3d39910b98d.jpg)
![[外链图片转存失败(img-XbklMGUC-1565706473361)(/)]](http://img.e-com-net.com/image/info8/54263aff298743da9b2ee332af325a37.jpg)
代码
<div class="container">
<h2>按钮h2>
<input type="button" value="普通按钮" class="btn btn-default">
<button type="submit" class="btn btn-default">提交按钮button>
<a href="#" class="btn btn-default">我是链接a>
<h2>预定义按钮h2>
<input type="button" value="蓝色按钮" class="btn btn-primary">
<input type="button" value="红色按钮" class="btn btn-danger">
<input type="button" value="绿色按钮" class="btn btn-success">
div>
小结
- 按钮使用哪个类：btn
- 标准按钮使用哪个类：btn-default
- 成功按钮使用哪个类：btn-success
全局CSS样式：图片
目标
学习Bootstrap响应式图片的使用
响应式图片
通过为图片添加.img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。
图片形状
| 图⽚片形状 | 类样式名 |
|---|---|
| 圆⻆角 | img-rounded |
| 圆或椭圆 | img-circle |
| 有边框 | img-thumbnail |
效果
代码
<h2>图片h2>
<img src="img/08.jpg" class="img-responsive">
<hr/>
<img src="img/01.jpg" class="img-responsive img-rounded">
<img src="img/02.jpg" class="img-responsive img-circle">
<img src="img/03.jpg" class="img-responsive img-thumbnail">
小结
响应式图片设置哪个类名？
img-responsive： 占父控件100%大小，随着父控件缩放。
全局CSS样式：表单
目标
使用表单样式制作如图效果
表单
| 样式名 | 作用 |
|---|---|
| form-control | 、、 元素都将被默认设置宽度：width: 100%; |
| form-group | 将label元素和前面提到的控件包裹在一行中进行分组 |
代码
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BootstrapFORM表单title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js">script>
<script src="js/bootstrap.min.js">script>
head>
<body>
<div class="container">
<h2>添加联系人h2>
<form style="width: 500px">
<div class="form-group">
<label for="user">姓名:label>
<input type="text" id="user" class="form-control" placeholder="请输入姓名">
div>
<div class="form-group">
<label>性别:label>
<input type="radio" id="male" value="male" name="gender" checked="checked"/>
<label for="male">男label>
<input type="radio" id="female" value="female" name="gender"/>
<label for="female">女label>
div>
<div class="form-group">
<label for="birthday">生日:label>
<input type="date" class="form-control" id="birthday"/>
div>
<div class="form-group">
<label for="edu">学历:label>
<select id="edu" class="form-control">
<option>本科option>
<option>研究生option>
select>
div>
<div class="form-group text-center">
<input type="button" class="btn btn-primary" value="注册"/>
<input type="button" class="btn btn-success" value="取消"/>
<input type="button" class="btn btn-warning" value="退出"/>
div>
form>
div>
body>
html>
小结
-
form-control的特点：可以让，input, textarea, select 元素和父控件100%宽
-
form-group有什么用：表示一组，和其他组之间间距大一些
全局CSS样式：表格
目标
使用表格制作如图效果
表格的类样式
不同行的颜色
代码
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap表格title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js">script>
<script src="js/bootstrap.min.js">script>
head>
<body>
<div class="container">
<h3>七龙珠人物h3>
<table class="table table-striped table-bordered table-hover">
<tr class="success">
<th>编号th>
<th>姓名th>
<th>性别th>
<th>电话th>
tr>
<tr>
<td>1302td>
<td>贝吉塔td>
<td>男td>
<td>19509869504td>
tr>
<tr>
<td>5940td>
<td class="danger">孙悟空td>
<td>男td>
<td>13938475687td>
tr>
<tr>
<td>6841td>
<td class="warning">龟仙人td>
<td>男td>
<td>18501029504td>
tr>
table>
div>
body>
html>
小结
bootstrap中表格有哪些类样式？
table: 每行之间有一根水平分割线。这个表格是父控件的100%宽度
table-striped: 隔行变灰色
table-bordered: 表格添加外边框和内边框
table-hover: 鼠标以上变灰色
组件：字体图标
目标
中国
A
代码
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap字体图标title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js">script>
<script src="js/bootstrap.min.js">script>
head>
<body>
<div class="container">
<h2>字体图标h2>
<span class="glyphicon glyphicon-star" style="font-size: 30px; color: red">span>五角星
<span class="glyphicon glyphicon-zoom-in" style="font-size: 30px; color: blue">span>放大镜
<span class="glyphicon glyphicon-trash" style="font-size: 30px; color: green">span>回收站
div>
body>
html>
小结
-
字体图标使用什么标签显示?
span
-
每个图标下的文字是什么意思?
就是这个图标的类样式
组件：导航条
目标
查询Bootstrap文档做出如下图所示的导航条
大屏幕
![[外链图片转存失败(img-lazRzO4X-1565706473365)(/)]](http://img.e-com-net.com/image/info8/5d1857a96d43432c9bf98f004d963169.jpg){kind=small}
小屏幕
导航条
https://www.apple.com/cn/
什么是导航条：导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。
组成
整个导航条就是一个nav标签，nav与div功能相同，它是一个语义标签。
属性说明
![[外链图片转存失败(img-hugeJuZ1-1565706473369)(/)]](http://img.e-com-net.com/image/info8/97cf08f6a5ac4fb8be94850b56678a3c.jpg)
代码
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap导航条title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js">script>
<script src="js/bootstrap.min.js">script>
head>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigationspan>
<span class="icon-bar">span>
<span class="icon-bar">span>
button>
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-globe">span>黑马旅游a>
div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">周边游<span class="sr-only">(current)span>a>li>
<li><a href="#">国内游a>li>
<li><a href="#">港澳游a>li>
<li><a href="#">境外游a>li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">其他 <span class="caret">span>a>
<ul class="dropdown-menu">
<li><a href="#">Actiona>li>
<li><a href="#">Another actiona>li>
<li><a href="#">Something else herea>li>
<li role="separator" class="divider">li>
<li><a href="#">Separated linka>li>
<li role="separator" class="divider">li>
<li><a href="#">One more separated linka>li>
ul>
li>
ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入">
div>
<button type="button" class="btn btn-default">搜索button>
form>
div>
div>
nav>
div>
body>
html>
小结
导航条的作用是什么？
方便网页跳转到其他网页。
复制修改即可
组件：缩略图
目标
查询Bootstrap文档使用缩略图
缩略图介绍
通过缩略图组件扩展 Bootstrap的栅格系统，可以很容易地展示栅格样式的图像、视频、文本等内容。
缩略图的类样式
标准缩略图
自定义缩略图
代码
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Templatetitle>
<link href="css/bootstrap.min.css" rel="stylesheet">
head>
<body>
<div class="container">
<h2>缩略图h2>
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/03.jpg">
a>
div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/04.jpg">
a>
div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/05.jpg">
a>
div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/06.jpg">
a>
div>
div>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="img/07.jpg">
<div class="caption">
<h3>海南双飞四天游h3>
<p>一天到晚游泳的鱼p>
<p><a href="#" class="btn btn-primary" role="button">Buttona>
<a href="#" class="btn btn-default" role="button">Buttona>p>
div>
div>
div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="img/07.jpg">
<div class="caption">
<h3>海南双飞四天游h3>
<p>一天到晚游泳的鱼p>
<p><a href="#" class="btn btn-primary" role="button">Buttona>
<a href="#" class="btn btn-default" role="button">Buttona>p>
div>
div>
div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="img/07.jpg">
<div class="caption">
<h3>海南双飞四天游h3>
<p>一天到晚游泳的鱼p>
<p><a href="#" class="btn btn-primary" role="button">Buttona>
<a href="#" class="btn btn-default" role="button">Buttona>p>
div>
div>
div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="img/07.jpg">
<div class="caption">
<h3>海南双飞四天游h3>
<p>一天到晚游泳的鱼p>
<p><a href="#" class="btn btn-primary" role="button">Buttona>
<a href="#" class="btn btn-default" role="button">Buttona>p>
div>
div>
div>
div>
div>
<script src="js/jquery-3.2.1.min.js">script>
<script src="js/bootstrap.min.js">script>
body>
html>
小结
缩略图有哪两种？
-
简单的只有图片， 复制，修改图片的地址
-
自定义的，除了图片还有文字， 复制， 修改图片地址，修改内容
组件：分页组件
目标
查询Bootstrap学习分页组件
作用：为您的网站或应用提供带有展示页码的分页组件。
![[外链图片转存失败(img-vY6luJXd-1565706473369)(/)]](http://img.e-com-net.com/image/info8/232e31b93c6f43d9b07f53ec0b1463c7.jpg){kind=small}
小结
分页组件，复制，修改页数和左右按钮
JavaScript插件：模态框
目标
查询Bootstrap学习JavaScript插件：模态框
模态框概念
模态框（Modal）是覆盖在父窗体上的子窗体,是一个经常使用的组件。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动，一般用于提示信息，确认信息，表单,登录，注册等内容。模态框弹出时其他页面元素不可被选中。
相关属性
模态框案例
点击下面按钮，以模态框形式弹出下面添加联系人表单
![[外链图片转存失败(img-icvmIVJ8-1565706473369)(/)]](http://img.e-com-net.com/image/info8/415bcc03bf4a47d28230653ade345073.jpg){kind=small}
data-target="#myModal"： 呼出指定id的模态框
小结
模态框的类样式是？.modal
按钮呼出模态框：
data-target="#myModal"呼出指定id的模态框
JavaScript插件：轮播图
目标
查询Bootstrap文档创建轮播图
轮播图介绍
Bootstrap的Javascript插件必须要使用到jQuery框架
这个组件用于轮播显示一组图片，类似于旋转木马，页面加载就自动运行，也可以通过点击左右的两个箭头向左或向右翻页。
类样式名
相关的属性
代码
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap模板title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js">script>
<script src="js/bootstrap.min.js">script>
head>
<body>
<h3>轮播图h3>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000" style="width: 60%; margin: auto">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active">li>
<li data-target="#carousel-example-generic" data-slide-to="1">li>
<li data-target="#carousel-example-generic" data-slide-to="2">li>
<li data-target="#carousel-example-generic" data-slide-to="3">li>
ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/01.jpg" alt="...">
<div class="carousel-caption">
第一张
div>
div>
<div class="item">
<img src="img/02.jpg" alt="...">
<div class="carousel-caption">
第二张
div>
div>
<div class="item">
<img src="img/03.jpg" alt="...">
<div class="carousel-caption">
第三张
div>
div>
<div class="item">
<img src="img/04.jpg" alt="...">
<div class="carousel-caption">
第四张
div>
div>
div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true">span>
<span class="sr-only">Previousspan>
a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true">span>
<span class="sr-only">Nextspan>
a>
div>
body>
html>
小结
轮播图三个组成部分：
- carousel-indicators: 小圆圈，指示器
- carousel-inner: 存放要轮流显示的图片
- carousel-control: 左右按钮