BootStrap
1、Bootstrap介绍
什么是bootstrap?
简单，直观，强悍的前端开发框架，让web开发更迅速，简单。来自Twitter，是目前很受欢迎的前端框架之一。
Bootstrap是基于HTML,CSS,Javascript的
特点
移动端设备优先：自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式
响应式设计：采用栅格布局（底层实现原理：媒体查询结合流体布局）
偏UI，综合框架，包含一些常用的UI组件以及一些JS组件
Bootstrap的适用场景？
bootstrap适用于偏展示类的网站或者项目
Bootstrap的使用方法？
资源网站：bootstrap中文网站：http://www.bootcss.com/
使用方法： ①环境搭建（依赖文件的引入）② 静态结构的满足③功能初始化
注意：bootstrap是基于jquery的！！！
2、引入BootStrap文件
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<!--引入js文件-->
<script src="js/jquery-1.12.4.js"/>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="js/bootstrap.min.js"></script>
3、Bootstrap栅格系统
1.容器
流体布局：container-fluid (百分百平铺整个页面)
固定布局：container
固定布局根据浏览器不同分辨率，固定尺寸不同，不同阈值对应的宽度如下：
>=1200 width为1170px
>=992 width为970px
>=768 width为750px
<768 为自适应宽度auto
<div class="container-fluid" style="background-color: skyblue">流体布局容器</div>
<hr>
<div class="container" style="background-color: pink">固体布局容器</div>
效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mNgcf621-1634264813838)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210803092539371.png)]
2、什么是bootstrap栅格系统？
- Bootstrap包含了一个响应式的，移动设备优先的，不固定的网格系统，可以随着设备或者视口大小的增加而适当的扩展到12列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的强大的混合类
- 表示行的class: row
- 表示列的class： 注：("*"可选：1-12之间的任意数字，其它无效)
- col-lg-*:大型设备台式电脑(>=1200)
- col-md-*:中型设备台式电脑(>=992)
- col-sm-*:小型设备平板电脑(>=768)
- col-xs-*:超小设备手机(<768)
列偏移
col-[*]-offset-*
含义：表示在对应的屏幕分辨率下偏移多少个栅格
说明：[*]可选：lg/md/sm/xs
*可选：1-12之间的任意数字(其它数字无效)
<!--列偏移-->
<div class="container">
<div class="row">
<div class="col-md-4" style="background-color: #4cae4c">四列</div>
<div class="col-md-4 col-md-offset-4" style="background-color: #adadad">四列</div>
</div>
</div>
效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XYe9Vfgw-1634264813841)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210803094327720.png)]
列嵌套
规则：嵌套的一行会按照它的父级重新分配网格(即按照其父级宽度进行12个网格平均分配)
<!--列嵌套-->
<div class="container">
<div class="row">
<div class="col-md-4" style="background-color: #4cae4c">4</div>
<div class="col-md-8" style="background-color: #2aabd2">
<!--在8个栅格里嵌套-->
<div class="row">
<div class="col-md-3" style="background-color: #adadad">3</div>
<div class="col-md-3" style="background-color: palevioletred">3</div>
<div class="col-md-3" style="background-color: aquamarine">3</div>
<div class="col-md-3" style="background-color: coral">3</div>
</div>
</div>
</div>
</div>
效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RCQyTzQk-1634264813843)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210803100144272.png)]
列排序
col-[*]-push-*:往后排多少个网格
col-[*]-pull-*: 往前排多少个网格
说明：[*]可选：lg/md/sm/xs
*可选：1-12之间的任意数字(其它数字无效)
<!--列排序-->
<div class="row">
<div class="col-md-4" style="background-color: #b9def0">图片</div>
<div class="col-md-8" style="background-color: #d9534f">文字</div>
</div>
<hr>
<div class="row">
<!--向后偏移8个栅格-->
<div class="col-md-4 col-md-push-8" style="background-color: #b9def0">图片</div>
<!--向前偏移4个栅格-->
<div class="col-md-8 col-md-pull-4" style="background-color: #d9534f">文字</div>
</div>
效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eR3KU95y-1634264813845)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210803101049686.png)]
4、CSS全局样式
1、标题
<h1>我是标题1 h1</h1>
<h2>我是标题2 h2</h2>
<h3>我是标题3 h3</h3>
<h4>我是标题4 h4</h4>
<h5>我是标题5 h5</h5>
<h6>我是标题6 h6</h6>
效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IMLlOC3q-1634264813847)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210803104910518.png)]
2、排版—页面主题
为了凸显某些文本
<p class="lead"></p>
<p>这是第一段内容</p>
<p class="lead">这是第二段内容</p>
效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A8nFeasJ-1634264813848)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210803102729881.png)]
3、排版—对齐方式
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
效果：
4、排版—列表
内联列表
<!--内联列表-->
<ul class="list-inline">
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
<li>西瓜</li>
</ul>
效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yteuq4Ag-1634264813849)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210803103132946.png)]
水平定义列表
<!--水平定义列表-->
<dl class="dl-horizontal">
<dt>水果</dt>
<dd>苹果</dd>
<dd>香蕉</dd>
<dd>葡萄</dd>
<dd>西瓜</dd>
</dl>
效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P3Uj7Adc-1634264813850)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210803103523548.png)]
5、表单
<form action="">
<div class="from-group">
<lable>userName：</lable>
<input type="text" class="form-control" placeholder="Enter one user name">
</div>
<div class="from-group">
<lable>passWord</lable>
<input type="password" class="form-control" placeholder="Please input password">
</div>
</form>
效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lAkiPPBy-1634264813850)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210803110219105.png)]
内联表单
<form action="" class="form-inline">
<form action="" class="form-inline">
<div class="from-group">
<lable>userName：</lable>
<input type="text" class="form-control" placeholder="Enter one user name">
</div><br/>
<div class="from-group">
<lable>passWord：</lable>
<input type="password" class="form-control" placeholder="Please input password">
</div>
</form>
效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0KPjJwoX-1634264813851)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210803110412715.png)]
空间尺寸
大文本框：input-lg
小文本框：input-sm
<form action="" class="form-inline">
<div class="from-group">
<lable>userName：</lable>
<input type="text" class="form-control input-lg" placeholder="大文本框">
</div><br/>
<div class="from-group">
<lable>passWord：</lable>
<input type="password" class="form-control input-sm" placeholder="小文本框">
</div>
</form>
效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GHcWvoBv-1634264813852)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210803110713055.png)]
水平表单
<form action="" class="form-horizontal">
<form action="" class="form-horizontal">
<div class="from-group">
<lable>userName：</lable>
<input type="text" class="form-control input-lg" placeholder="大文本框">
</div><br/>
<div class="from-group">
<lable>passWord：</lable>
<input type="password" class="form-control input-sm" placeholder="小文本框">
</div>
</form>
效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bTxZqaR9-1634264813852)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210803110949928.png)]
6、按钮
BootStrap框架提供了七种样式的按钮风格
<form action="#">
<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>
</form>
效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4O0CRXZT-1634264813853)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210803111957632.png)]
按钮尺寸
大按钮： btn-lg
小按钮：btn-sm
超小按钮：btn-xs
<form action="#">
<button type="button" class="btn btn-default btn-lg">大按钮</button>
<button type="button" class="btn btn-default btn-sm">小按钮</button>
<button type="button" class="btn btn-default btn-xs">超小按钮</button>
</form>
效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vi3c896a-1634264813853)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210803112601433.png)]
7、图片
响应式图片
img-responsive
<!--响应式图片-->
<img src="../images/h.jpg" class="img-responsive">
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BX8bMNr4-1634264813854)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210803113357482.png)]
圆型图片
img-circle
<!--圆型图片-->
<img src="../images/sh.png" class="img-circle">
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MlWgTigu-1634264813855)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210803113633370.png)]
圆角图片
img-rounded
<!--圆角图片-->
<img src="../images/R-C.jpg" class="img-rounded" width="500" height="600">
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o74zl49W-1634264813856)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210803113842731.png)]
圆角边框
img-thumbnail
<!--圆角边框-->
<img src="../images/h.jpg" class="img-thumbnail" width="500" height="600">
8、字体图标
Bootstrap提供了250多个来自Glyphicon Halfings的字体图标，其作用在内联元素上
<span class="glyphicon glyphicon-search"></span>
<div class="container">
<div class="row text-center">
<div class="col-xs-3">
<!--微信-->
<span class="glyphicon glyphicon-comment"></span>
</div>
<div class="col-xs-3">
<!--通讯录-->
<span class="glyphicon glyphicon-list-alt"></span>
</div>
<div class="col-xs-3">
<!--搜索-->
<span class="glyphicon glyphicon-search"></span>
</div>
<div class="col-xs-3">
<!--用户-->
<span class="glyphicon glyphicon-user"></span>
</div>
</div>
</div>
效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J8RtVG9r-1634264813856)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210805091554550.png)]
9、基本下拉菜单
<div class="dropdown">
<button class="btn btn-primary" data-toggle="dropdown">
请选择 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="active"><a href="#">咖啡</a></li>
<li class="divider"><a href="#"></a></li>
<li><a href="">冰红茶</a></li>
<li class="divider"><a href="#"></a></li>
<li><a href="">绿茶</a></li>
<li class="divider"><a href="#"></a></li>
<li><a href="">奶茶</a></li>
</ul>
</div>
10、分离式下拉菜单
<div class="container">
<div class="btn-group">
<button type="button" class="btn btn-success">个人中心</button>
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="">我的淘宝</a></li>
<li class="divider"><a href=""></a></li>
<li><a href="">我的京东</a></li>
</ul>
</div>
</div>
11、输入框组件
文本
<div class="container">
<div class="input-group">
<input type="search" class="form-control" placeholder="请输入您要搜索的内容">
<span class="input-group-addon">百度一下</span>
</div>
</div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QDbVYW7E-1634264813857)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210805102456304.png)]
按钮
<!--按钮-->
<div class="input-group">
<input type="search" class="form-control" placeholder="请输入您要搜索的内容">
<span class="input-group-btn">
<button class="btn btn-primary">百度一下</button>
</span>
</div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TUuLkbo5-1634264813858)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210805102834557.png)]
12、导航组件
选项卡导航
<!--选项卡导航-->
<div class="container">
<ul class="nav nav-tabs">
<li><a href="">首页</a></li>
<li><a href="">淘宝</a></li>
<li><a href="">京东</a></li>
<li><a href="">天猫</a></li>
</ul>
</div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jOwyoWEH-1634264813859)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210805105457472.png)]
胶囊导航
<!--胶囊导航-->
<div class="container">
<ul class="nav nav-pills">
<li><a href="">首页</a></li>
<li><a href="">淘宝</a></li>
<li><a href="">京东</a></li>
<li><a href="">天猫</a></li>
</ul>
</div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mivIdY8c-1634264813860)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210805105731596.png)]
自适应导航
<div class="container">
<ul class="nav nav-pills nav-justified">
<li><a href="">首页</a></li>
<li><a href="">淘宝</a></li>
<li><a href="">京东</a></li>
<li><a href="">天猫</a></li>
</ul>
</div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6Drn5td4-1634264813860)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210805110056109.png)]
下拉菜单导航
<!--下拉菜单导航-->
<div class="container">
<ul class="nav nav-pills nav-justified">
<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">个人中心
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="">地址管理</a></li>
<li><a href="">关于我们</a></li>
<li><a href="">联系卖家</a></li>
<li><a href="">退换货</a></li>
</ul>
</li>
</ul>
</div>
导航条
<!--导航条-->
<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li><a href="">淘宝</a></li>
<li><a href="">天猫</a></li>
<li><a href="">京东</a></li>
<li><a href="">智联</a></li>
</ul>
</nav>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n9z83BPg-1634264813861)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210805115243999.png)]
13、分页组件
默认分页
<!-- 默认分页 -->
<div class="container">
<ul class="pagination">
<li><a href="">«</a></li>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">»</a></li>
</ul>
</div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-toOKUaID-1634264813862)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210807090845385.png)]
翻页效果
<!-- 翻页效果 -->
<div class="container">
<ul class="pager">
<li><a href="">首页</a></li>
<li><a href="">上一页</a></li>
<li><a href="">下一页</a></li>
<li><a href="">尾页</a></li>
</ul>
</div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MTLH02Kx-1634264813862)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210807091344974.png)]
14、缩略图组件
<!-- 缩略图 -->
<div class="container">
<div class="row">
<div class="col-md-3 col-xs-6">
<a href="" class="thumbnail">
<img src="images/b.png" alt="">
<div class="caption">
<h3>春天来了</h3>
<p>此处省略一万字</p>
<p><a href="" class="btn btn-primary" role="button">查看</a></p>
</div>
</a>
</div>
<div class="col-md-3 col-xs-6">
<a href="" class="thumbnail">
<img src="images/a.png" alt="">
<div class="caption">
<h3>夏天来了</h3>
<p>此处省略一万字</p>
<p><a href="" class="btn btn-primary" role="button">查看</a></p>
</div>
</a>
</div>
<div class="col-md-3 col-xs-6">
<a href="" class="thumbnail">
<img src="images/c.png" alt="">
<div class="caption">
<h3>秋天来了</h3>
<p>此处省略一万字</p>
<p><a href="" class="btn btn-primary" role="button">查看</a></p>
</div>
</a>
</div>
<div class="col-md-3 col-xs-6">
<a href="" class="thumbnail">
<img src="images/d.png" alt="">
<div class="caption">
<h3>冬天来了</h3>
<p>此处省略一万字</p>
<p><a href="" class="btn btn-primary" role="button">查看</a></p>
</div>
</a>
</div>
</div>
</div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qZoSEUNu-1634264813863)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210807095820791.png)]
15、媒体对象
<!-- 媒体对象 -->
<div class="media">
<div class="media-left">
<img class="media-object" src="images/a.png" width="180" height="100">
</div>
<div class="media-body">
<h4 class="media-heading">《改变的力量：六力理论助你成功》</h4>
<p>"六力理论"，是作者......</p>
<small>5分钟前/股市</small>
<small style="margin-left: 70%; color: gold;">评论|分享</small>
</div>
</div>
<div class="media">
<div class="media-left">
<img class="media-object" src="images/b.png" width="180" height="100">
</div>
<div class="media-body">
<h4 class="media-heading">《改变的力量：六力理论助你成功》</h4>
<p>"六力理论"，是作者......</p>
<small>5分钟前/股市</small>
<small style="margin-left: 70%; color: gold;">评论|分享</small>
</div>
</div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-67Ka6CJP-1634264813863)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210807102148354.png)]
16、列表组组件
<!-- 列表组 -->
<div class="container">
<ul class="list-group">
<li class="list-group-item">
郭晶晶跳水夺冠了！
<span class="badge">99+</span>
</li>
<li class="list-group-item">
姚明带领男篮进入八强！
<span class="badge">99+</span>
</li>
<li class="list-group-item">
苏炳添9.83破亚洲纪录！
<span class="badge">99+</span>
</li>
<li class="list-group-item">
杨倩获得首金！
<span class="badge">99+</span>
</li>
</ul>
</div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Tou6CESh-1634264813864)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210807102604911.png)]
JavaScript插件
模态框
<div class="modal fade" id="myModal"><!-- fade 关闭和隐藏的样式 -->
<div class="modal-dialog"><!-- 背景色 灰色 -->
<div class="modal-content"><!-- 内容放在 modal-content -->
<div class="modal-header">
<h4 class="modal-title">模态框的标题</h4>
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
<p>这是主题内容区域</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">关闭</button>
<button class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RyHjtStr-1634264813864)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210809142942867.png)]
通过按钮触发模态框
<!-- 淡入淡出
模态框需要激活才能生效
data-dismiss理解为click事件
-->
<div class="modal fade" id="myModal"><!-- fade 关闭和隐藏的样式 -->
<div class="modal-dialog"><!-- 背景色 灰色 -->
<div class="modal-content"><!-- 内容放在 modal-content -->
<div class="modal-header">
<h4 class="modal-title">模态框的标题</h4>
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
<p>这是主题内容区域</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">关闭</button>
<button class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<!--
data-toggle="modal" 触发的插件为模态框
-->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
点击此处切换模态框
</button>
<a href="#myModal" class="btn btn-warning" role="button" data-toggle="modal">
点击链接切换模态框
</a>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-THJx8lXk-1634264813865)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210809144829222.png)]
轮播图
<div id="aaa" class="carousel slide" data-ride="carousel">
<!-- 圆圈指示符 -->
<ol class="carousel-indicators">
<li class="active" data-targer="#aaa" data-slide-to="0"></li>
<li data-target="#aaa" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/banner1.jpg" width="100%">
</div>
<div class="item">
<img src="img/banner2.jpg" width="100%">
</div>
</div>
<a href="#aaa" data-slide="prev" class="left carousel-control">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#aaa" data-slide="next" class="right carousel-control">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fMBnhIGk-1634264813865)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210809161133059.png)]
`
[外链图片转存中…(img-THJx8lXk-1634264813865)]
轮播图
<div id="aaa" class="carousel slide" data-ride="carousel">
<!-- 圆圈指示符 -->
<ol class="carousel-indicators">
<li class="active" data-targer="#aaa" data-slide-to="0"></li>
<li data-target="#aaa" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/banner1.jpg" width="100%">
</div>
<div class="item">
<img src="img/banner2.jpg" width="100%">
</div>
</div>
<a href="#aaa" data-slide="prev" class="left carousel-control">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#aaa" data-slide="next" class="right carousel-control">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
[外链图片转存中…(img-fMBnhIGk-1634264813865)]