解释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>