目录
轮播
轮播所使用的类说明
类 | 描述 |
---|---|
.carousel | 创建轮播。 |
.carousel-indicators | 为轮播添加指示器。它们是每张幻灯片底部的小点。 表示轮播中有多少张幻灯片,以及用户当前正在查看哪张幻灯片。 |
.carousel-inner | 将幻灯片添加到轮播。 |
.carousel-item | 规定每张幻灯片的内容。 |
.carousel-control-prev | 向轮播添加一个向左(上一个)按钮,允许用户在幻灯片之间回退。 |
.carousel-control-next | 向轮播添加一个向右(下一个)按钮,允许用户在幻灯片之间前进。 |
.carousel-control-prev-icon | 与 .carousel-control-prev 一起使用,创建“上一个”按钮。 |
.carousel-control-next-icon | 与 .carousel-control-next 一起使用,创建“下一个”按钮。 |
.slide | 从一个项目滑到下一个项目时添加 CSS 过渡和动画效果。 如果您不想要这种效果,请删除此类。 |
创建轮播
实例
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
#carouselExample{
width: 600px;
height: 100px auto;
}
</style>
</head>
<body>
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel" data-interval=3000>
<!-- 轮播指示符 -->
<ol class="carousel-indicators">
<li data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExample" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExample" data-bs-slide-to="2"></li>
</ol>
<!-- 轮播项 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/1.png" class="d-block w-100" alt="Image 1">
</div>
<div class="carousel-item">
<img src="img/7.png" class="d-block w-100" alt="Image 2">
</div>
<div class="carousel-item">
<img src="img/1.png" class="d-block w-100" alt="Image 3">
</div>
</div>
<!-- 左右切换按钮 -->
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</body>
</html>
运行结果
轮播图片上添加描述
要在轮播图片上添加描述文本,你可以在每个 <div class="carousel-item"> 的内部添加一个 <div class="carousel-caption"> 元素。
实例
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
#carouselExample{
width: 600px;
height: 100px auto;
}
</style>
</head>
<body>
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel" data-interval=3000>
<ol class="carousel-indicators">
<li data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExample" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExample" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/1.png" class="d-block w-100" alt="Image 1">
<div class="carousel-caption">
<h5>描述标题</h5>
<p>这是图片1的描述</p>
</div>
</div>
<div class="carousel-item">
<img src="img/7.png" class="d-block w-100" alt="Image 2">
<div class="carousel-caption">
<h5>描述标题</h5>
<p>这是图片2的描述</p>
</div>
</div>
<div class="carousel-item">
<img src="img/1.png" class="d-block w-100" alt="Image 3">
<div class="carousel-caption">
<h5>描述标题</h5>
<p>这是图片3的描述</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</body>
</html>
运行结果
模态框
模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。
如何创建模态框
要创建一个Bootstrap5模态框,需要使用以下步骤:
- 在HTML文档中添加一个触发模态框的按钮。这个按钮可以是任何元素,比如一个普通的按钮或一个链接。
- 创建模态框窗口。我们可以使用<div>标签来创建模态框窗口。给<div>元素添加两个重要的类名:modal 和 fade(使用 .fade 类可以设置模态框弹出或关闭的效果)。同时为<div>元素指定唯一的id属性,这个id属性将会被用于后续的JavaScript代码中。注意,模态框的主体内容应该放在一个<div class="modal-body">元素内。
实例
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-4">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
打开模态框
</button>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- 模态框头部 -->
<div class="modal-header">
<h4 class="modal-title">模态框标题</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- 模态框主体 -->
<div class="modal-body">
<p>这是模态框的内容</p>
</div>
<!-- 模态框底部 -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存更改</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
运行结果
模态框尺寸
要调整模态框的尺寸,可以将 .modal-dialog 类与尺寸类(.modal-sm、.modal-lg、.modal-xl)一同添加到 <div> 元素。
全屏模态
如果你想要一个全屏的模态框,可以添加.modal-fullscreen类到.modal-dialog元素上。这样模态框将会占据整个屏幕。
注意:使用 .modal-fullscreen-*-* 类可以控制在什么尺寸下全屏幕显示:
类 | 描述 | 实例 |
---|---|---|
.modal-fullscreen-sm-down | 576px 以下尺寸全屏幕显示 | 尝试一下 |
.modal-fullscreen-md-down | 768px 以下尺寸全屏幕显示 | 尝试一下 |
.modal-fullscreen-lg-down | 992px 以下尺寸全屏幕显示 | 尝试一下 |
.modal-fullscreen-xl-down | 1200px 以下尺寸全屏幕显示 | 尝试一下 |
.modal-fullscreen-xxl-down | 1400px 以下尺寸全屏幕显示 | 尝试一下 |
实例一
以下是如何为模态框设置全屏模态的示例代码:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-4">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
打开模态框
</button>
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-dialog-centered modal-fullscreen">
<div class="modal-content">
<!-- 模态框头部 -->
<div class="modal-header">
<h4 class="modal-title">模态框标题</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- 模态框主体 -->
<div class="modal-body">
<p>这是模态框的内容</p>
</div>
<!-- 模态框底部 -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存更改</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
在这个示例中,.modal-dialog 元素添加了 .modal-fullscreen 类和 .modal-dialog-centered 类(用于居中显示模态框)。这将使模态框成为一个全屏模态框,并且居中显示在屏幕上。
实例二
以下是如何为模态框设置不同尺寸的示例代码:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-4">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
打开模态框
</button>
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- 模态框头部 -->
<div class="modal-header">
<h4 class="modal-title">模态框标题</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- 模态框主体 -->
<div class="modal-body">
<p>这是模态框的内容</p>
</div>
<!-- 模态框底部 -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存更改</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
在这个示例中,.modal-dialog 类被添加了 .modal-lg 类。这将使模态框变为大型模态框,具有最大宽度为 800px 的样式。可以根据需要选择适当的尺寸类(.modal-sm、.modal-lg、.modal-xl)来调整模态框的大小。
运行结果
模态框居中显示
要让模态框水平和垂直方向都居中显示,可以使用.modal-dialog-centered类。将该类添加到.modal-dialog元素上即可。
实例
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-4">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
打开模态框
</button>
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<!-- 模态框头部 -->
<div class="modal-header">
<h4 class="modal-title">模态框标题</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- 模态框主体 -->
<div class="modal-body">
<p>这是模态框的内容</p>
</div>
<!-- 模态框底部 -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存更改</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
运行结果
模态框滚动条
默认情况下模态框如果包含很多内容,页面会自动生成一个滚动,模态框随着页面的滚动而滚动。
但是,如果我们只想在模态框里头设置一个滚动条,可以使用 .modal-dialog-scrollable 类。
实例
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-4">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
打开模态框
</button>
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<!-- 模态框头部 -->
<div class="modal-header">
<h4 class="modal-title">模态框标题</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- 模态框主体 -->
<div class="modal-body">
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
</div>
<!-- 模态框底部 -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存更改</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
运行结果