BootStrap概述（二）

最新推荐文章于 2022-10-09 14:09:16 发布

雨夜※繁华

最新推荐文章于 2022-10-09 14:09:16 发布

阅读量296

点赞数

分类专栏： #BootStrap 文章标签： html 列表 css java javascript

本文链接：https://blog.csdn.net/qq_44861675/article/details/108808555

版权

#BootStrap 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。另外还包含了针对打印机显示或隐藏内容的工具类。
有针对性的使用这类工具类，从而避免为同一个网站创建完全不同的版本。相反，通过使用这些工具类可以在不同设备上提供不同的展现形式。

1.1、可用的类

通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。
图解：

在这里插入图片描述
从 v3.2.0 版本起，形如 .visible-*-* 的类针对每种屏幕大小都有了三种变体，每个针对 CSS 中不同的 display 属性，列表如下：

因此，以超小屏幕（xs）为例，可用的 .visible-*-* 类是：.visible-xs-block、.visible-xs-inline 和 .visible-xs-inline-block。

.visible-xs、.visible-sm、.visible-md 和 .visible-lg 类也同时存在。但是从 v3.2.0 版本开始不再建议使用。除了 <table> 相关的元素的特殊情况外，它们与 .visible-*-block 大体相同。

测试代码：

1、没加上面的响应式工具时：

<div class="container">
    <div class="row">
        <div class="col-4" style="border: 1px solid red">111111</div>
        <div class="col-4" style="border: 1px solid red">222222</div>
        <div class="col-4" style="border: 1px solid red">333333</div>
    </div>
</div>

在这里插入图片描述
缩小：

2、需求：在小屏幕下隐藏222222，大屏幕则显示
本来想着可用使用的，但是在查询了以下，发现上面的属性已经被取代了：
在这里插入图片描述
故编写代码为：

 <!--需求：在小屏幕下隐藏222222，大屏幕则显示-->
        <div class="col-4 " style="border: 1px solid red" >111111</div>
        <div class="col-4 d-none d-lg-block " style="border: 1px solid red">222222</div><!--只在lg上显示-->
        <div class="col-4" style="border: 1px solid red">333333</div>

lg大小的屏幕
在这里插入图片描述
现在缩小：

222222被隐藏。

1.2、打印类

和常规的响应式类一样，使用下面的类可以针对打印机隐藏或显示某些内容。
在这里插入图片描述
.visible-print 类也是存在的，但是从 v3.2.0 版本开始不建议使用。它与 .visible-print-block 类大致相同，除了 <table> 相关元素的特殊情况外。

2、列表

打开官方文档，点击全局CSS样式表——排版——列表

里面讲述了五种列表：

1、无序列表

<ul>
  <li>...</li>
</ul>

2、有序列表

<ol>
  <li>...</li>
</ol>

3、无样式列表

<ul class="list-unstyled">
  <li>...</li>
</ul>

4、内联列表
我们只需要关注内联列表，它使用了BootStrap定义的样式，使得列表排列在一行上。

测试代码：

<body>
<ul class="list-inline">
    <li>aa</li>
    <li>bb</li>
    <li>cc</li>
</ul>

</body>

预览发现没有生效：在这里插入图片描述
查看以下源代码：

在这里插入图片描述
无效，因为BootStrap4里面list-inline的样式定义和list-unstyle一样。根本没有设置到display: inline-block;

我们注意到了list-inline-item是使用了display: inline-block;，于是我们可用：

<ul>
    <li class="list-inline-item">aa</li>
    <li class="list-inline-item">bb</li>
    <li class="list-inline-item">cc</li>
</ul>

在这里插入图片描述

5、描述
带有描述的短语列表。

3、按钮

3.1、可作为按钮使用的标签或元素

BootStrap里面添加了按钮的样式，任意的元素使用了该样式都会称为一个按钮。但是我们一般为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。

注意事项

3.2、相关的类样式（预定义样式）

使用下面列出的类可以快速创建一个带有预定义样式的按钮。
在这里插入图片描述
我们的测试代码：

<a class="btn" href="#">默认按钮样式default</a><!-- 没有btn-default-->
<a class="btn btn-success" href="#">按钮样式Success</a>
<a class="btn btn-primary" href="#">按钮样式Primary</a>
<a class="btn btn-danger" href="#">按钮样式danger</a>
<a class="btn btn-warning" href="#">按钮样式warning</a>
<a class="btn btn-info" href="#">按钮样式info</a>
<a  href="#">未加按钮普通连接</a>

在这里插入图片描述
批注：

3.3、按钮的大小

需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。
我查询了以下stackflover，发现了btn-xs又被去除了。
在这里插入图片描述

于是我们只能尝试如下代码：

<a class="btn" href="#">默认按钮样式default(正常)</a>
<a class="btn btn-success btn-lg" href="#">按钮样式Success(btn-lg)</a>
<a class="btn btn-primary btn-sm" href="#">按钮样式Primary(btn-sm)</a>
<a class="btn btn-danger btn-sm" href="#">按钮样式danger(btn-sm)</a>
<a class="btn btn-warning" href="#">按钮样式warning(正常)</a>
<a class="btn btn-info" href="#">按钮样式info(正常)</a>
<a  href="#">未加按钮普通连接(正常)</a>

在这里插入图片描述

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

<!--拉伸为块级元素-->
<button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">（块级元素）Block level button</button>

在这里插入图片描述

3.4、激活状态

当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。对于 <button> 元素，是通过 :active 状态实现的。对于 <a> 元素，是通过 .active 类实现的。然而，你还可以将 .active 应用到 <button> 上（包含 aria-pressed="true" 属性)），并通过编程的方式使其处于激活状态。

<a class="btn btn-success btn-lg active" href="#">按钮样式Success(btn-lg,active)</a>

在这里插入图片描述

3.5、禁用属性

通过为按钮的背景设置 opacity 属性就可以呈现出无法点击的效果。

为 <button> 元素添加 disabled 属性，使其表现出禁用状态。

<a class="btn btn-primary btn-sm" href="#" disabled="disabled">按钮样式Primary(btn-sm,disable只对按钮生效)</a>
<a class="btn btn-danger btn-sm" href="#">按钮样式danger(btn-sm)</a>
<a class="btn btn-warning" href="#">按钮样式warning(正常)</a>
<a class="btn btn-info" href="#">按钮样式info(正常)</a>
<a  href="#">未加按钮普通连接(正常)</a>

<!--拉伸为块级元素-->
<button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">（块级元素）Block level button</button>

<!--禁用-->
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button（disabled生效）</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

在这里插入图片描述
看官方文档给出的一个说明

要向将disabled用在<a>上，需要添加role="button"

<!--禁用-->
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button（disabled生效）</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>


<!--要向将disabled用在`<a>`上，需要添加`role="button"`-->
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

在这里插入图片描述

4、导航条

4.1、导航条是什么

导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。
样式：在这里插入图片描述
官方文档的一些解释：

两端对齐的导航条导航链接已经被弃用了。

4.2、使用导航条

我们找到BootStrap文档说明——组件——导航条复制里面的代码，进行稍微的修改：

官方源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=4,user-scalable=no">
    <title>按钮的尺寸大小</title>
    <!-- Bootstrap -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery-1.12.0.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <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 navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
</body>
</html>

由于使用IDEA导入的BootStrap是最新的5.0版本，很多的特效性都被修改了。我不得不将其替换为BootStrap3.3.7版本，这才能够正常的显示上面的实例代码

5.0版本没有了form-inline的样式，而且在使用nav标签的时候必须添加一些属性如图所示：

下面我们进行注释和修改：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=4,user-scalable=no">
    <title>导航条</title>
    <!-- Bootstrap -->
    <link href="../css/bootstrap3.37.css" rel="stylesheet">
    <script src="../js/jquery-1.12.0.min.js"></script>
    <script src="../js/bootstrap3.37.js"></script>
</head>
<body>
<!--导航条的根标签，navbar-default表示默认的导航条格式-->
<nav class="navbar  navbar-default">
    <!--BootStrap的容器-->
    <div class="container-fluid">
        <!--响应式开发的时候，缩小屏幕，变成一个汉堡按钮，将选项都合并为一个按钮，点击按钮则显示出来 -->
        <div class="navbar-header">
            <!--折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。
            这里是data-toggle,data-target;
            第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，
            指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。
            这些会切换为 .nav-collapse <div> 中的元素。-->
            <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 navigation</span><!--阅读器模式，触摸时会朗读出来。-->
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!--品牌标签，我们可更新为其他-->
            <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- 需要折叠的内容都必须放在这里，放在一个类样式含有：collapse,navbar-collapse的div里面 -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <!--搜索栏，是一个表格，位置是navbar-left，左对齐-->
            <!--导航栏中的表单不是使用 Bootstrap 表单 章节中所讲到的默认的 class，
            它是使用 .navbar-form class。这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为。
            使用对齐方式选项（这将在组件对齐方式部分进行详细讲解）来决定导航栏中的内容放置在哪里。-->
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>

            <!--另外一个无序列表，显示更多的选项-->
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!--要折叠的div内容-->
    </div><!-- /.container-fluid -->
</nav>
</body>
</html>

在将BootStrap替换为3.3.7以后能够正常的显示了：
在这里插入图片描述
下面我们修改为自己想要的样式：

<nav class="navbar navbar-inverse ">黑色的背景，对默认的样式反转。这个属性在5.0版本，没有，而是改为navbar-dark
<form class="navbar-form navbar-left">改为右对齐，<form class="navbar-form navbar-right">
最后的那个无序列表<ul>删除

得到：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=4,user-scalable=no">
    <title>导航条</title>
    <!-- Bootstrap -->
    <link href="../css/bootstrap3.37.css" rel="stylesheet">
    <script src="../js/jquery-1.12.0.min.js"></script>
    <script src="../js/bootstrap3.37.js"></script>
</head>
<body>
<!--导航条的根标签，navbar-default表示默认的导航条格式-->
<nav class="navbar  navbar-inverse "><!--使用反转背景样式导航栏-->

    <div class="container-fluid">
       
            <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 navigation</span><!--阅读器模式，触摸时会朗读出来。-->
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!--品牌标签，我们可更新为其他-->
            <a class="navbar-brand" href="#">品牌图片</a>
        </div>

        <!-- 需要折叠的内容都必须放在这里，放在一个类样式含有：collapse,navbar-collapse的div里面 -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <!--激活状态的link-->
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
 
            <form class="navbar-form navbar-right">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </div><!--要折叠的div内容-->
    </div><!-- /.container-fluid -->
</nav>
</body>
</html>

效果图：
在这里插入图片描述
缩放尺寸，会看见汉堡按钮

在这里插入图片描述

内容都被折叠起来了。

在这里插入图片描述

4.2、导航条中的文本

如果需要在导航中包含文本字符串，请使用 class .navbar-text。这通常与 <p> 标签一起使用，确保适当的前导和颜色。
在上面的代码中添加如下：
在这里插入图片描述
此时我们打开：

4.3、导航条中的按钮

您可以使用 class .navbar-btn 向不在 <form> 中的 <button> 元素添加按钮，按钮在导航栏上垂直居中。.navbar-btn 可被使用在 <a> 和 <input> 元素上。

不要在 .navbar-nav 内的 <a> 元素上使用 .navbar-btn，因为它不是标准的 button class。

<button type="button" class="btn btn-default navbar-btn">
            导航栏按钮
        </button>

在这里插入图片描述

4.4、导航条的组件对齐

通过添加 .navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐。两个类都会通过 CSS 设置特定方向的浮动样式。例如，要对齐导航链接，就要把它们放在个分开的、应用了工具类的 <ul> 标签里。

这些类是 .pull-left 和 .pull-right 的 mixin 版本，但是他们被限定在了媒体查询（media query）中，这样可以更容易的在各种尺寸的屏幕上处理导航条组件。

相关注意事项
在这里插入图片描述

1、固定在顶部
添加 .navbar-fixed-top 类可以让导航条固定在顶部，还可包含一个 .container 或 .container-fluid 容器，从而让导航条居中，并在两侧添加内补（padding）。

<nav class="navbar  navbar-inverse navbar-fixed-top ">

使用注意：

2、固定在底部
添加 .navbar-fixed-bottom 类可以让导航条固定在底部，并且还可以包含一个 .container 或 .container-fluid 容器，从而让导航条居中，并在两侧添加内补（padding）。

注意：

3、静止在顶部
通过添加 .navbar-static-top 类即可创建一个与页面等宽度的导航条，它会随着页面向下滚动而消失。还可以包含一个 .container 或 .container-fluid 容器，用于将导航条居中对齐并在两侧添加内补（padding）。

与 .navbar-fixed-* 类不同的是，你不用给 body 添加任何内补（padding）。

5、JavaScript插件：轮播插件（Carousel）

5.1、轮播图是啥？

Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。

如果您想要单独引用该插件的功能，那么您需要引用 carousel.js。或者，正如 Bootstrap 插件概览一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

5.2、轮播图用法和实例代码

实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=4,user-scalable=no">
    <title>导航条</title>
    <!-- Bootstrap -->
    <link href="../css/bootstrap3.37.css" rel="stylesheet">
    <script src="../js/jquery-1.12.0.min.js"></script>
    <script src="../js/bootstrap3.37.js"></script>
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- 轮播（Carousel）指标 -->
    <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>
    </ol>

    <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="../image/1.jpg">
            <div class="carousel-caption">
               标题1
            </div>
        </div>
        <div class="item">
            <img src="../image/2.jpg" >
            <div class="carousel-caption">
                对应的标题2
            </div>
        </div>
        <div class="item">
            <img src="../image/2.jpg" >
            <div class="carousel-caption">
                对应的标题3
            </div>
        </div>
        <div class="item">
            <img src="../image/3.jpg" >
            <div class="carousel-caption">
                对应的标题4
            </div>
        </div>
        <div class="item">
            <img src="../image/5.jpg"  >
            <div class="carousel-caption">
                对应的标题5
            </div>
        </div>
        ...
    </div>

    <!-- 轮播（Carousel）导航，控制端，左边的按钮 -->
    <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">Previous</span>
    </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">Next</span>
    </a>
</div>
</body>
</html>

效果：
在这里插入图片描述

通过 data 属性：使用 data 属性可以很容易控制轮播（Carousel）的位置。

属性 data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。
使用 data-slide-to 来向轮播传递一个原始滑动索引，data-slide-to=“2” 将把滑块移动到一个特定的索引，索引从 0 开始计数。
data-ride=“carousel” 属性用于标记轮播在页面加载时就开始动画播放。
通过 JavaScript：轮播（Carousel）可通过 JavaScript 手动调用，如下所示：
$(’.carousel’).carousel()

在这里插入图片描述

5.3、轮播图中的注意事项

使用多个轮播图的时候，请注意修改其id，因为id不允许相同，如果相同，会导致先设置的轮播图生效而后设置的轮播图无法正常工作。
在这里插入图片描述
修改了id，后面相关的书签也要修改：

5.4、轮播图中的标题（可选）

您可以通过 .item 内的 .carousel-caption 元素向幻灯片添加标题。只需要在该处放置任何可选的 HTML 即可，它会自动对齐并格式化。
如：

<div class="item">
            <img src="../image/5.jpg"  >
            <div class="carousel-caption">
                对应的标题5
            </div>

5.5、设置轮播定时

在这里插入图片描述

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">

5.6、轮播中的一些方法

在这里插入图片描述

上述轮播资料参考自菜鸟教程和BootStrap官方文档。

雨夜※繁华

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
BootStrap概述（二）

文章目录1、响应式工具1.1、可用的类1.2、打印类2、列表3、按钮3.1、可作为按钮使用的标签或元素3.2、相关的类样式（预定义样式）3.3、按钮的大小3.4、激活状态3.5、禁用属性4、导航条4.1、导航条是什么4.2、使用导航条4.2、导航条中的文本4.3、导航条中的按钮4.4、导航条的组件对齐5、JavaScript插件：轮播插件（Carousel）5.1、轮播图是啥？5.2、轮播图用法和实例代码5.3、轮播图中的注意事项5.4、轮播图中的标题（可选）5.5、设置轮播定时5.6、轮播中的一些方法
复制链接

扫一扫