BootStrap概述（二）

最新推荐文章于 2022-10-09 14:09:16 发布
最新推荐文章于 2022-10-09 14:09:16 发布
阅读量296 收藏 1
点赞数
分类专栏： #BootStrap 文章标签： html 列表 css java javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44861675/article/details/108808555
版权

文章目录

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样式表——排版——列表
a
里面讲述了五种列表：

  • 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
    评论
专栏目录
bootstarp滑块条
weixin_47746653的博客
07-16 1489
拖拽滑块
推荐一款前端利器：Bootstrap Slider
最新发布
gitblog_00077的博客
03-22 529
推荐一款前端利器：Bootstrap Slider 项目地址:https://gitcode.com/seiyria/bootstrap-slider Bootstrap Slider 是一个强大的、高度可定制的滑块插件，基于流行的前端框架 Bootstrap 构建。它提供了丰富的功能，使得在网页上创建交互式的滑动条变得轻而易举。 项目概述 Bootstrap Slider 主要用于创建滑动输入控...
基于Bootstrap的炫酷jQuery slider插件
weixin_30740581的博客
06-23 591
简要教程 这是一款在原生bootstrap slider的基础上制作效果非常炫酷的jQueryslider插件。该slider插件可以自定义slider的颜色、形状、透明度和tooltip等属性，美化的效果非常好。 安装 可以使用npm和bower来安装该slider插件。 npm install bootstrap-slider bower inst...
【前端开发】bootstrap框架：轮播（Carousel）
`雾博客
09-03 4761
Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容 幻灯片 实现轮播，您只需要添加带有该标记的代码即可。不需要使用 data 属性 .slide：动画中的滑动类 .carousel：轮播图类 data-taret：为哪个结构服务 .carousel-indicators：轮播图指标 .caousel-inner：轮播图项目 .carousel-control：轮播图导航 ..
bootstrap滑动条
12-23
bootstrap实现滑动条，代码简单易懂，方便二次开发
Zend Framework教程之Bootstrap类用法概述
10-22
主要介绍了Zend Framework教程之Bootstrap类用法,简单分析了Bootstrap的功能,定义,相关参数与使用方法,需要的朋友可以参考下
bootStrap学习
01-25
**一、BootStrap概述** Bootstrap是由Twitter开发的开源框架，它的目标是提供一套简洁、直观、强大的工具，帮助开发者快速创建美观且功能齐全的网页设计。核心特性包括响应式布局、移动设备优先、易于使用的组件和...
《响应式网页开发实战》教学课件12Bootstrap概述.pdf
06-23
《响应式网页开发实战》教学课件12Bootstrap概述.pdf《响应式网页开发实战》教学课件12Bootstrap概述.pdf《响应式网页开发实战》教学课件12Bootstrap概述.pdf《响应式网页开发实战》教学课件12Bootstrap概述.pdf...
Bootstrap开发资料
01-08
1. **Bootstrap概述**： Bootstrap是由Twitter开发并开源的一款快速、强大且具有高度可定制性的前端框架，它提供了丰富的HTML、CSS和JS组件，简化了网页设计和开发过程。其响应式设计使得网页在不同设备上都能呈现...
Bootstrap离线参考手册
10-06
一、Bootstrap概述 Bootstrap是由Twitter的设计师Mark Otto和Jacob Thornton发起的项目，旨在简化网页设计和开发过程。它包含了一系列预先设计的CSS和JavaScript组件，可以快速创建美观且功能丰富的网站布局。...
lh-bootstrap:使用s6和s6-rc构建可运行Linux映像的工具
05-08
lh-bootstrap：从头开始使用Linux，musl和skarnet.org工具构建磁盘映像 洛朗·贝科特（Laurent Bercot）上次修改时间：2021-01-28 执照 lh-bootstrap是根据。 目标 lh-bootstrap可以构建磁盘映像以与qemu或其他VM仿真器一起使用-并且文件也可以复制到真实硬件中。 该映像包含一个Linux内核和一组小型用户空间工具，例如 ， 和，它们全部与静态链接。 它包括最少数量的必需软件和客户端配置，以使计算机启动，运行（使用作为进程1，使用作为服务管理器）并连接到Internet。 该映像是从头开始构建的：每个软件包都是从源代码编译的。 但是，没有提供用于BUILD机器的工具链和最小的初始开发环境。 见下文。 明确不是目标 lh-bootstrap不是： 发行版。 它所包含的软件将不超过为使最小可用映像启动和运行所必需的软
bootstrap拖动div_Bootstrap 用于分步演示的移动触摸滑块栏
weixin_39866874的博客
12-22 280
HTML导入代码模板：var sliderChanged = function (changeObj) {var selector = 0;var callouts = ['.callout-one','.callout-two','.callout-three','.callout-four'];var newVal = changeObj.value.newValue;var modulus ...
bootstrap-slider插件使用 水平滑动条
StrideBin的博客
09-18 8478
<input id="ex2" type="text" class="span2" value="" data-slider-id="RC" data-slider-min="-10" data-slider-max="50" data-slider-step="1" data-slider-step="1" data-slider-value="[-10
BootStrap3滑动展开功能
复制乔布斯
11-11 1459
滑动展开功能
Bootstrap——列表（无序列表、有序列表、定义列表）、代码（code、pre、kbd、samp、var）、图片（响应式图片、图片缩略图、图片对齐方式）
m0_69034993的博客
10-09 2570
除了CSS3提供的border-radius属性可以实现，在Bootstrap中定义了.img-thumbnail类可以使图片具有圆角且1px边界的边框样式。也可以通过设置max-width：100%，height：auto样式，来实现图片响应式效果。Bootstrap定义了.list-unstyled类样式，使用它可以移除默认的.list-style样式，并且设置左侧填充为0。（2）使用文本类.text-left、.text-center、.text-right，分别实现水平居中、居中和居右对齐。
Bootstrap学习实践笔记（二）
FED_AF的博客
05-19 339
排版、图片、表格
bootstrap（二）
qq_38686150的博客
07-06 162
文件和目录 栅格系统 Bootsrap4.x 的栅格系统是一个以移动端为优的网格系统 基于12列的布局 5种响应式尺寸 （面向不同屏幕设备） 完全使用flexbox 流式布局构建 完全支持响应式标准 具体采用div容器 列和行对齐内容来构建响应式布局 boostrap4.x 提供了 .container 和 congtainer-fiuld两种布局 这两种样式是启用布局栅格系统最基本要素 容器布局可以嵌套 但一般不推荐这么使用 自适应对应的响应式方式如下media 内容排版 使用 h1-h6 可
Bootstrap全部可用类名
Demonre的博客
09-27 5567
文章目录CSS变量属性标题字体列表引用图片代码容器响应式网格布局通用小型设备中型设备大型设备超大型设备表格表单按钮下拉菜单输入自定义控件导航卡片面包屑导航徽章信息提示框进度条多媒体列表组Toast模态框提示框弹出窗口轮播Spinner对齐背景边框显示响应式打印机专用嵌入Flex响应式flex布局定位和布局尺寸与补白响应式字体和文本辅助类作者说明 CSS变量 变量名 值 –blue ...
bootstrap概述
06-03
Bootstrap是一个流行的前端开发框架，它由Twitter开发并开源。它提供了一系列的CSS、JavaScript组件和工具，可以帮助开发者快速构建现代化的响应式网站和Web应用程序。Bootstrap的主要特点包括： 1. 响应式设计：Bootstrap提供了一系列响应式网格系统和CSS类，可以根据不同的设备和屏幕尺寸调整网页布局。 2. CSS组件：Bootstrap提供了一系列的CSS组件，如导航栏、按钮、表格、表单和图片等，可以快速构建Web应用程序的UI界面。 3. JavaScript插件：Bootstrap还提供了一系列的JavaScript插件，如轮播、模态框、弹出框和下拉菜单等，可以帮助开发者快速实现复杂的交互效果。 4. 简单易用：Bootstrap的代码简洁、易于理解，开发者可以快速上手使用。 总之，Bootstrap是一个功能强大、易于使用的前端开发框架，可以大大提高Web应用程序的开发效率。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

雨夜※繁华

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值