Java：49-Bootstrap详解

各个方面都自在

已于 2024-06-05 17:02:42 修改

阅读量1.3k

点赞数

分类专栏：笔记文章标签： html

于 2022-04-05 14:35:37 首次发布

本文链接：https://blog.csdn.net/qq_59609098/article/details/123969018

版权

笔记专栏收录该内容

115 篇文章 10 订阅

订阅专栏

本文详细介绍了Bootstrap框架，包括其移动优先设计、浏览器支持、易用性、响应式设计、表格、表单布局、内联布局、控件（如输入框、按钮、复选框等）、图片和下拉菜单组件。展示了如何在不同屏幕尺寸下实现自适应效果。

摘要由CSDN通过智能技术生成

Bootstrap详解

bootstrap简介：

Bootstrap来自 Twitter，是目前最受欢迎的响应式前端框架

Bootstrap是基于 HTML、CSS、JavaScript的，它简洁灵活，使得 Web 开发更加快捷

为什么使用 Bootstrap：

移动设备优先：自 Bootstrap3 起，框架包含了贯穿于整个库移动设备优先的样式

不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中

也就是说，针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件

浏览器支持：所有的主流浏览器都支持 Bootstrap

容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap

响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机

它为开发人员创建接口提供了一个简洁统一的解决方案

它包含了功能强大的内置组件，易于定制

它还提供了基于 Web 的定制

它是开源的

下载与使用：

中文官网：https://www.bootcss.com/

英文官网：http://getbootstrap.com

在这里插入图片描述

小小试一试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拉勾教育</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding:100px">
    
    <h1>Hello,Bootstrap!</h1>
    <button class="btn btn-primary">学习充电</button>
    <!-- btn修改按钮样式，btn-primary按钮颜色样式，好像是背景颜色-->
    <button class="btn btn-success">极速入职</button>
    <!-- class加空格，是多个样式，即.btn 和 .btn-success这两个样式同时修改这个按钮-->

</body>
</html>

Bootstrap的使用：

在使用前说明一下：

Bootstrap就是存放了对应资源的操作和对应样式的封装，所以原来学的标签，可能会有不同结果，甚至有多加的标签操作

且封装了很多资源进行操作

表格：

和之前的表格相比，标签更丰富更加语义化，效果更佳美观

丰富的标签：

/*
<table> 为表格添加基础样式
<thead> 表格标题行的容器元素（<tr>）
<tbody> 表格主体中的表格行的容器元素（<tr>）
<tr> 表格行
<td> 默认的表格单元格。
<th> 特殊的表格单元格，（居中和加粗的效果）。必须在<thead> 内使用。
<caption> 关于表格存储内容的描述或总结 
*/

好看的类样式：

/*
.table 为任意 <table> 添加基本样式 (只有横向分隔线)
.table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) ，隔行变色
.table-bordered 为所有表格的单元格添加边框
.table-hover 在 <tbody> 内的任一行启用鼠标悬停状态，鼠标悬停高亮突出显示
.table-condensed 让表格更加紧凑
*/

情景色类样式：

/*
适合应用在<th>、<tr>，<td>
.active 激活效果（悬停颜色）
.success 表示成功或积极的动作
.info 表示普通的提示信息或动作
.warning 表示警告或需要用户注意
.danger 表示危险或潜在的带来的负面影响的动作
*/

响应式表格：

表格的父元素设置响应式，小于768px，出现边框（在检查里，点击一个像手机符号的图标，就可以进行观察了）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding:30px">
    <table class="table table-responsive"> <!-- 响应式的样式table-responsive-->
        <caption>经营产品大全</caption>
        <thead>
            <tr>
                <th>产品</th>
                <th>付款日期</th>
                <th>状态</th>
            </tr>
        </thead>
        <tbody>
            <tr class="info">
                <!-- info操作元素颜色的样式，好像是背景颜色，下面都是一样的设置对应颜色，可以自己试一下-->
                <td>产品1</td>
                <td>2020-1-1</td>
                <td>待发货</td>
            </tr>
            <tr class="active">
                <td>产品2</td>
                <td>2020-1-2</td>
                <td>已发货</td>
            </tr>
            <tr class="success">
                <td>产品3</td>
                <td>2020-1-3</td>
                <td>未付款</td>
            </tr>
            <tr class="warning">
                <td>产品4</td>
                <td>2020-1-4</td>
                <td>已退货</td>
            </tr>
            <tr class="danger">
                <td>产品5</td>
                <td>2020-1-5</td>
                <td>已退款</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

在这里插入图片描述

表单布局：

默认布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding:100px;">
    <form>
        <div class="form-group"> <!-- form-group代表作用与表单的样式，即内容像表单类似的排列-->
            <label>邮箱</label> <!--label新的标签，自带操作内容的样式-->
            <input type="email" class="form-control" placeholder="请输入邮箱">
            <!-- form-control操作这个框的样式-->
            <!-- 特殊的type，如这个邮箱，有值的情况下，会自带约束-->
        </div>
        <div class="form-group">
            <label>密码</label>
            <input type="passowd" class="form-control" placeholder="请输入密码">
        </div>
        <div class="form-group">
            <button class="btn btn-primary">提交</button>
        </div>
    </form>
</body>
</html>

在这里插入图片描述

内联布局：

让所有表单元素居于一行

注意：当小于768px时，会自动还原成移动端样式（就是上面的默认布局）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding:100px;">
    <form class="form-inline">
        <!-- form-inline使得form-group进行水平排列，但当窗口到一定程度，就失去约束，如宽度小于768px
768px只是一种临界值，当到达一些临界值时，有些标签可能对不同的屏幕有不同的效果-->
        <div class="form-group">
            <label>邮箱</label>
            <input type="email" class="form-control" placeholder="请输入邮箱">
        </div>
        <div class="form-group">
            <label>密码</label>
            <input type="passowd" class="form-control" placeholder="请输入密码">
        </div>
        <div class="form-group">
            <button class="btn btn-primary">提交</button>
        </div>
    </form>
</body>
</html>

表单控件：

输入框：

<form>
    <div class="form-group">
        <label for="">输入框</label>
        <input type="text" class="form-control" placeholder="请输入文本...">
    </div>
</form>

在这里插入图片描述

文本框：

<div class="form-group">
    <label for="">文本框</label>
    <textarea class="form-control" cols="30" rows="5"></textarea>
</div>

在这里插入图片描述

复选框：

checkbox 默认

checkbox-inline 内联

<div class="checkbox"> <!-- checkbox添加复选框的样式-->
    <label>
        <input type="checkbox"> 抽烟
    </label>
</div>
<div class="checkbox">
    <label>
        <input type="checkbox"> 喝酒
    </label>
</div>
    <hr>
<div class="checkbox-inline"><!-- 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">
        <!-- data-toggle="buttons"去掉原生按钮的样式，需要对应js操作出复选框效果-->
        <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>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

在这里插入图片描述

单选框：

<label class="radio"> <!--radio添加按钮的样式-->
    <input type="radio" name="sex"> 男
</label>
<label class="radio">
    <input type="radio" name="sex"> 女
</label>
<hr>
<label class="radio-inline"><!--radio-inline使得按钮水平显示-->
    <input type="radio" name="gender"> 耕
</label>
<label class="radio-inline">
    <input type="radio" name="gender"> 织
</label>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

在这里插入图片描述

单选按钮：

<div class="btn-group" data-toggle="buttons"><!--btn-group操作按钮的样式，像按钮类似的排列-->
    <label class="btn btn-primary">
        <input type="radio" name="gender"> 男
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="gender"> 女
    </label>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding:100px;">
    <form >
        <div class="form-group">
            <label>输入框</label>
            <input type="text" class="form-control" placeholder="请输入文本...">
        </div>

        <div class="form-group">
            <label>文本框</label>
            <textarea class="form-control" cols="30" rows="5"></textarea>
        </div>

        <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>
        <hr>
        <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>
        <hr>

        <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="gender"> 男
        </label>
        <label class="radio-inline">
            <input type="radio" name="gender"> 女
        </label>
        <hr>

        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-primary">
                <input type="radio" name="gender"> 男
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="gender"> 女
            </label>
        </div>
    </form>

    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>


</html>

按钮：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding:100px;">
    <!-- 以下操作，可以根据名称来进行解释-->
    <button class="btn btn-default">默认按钮</button>
    <button class="btn btn-primary">主要按钮</button>
    <button class="btn btn-success">成功按钮</button>
    <button class="btn btn-info">信息按钮</button>
    <button class="btn btn-warning">警告按钮</button>
    <button class="btn btn-danger">危险按钮</button>
    <button class="btn btn-link">链接按钮</button>

    <hr>
    <button class="btn btn-primary btn-lg">超大按钮（高清大屏台式机）</button>
    <button class="btn btn-primary">大按钮（笔记本屏幕）</button>
    <button class="btn btn-primary btn-sm">小按钮（平板电脑）</button>
    <button class="btn btn-primary btn-xs">超小按钮（手机）</button>

    <hr>
    <!--
按钮状态
激活状态：按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）
禁用状态：当您禁用一个按钮时，它的颜色会变淡 50%，并失去渐变
-->
    <button class="btn btn-default">默认按钮</button>
    <button class="btn btn-default active">激活按钮</button>
    <button class="btn btn-default" disabled>禁用按钮</button>
</body>
</html>

在这里插入图片描述

图片：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding: 20px;;">
    <!--
    .img-rounded：添加 border-radius:6px 来获得图片圆角
    .img-circle：添加 border-radius:50% 来让整个图片变成圆形
    .img-thumbnail：添加一些内边距（padding）和一个灰色的边框

    -->
    <img src="img/1.jpg" class="img-rounded" width="33%"> <!--有圆角-->
    <img src="img/1.jpg" class="img-circle" width="33%"> <!--有圆形-->
    <img src="img/1.jpg" class="img-thumbnail" width="33%"> <!--有内边距-->
</body>
</html>

在这里插入图片描述

响应式图片：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding: 20px;;">
    
    <img src="img/1.jpg" class="img-responsive"> 
    <!--img-responsive让图片随着窗口进行大小改变-->
</body>
</html>

下拉菜单组件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding: 30px;">

    <div class="dropdown"> 
        <!--dropdown定义这里面的内容是下拉框
        caret凭空定义一个下拉框小图标的样式
        data-toggle="dropdown"定义值的存在
        dropdown-menu将对应内容隐藏，通过值的存在，来进行下拉
        之所以使用a标签，是因为这里有对应的样式
        -->
        <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="#">24小时导师</a></li>
        </ul>
    </div>

    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!--实际上bootstrap有些也是需要jquery的-->
</body>
</html>

在这里插入图片描述

用法的关键核心

外围容器使用 class="dropdown"包裹

内部点击按钮事件绑定 data-toggle=“dropdown”，即对应值，这里需要对应js，使得菜单显示出来

菜单元素使用 class=“dropdown-menu”

上面一起，使得js可以进行操作，从而实现下拉框

分页组件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding: 20px;">
    
    <ul class="pager"> 
        <!--pager实现将li进行有分页的样式，水平方向有圆弧的格子
        若变成pagination则是水平方向直接的格子
        -->
        <!--下面a标签有对应修饰
        previous若上面的类是pager下，那么就会将这个格子向最左边靠
        而next则是最右边靠
        若是pagination，则这个两个没有进行操作，即没有靠左边或者右边
        -->
        <li class="previous"> <a href="#"> &laquo; </a> </li>
        <!--&laquo一个符号，即类似于<<符号-->
        <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="#">&raquo;</a> </li>
        <!--&raquo一个符号，即类似于>>符号-->
    </ul>

</body>
</html>

在这里插入图片描述

栅格系统：

bootstrap的栅格系统会将整个页面水平方向上平均分成12个小格子

当浏览器大小发生变化的时候，我们可以控制每行的元素占用几个格子，从而达到响应式的效果

在这里插入图片描述

显示屏幕的扩大和缩小，实现如下效果：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<style>
    .a{
        height: 50px;
        border: 1px solid black;
        background-color: #eeeeee;
    }
</style>
<body>
    <!--当你需要12个div时，可以div*12，若加上一个类修改，那么就是div.a*12
    按下回车，就自动帮你创建12个div了
    -->
    <div class="container"> <!--container和row两个样式-->
        <div class="row">
            <!-- col-lg-3当大屏幕时，一个div占3份，一行显示4个div -->
            <!-- col-md-4当中屏幕时，一个div占4份，一行显示3个div -->
            <!-- col-sm-6当小屏幕时，一个div占6份，一行显示2个div -->
            <!-- 超小屏幕时，一个div占12份，一行显示1个div，默认 -->

            <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
            <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
            <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
            <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>

            <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
            <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
            <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
            <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>

            <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
            <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
            <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
            <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
        </div>
    </div>
    <!--这里说明一下，为什么需要用container和row，因为bootstrap的资源里，是这样设置的
    所以背是没用的，就如我们自己设置class一样
    -->
</body>
</html>

缩略图组件：

配合响应式的栅格系统：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
    
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="thumbnail"> 
                    <!--thumbnail让这个图片有一定的大小以及位置-->
                    <img src="img/2.jpg">
                </div>
            </div>

            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="thumbnail">
                    <img src="img/2.jpg">
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="thumbnail">
                    <img src="img/2.jpg">
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="thumbnail">
                    <img src="img/2.jpg">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

自定义内容：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
    
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="thumbnail">
                    <img src="img/2.jpg">
                    <div class="caption"> <!--使得有标题的一些位置，即不那么紧凑-->
                        <h3>视频标题</h3>
                        <p>视频介绍，美女众多...</p>
                        <p>
                            <a href="#" class="btn btn-primary">试看</a>
                            <!--这些按钮的修饰，让该标签变成按钮的样子-->
                            <a href="#" class="btn btn-warning">购买</a>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="thumbnail">
                    <img src="img/2.jpg">
                    <div class="caption">
                        <h3>视频标题</h3>
                        <p>视频介绍，美女众多...</p>
                        <p>
                            <a href="#" class="btn btn-primary">试看</a>
                            <a href="#" class="btn btn-warning">购买</a>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="thumbnail">
                    <img src="img/2.jpg">
                    <div class="caption">
                        <h3>视频标题</h3>
                        <p>视频介绍，美女众多...</p>
                        <p>
                            <a href="#" class="btn btn-primary">试看</a>
                            <a href="#" class="btn btn-warning">购买</a>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="thumbnail">
                    <img src="img/2.jpg">
                    <div class="caption">
                        <h3>视频标题</h3>
                        <p>视频介绍，美女众多...</p>
                        <p>
                            <a href="#" class="btn btn-primary">试看</a>
                            <a href="#" class="btn btn-warning">购买</a>
                        </p>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</body>
</html>

模态框组件：

在这里插入图片描述

data-toggle=“modal” 触发类型：模态框modal

data-target=“#myModal” 触发的节点

data-backdrop=“static” 点击黑灰色背景，不会关闭模态框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding:20px;">
        <!--定义事件data-toggle="modal"作用与模态框
        data-target="#myModal"定义具体操作那个模态框
        -->
    <button class="btn btn-warning" data-toggle="modal" data-target="#myModal">弹框</button>

    <!-- 声明定义模态框组件，样式 -->
    <div class="modal" id="myModal" data-backdrop="static"> 
        <!--data-backdrop="static"点击黑色背景，不关闭模态框-->
        <!-- 窗口声明 -->
        <div class="modal-dialog">
            <!-- 内容声明 -->
            <div class="modal-content">
                <!-- 1.框的标题 -->
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <!--data-dismiss="modal"被这个修饰的标签内容，点击一下关闭弹框-->
                        <!--close修饰x号，即一般是在右上角-->
                        <span>&times;</span><!--&times是好看的x号，;可写可不写-->
                    </button>
                    <h4 class="modal-title">友情提示</h4><!--也是一个修饰-->
                </div>
                <!-- 2.框内信息 -->
                <div class="modal-body">
                    服务器错误，请稍后再试！
                    <hr>
                    <img src="img/1.jpg" width="200px">
                    <hr>
                    <input type="text">
                </div>
                <!-- 3.框的按钮 -->
                <div class="modal-footer">
                    <button class="btn btn-info">确定</button>
                    <button class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>


    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

从上面的例子来说，我们就是操作bootstrap对应封装好的资源（如css，js等）

在这里插入图片描述

案例：

首页轮播大图：

在这里插入图片描述

大小屏幕自动适应,扩大缩小浏览器

滚动数字区点击左右切换图片

左右区域点击切换

默认5秒钟自动切换下一张

最后一张，回到第一张

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拉勾网</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
    <!--class="carousel slide"
        将该元素修饰成一个轮播组件的样式（一般是div，有些标签不可以操作，如p，但有些可以，如a）
        使得可以进行轮播移动，这个必须要，否则轮播不起来，因为没有对应样式切换
        就如动画一样，没有动画，切换不了
        carousel进行图片切换，可以进行第一个图和第三个图的切换，slide动画进行处理
    data-ride="carousel"定义为轮播组件操作，且js会识别，使得自动进行轮播
    实际上无论定不定义，都是对css，js等的识别，然后操作
    所以说每个定义要么是自己有作用，要么就是通过这个来操作其内部内容
    本质上就是js或者css等资源调用


    -->
    <div id="myCarousel" class="carousel slide" data-ride="carousel">

        <!-- 滚动圆点区 -->
        <ol class="carousel-indicators"> 
            <!--class="carousel-indicators"将下面修饰成圆点，并改变位置-->
            <li data-slide-to="0" data-target="#myCarousel"></li>
            <!--data-slide-to="0"不被修饰成圆点的话，默认占位置（没有或者说多或者少，那么自然不会有存在对应的显示），且是1.，后面依次是2.，3.
            data-target="#myCarousel"使得圆点操作到这个轮播容器身上，会根据名次，进行图片区的显示
            这样就可以通过上面的slide修饰，进行动画操作
            -->
            <li data-slide-to="1" data-target="#myCarousel"></li>
            <li data-slide-to="2" data-target="#myCarousel"></li>
            <!--上面的data-target="#myCarousel"操作id的div图片区
   				所以可以写在div外边，写里面是使用他的样式而已-->
        </ol>

        <!-- 图片区 -->
        <div class="carousel-inner">
            <!--class="carousel-inner"将item隐藏起来，可以使用active进行显示-->
            <div class="item active">
                <img src="img/1.jpg">
            </div>
            <div class="item" >
                <img src="img/2.jpg">
            </div>
            <div class="item">
                <img src="img/3.jpg">
            </div>
        </div>
        <!--通过从上到下的位置来进行位置存放，active必须要一个，否则没有开始，但不能是多个，否则识别不了
        这时上下页就没用了，需要点击不包括active修饰的位置圆点，才可进行回位
        -->

        <!-- 左右切换 -->
        <a href="#myCarousel" data-slide="prev" class="carousel-control left">
            <!--class="carousel-control left控制左边的样式（可以进行移动）
            class="glyphicon glyphicon-chevron-left"将内容显示为好看的<图标
            data-slide="prev"到上一个图片
            这样就可以通过上面的slide修饰，进行动画操作
            -->
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a href="#myCarousel" data-slide="next" class="carousel-control right">
              <!--class="carousel-control right控制右边的样式（可以进行移动）
            class="glyphicon glyphicon-chevron-right"将内容显示为好看的>图标
            data-slide="prev"到下一个图片
            这样就可以通过上面的slide修饰，进行动画操作
            -->
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
         <!--上面的href="#myCarousel"操作id的div图片区，所以可以写在div外边，写里面是使用他的样式而已-->
        
    </div>

<!--上面操作的图片都是图片区的图片，所以无论是上下还是点击，都是这三个图片进行移动
如在第一个图片的显示下，按下上一页，就是第三个图片了

实际上一个图占一个窗口，没有设置成active不显示，设置多个，那么都占
-->
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

data 属性解释：

data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置

data-slide-to 来向轮播底部创建一个原始滑动索引，data-slide-to=“2” 将把滑动块移动到一个特定的索引，索引从 0 开始计数

data-ride="carousel"属性用户标记轮播在页面加载时开始动画播放（一般是5秒动画播放一次，即这里是轮播一次）

响应式导航条：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
    
    <!-- 默认的导航条样式 -->
    <div class="navbar navbar-default">
        <!-- 响应式的容器 -->
        <div class="container">
            <!-- 导航条的头部 -->
            <div class="navbar-header">
                <a href="#" class="navbar-brand">老孙科技股份有限公司</a><!--navbar-brand也是样式-->
                <!-- data-toggle="collapse"  数据切换的事件，特效是折叠-->
                <!-- data-target="#nav"  折叠效果的目标是下面的#nav容器-->
                <button class="navbar-toggle" data-toggle="collapse" data-target="#nav">
                    <!--collapse事件（一般这样的事件，基本都是点击事件）
       作用于id的nav，使得折叠的显示，而不是隐藏-->
                    <!--navbar-toggle在一定程度进行隐藏-->
                    <span class="sr-only">111</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">
                <!--导航项的样式
                collapse进行折叠，隐藏
                navbar-collapse，显示导航，到一定程度显示出来，通常与上面的navbar-toggle进行交互-->
                <ul class="nav navbar-nav navbar-right"> 
                    <!--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-camera"></span> 产品</a> </li>
                    <li> <a href="#"> <span class="glyphicon glyphicon-tint"></span> 竞争</a> </li>
                    <li> <a href="#"> <span class="glyphicon glyphicon-earphone"></span> 联系我们</a> 
                    </li>
                    <!--上面四个class是一些将标签进行图标修饰
         与内容一般不冲突（可能会影响位置），就是加上对应图标
                        可以在bootstrap官网里找到-->
                </ul>
            </div>
        </div>
    </div>

    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>