极客教程解释Bootstrap中旋转木马插件的用途
Bootstrap是一个免费和开源的工具集，用于创建响应式网站和网络应用。它是最流行的HTML、CSS和JavaScript框架，用于开发响应式、移动优先的网站。它解决了我们曾经遇到的许多问题，包括跨浏览器的兼容性问题。
Carousel是bootstrap的幻灯片组件，广泛用于幻灯片或循环播放HTML文档的不同元素，特别是图像容器或文本。
Bootstrap CDN链接：为了了解bootstrap carousel的用途，我们必须将Bootstrap和jQuery CDN库文件纳入HTML代码。
<!– Bootstrap CSS –>
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css”>
<!– jQuery –>
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js” ></script>
<!– Proper.js –>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js”></script>
<!– Bootstrap JavaScript –>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js”></script>
用途：旋转木马插件的主要用途是实现图片的滑块或幻灯片。包含图片的HTML div也可以包含文本。在本节中，我们将借助Bootstrap旋转木马插件，通过以下步骤制作一个图片幻灯片。
- 创建一个带有 “carousel “类的HTML div元素。如果你想自动播放图片，那么也要给它添加一个 “幻灯片 “类。
- 给div元素一个id “carouselExampleControls”，用按钮来控制幻灯片。
- 添加 “data-ride “属性为 “carousel”，用于触发JavaScript动作。
- 在这个div内创建另一个嵌套的div，类别为 “carousel-inner”。这个div将包含所有的旋转木马元素，除了用于控制旋转木马的按钮。
- 在该div内，创建另一个div “carousel-item”。为默认的旋转木马幻灯片添加 “活动 “类，并添加旋转木马幻灯片的图像和标题。尽可能多地添加你想要的旋转木马项目。
- 将 “carousel-control-prev “和 “carousel-control-next “类分别添加到上一张和下一张幻灯片链接中。
- 为旋转木马的上一个和下一个图标添加 “data-slide “属性为 “prev “和 “next”。
示例:
<!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=1.0">
<!--Bootstrap CSS-->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!--JQUERY, Proper.js and Bootstrap Javascript-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js">
</script>
<style>
img {
display: block;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div id="carouselExampleControls"
class="carousel slide"
data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210831104937/img1.png">
<div class="carousel-caption">
<h3>Red Image</h3>
<p>
Here we can include some
text for the Red Image
</p>
</div>
</div>
<div class="carousel-item">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210831105013/img2-300x200.png">
<div class="carousel-caption">
<h3>Blue Image</h3>
<p>
Here we can include some
text for the Blue Image
</p>
</div>
</div>
<div class="carousel-item">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210831105054/img3-300x200.png">
<div class="carousel-caption">
<h3>Green Image</h3>
<p>
Here we can include some
text for the Green Image
</p>
</div>
</div>
</div>
<a class="carousel-control-prev"
href="#carouselExampleControls"
role="button" data-slide="prev">
<span class="carousel-control-prev-icon"
aria-hidden="true">
</span>
</a>
<a class="carousel-control-next"
href="#carouselExampleControls"
role="button" data-slide="next">
<span class="carousel-control-next-icon"
aria-hidden="true">
</span>
</a>
</div>
</div>
</body>
</html>
输出:
