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="">&laquo;</a></li>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">&raquo;</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>&times;</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>&times;</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)]