幻灯片没有移动 Bootstrap

Question

我刚开始使用 bootstrap，我正在尝试使用旋转木马幻灯片，我正在添加按钮以及自动幻灯片。我在我的代码中实现了 bootstrap 旋转木马幻灯片，但它就是不动。我按下按钮，它仍然不动。我不知道我做错了什么。

我刚刚编辑了添加整个脚本的代码，我面临的问题是在推荐部分...

这是我的代码；

 <!DOCTYPE html>
    <html lang="en">
      <head>
        <!-- Required meta tags -->
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
        <title>Tindog</title>
    
        <!-- Google Fonts -->
    
        <link
          href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;900&family=Ubuntu:wght@300;400;700&display=swap"
          rel="stylesheet"
        />
    
        <!-- Bootstrap CSS -->
        <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
          integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
          crossorigin="anonymous"
        />
    
        <!-- CSS StyleSheets -->
    
        <link rel="stylesheet" href="css/styles.css" />
    
        <!-- Font Awesome Icons -->
    
        <script
          src="https://kit.fontawesome.com/40d4d3ba0c.js"
          crossorigin="anonymous"
        ></script>
      </head>
      <body>
        <section id="title">
          <!-- Nav Bar -->
    
          <div class="container-fluid">
            <nav class="navbar navbar-expand-lg navbar-dark">
              <a class="navbar-brand" href="">tindog</a>
              <button
                class="navbar-toggler"
                type="button"
                data-toggle="collapse"
                data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent"
                aria-expanded="false"
                aria-label="Toggle navigation"
              >
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto">
                  <li class="nav-item">
                    <a class="nav-link" href="">Contact</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="">Pricing</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="">Download</a>
                  </li>
                </ul>
              </div>
            </nav>
    
            <!-- Title -->
    
            <div class="row">
              <div class="col-lg-6">
                <h1>Meet new and interesting dogs nearby.</h1>
                <button type="button" class="btn btn-dark btn-lg download-button">
                  <i class="fab fa-apple"></i> Download
                </button>
                <button
                  type="button"
                  class="btn btn-outline-light btn-lg download-button"
                >
                  <i class="fab fa-google-play"></i>
                  Download
                </button>
              </div>
    
              <div class="col-lg-6">
                <img
                  class="title-image"
                  src="images/iphone6.png"
                  alt="iphone-mockup"
                />
              </div>
            </div>
          </div>
        </section>
    
        <!-- Features -->
    
        <section id="features">
          <div class="row">
            <div class="feature-box col-lg-4">
              <i class="icon fas fa-check-circle fa-4x"></i>
              <h3>Easy to use.</h3>
              <p>So easy to use, even your dog could do it.</p>
            </div>
            <div class="feature-box col-lg-4">
              <i class="icon fas fa-bullseye fa-4x"></i>
              <h3>Elite Clientele</h3>
              <p>We have all the dogs, the greatest dogs.</p>
            </div>
            <div class="feature-box col-lg-4">
              <i class="icon fas fa-heart fa-4x"></i>
              <h3>Guaranteed to work</h3>
              <p>Find the love of your dog's life or get your money back.</p>
            </div>
          </div>
        </section>
    
        <!-- Testimonials -->
    
        <section id="testimonials">
          <div id="carouselControls" class="carousel slide" data-bs-ride="false">
            <div class="carousel-inner">
              <div class="carousel-item active">
                <h2>
                  I no longer have to sniff other dogs for love. I've found the
                  hottest Corgi on TinDog. Woof.
                </h2>
                <img
                  class="testimonial-img"
                  src="images/dog-img.jpg"
                  alt="dog-profile"
                />
                <em>Pebbles, New York</em>
              </div>
              <div class="carousel-item">
                <h2 class="testimonial-text">
                  My dog used to be so lonely, but with the TinDog's help, He has
                  found the love of his life. I think
                </h2>
                <img
                  src="images/lady-img.jpg"
                  alt="lady-profile"
                  class="testimonial-img"
                />
                <em>Beverly, illinois</em>
              </div>
            </div>
            <button
              class="carousel-control-prev"
              type="button"
              data-bs-target="#carouselControls"
              data-bs-slide="prev"
            >
              <span class="carousel-control-prev-icon"></span>
            </button>
            <button
              class="carousel-control-next"
              type="button"
              data-bs-target="#carouselControls"
              data-bs-slide="next"
            >
              <span class="carousel-control-next-icon"></span>
            </button>
          </div>
        </section>
    
        <!-- Press -->
    
        <section id="press">
          <img class="press-img" src="images/TechCrunch.png" alt="tc-logo" />
          <img class="press-img" src="images/tnw.png" alt="tnw-logo" />
          <img
            class="press-img"
            src="images/bizinsider.png"
            alt="biz-insider-logo"
          />
          <img class="press-img" src="images/mashable.png" alt="mashable-logo" />
        </section>
    
        <!-- Pricing -->
    
        <section id="pricing">
          <h2>A Plan for Every Dog's Needs</h2>
          <p>Simple and affordable price plans for you and your dog.</p>
    
          <h3>Chihuahua</h3>
          <h2>Free</h2>
          <p>5 Matches Per Day</p>
          <p>10 Messages Per Day</p>
          <p>Unlimited App Usage</p>
          <button class="button">Sign Up</button>
    
          <h3>Labrador</h3>
          <h2> / mo</h2>
          <p>Unlimited Matches</p>
          <p>Unlimited Messages</p>
          <p>Unlimited App Usage</p>
          <button class="button">Sign Up</button>
    
          <h3>Mastiff</h3>
          <h2> / mo</h2>
          <p>Priority Listing</p>
          <p>Unlimited Matches</p>
          <p>Unlimited Messages</p>
          <p>Unlimited App Usage</p>
          <button class="button">Sign Up</button>
        </section>
    
        <!-- Call to Action -->
    
        <section id="cta">
          <h3>Find the True Love of Your Dog's Life Today.</h3>
          <button class="button">Download</button>
          <button class="button">Download</button>
        </section>
    
        <!-- Footer -->
    
        <footer id="footer">
          <p>&copy; Copyright 2021 TinDog</p>
        </footer>
    
        <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
        <!-- <script
          src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
          integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
          crossorigin="anonymous"
        ></script>
        <script
          src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
          crossorigin="anonymous"
        ></script> -->
    
        <!-- Option 2: Separate Popper and Bootstrap JS -->
    
        <script
          src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
          integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
          crossorigin="anonymous"
        ></script>
        <script
          src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
          integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
          crossorigin="anonymous"
        ></script>
        <script
          src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"
          integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2"
          crossorigin="anonymous"
        ></script>
      </body>
    </html>

Answer 1

当我向项目添加 bootstrap.min.js 和 bootstrap.min.css 引用时，我观察到它会自动和手动移动：

<!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">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
        integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous">
    </script>
    <title>Document</title>
</head>

<body>
    <section id="testimonials">
        <div id="carouselControls" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active" style="margin-top: 50px;">
                    <h2>
                        I no longer have to sniff other dogs for love. I've found the
                        hottest Corgi on TinDog. Woof.
                    </h2>
                    <img class="testimonial-img"  src="https://via.placeholder.com/1400x300.png" alt="dog-profile" />
                    <em>Pebbles, New York</em>
                </div>
                <div class="carousel-item" style="margin-top: 50px;">
                    <h2 class="testimonial-text">
                        My dog used to be so lonely, but with the TinDog's help, He has
                        found the love of his life. I think
                    </h2>
                    <img src="https://via.placeholder.com/1400x300.png" alt="lady-profile" class="testimonial-img" />
                    <em>Beverly, illinois</em>
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselControls"
                data-bs-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselControls"
                data-bs-slide="next">
                <span class="carousel-control-next-icon"></span>
            </button>
        </div>
    </section>
</body>

</html>

Answer 2

您可能忘记添加 Bootstrap 的 CSS 和 JS 文件。

方法一

在所有其他样式表之前将样式表 <link> 复制并粘贴到您的 <head> 中以加载我们的 CSS.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

将以下 <script> 之一放置在页面末尾附近，就在结束 </body> 标记之前，以启用它们。 jQuery 必须先来，然后是 Popper，然后是我们的 JavaScript 插件。

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

方法二

使用入门模板

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
    -->
  </body>
</html>

方法三

下载 Bootstrap 以从 here.

获取已编译的 CSS 和 JavaScript

请同时检查来源 here。

Answer 3

在你的帮助下，我也设法解决了这个问题。问题出在版本上，我认为他们应该将 bootstrap 的入门包模板作为正确的入门方式添加所有单个或单独的代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <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
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />

    <!-- Google Fonts -->

    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;900&family=Ubuntu:wght@300;400;700&display=swap"
      rel="stylesheet"
    />

    <!-- CSS StyleSheets -->

    <link rel="stylesheet" href="css/styles.css" />

    <!-- Font Awesome Icons -->

    <script
      src="https://kit.fontawesome.com/40d4d3ba0c.js"
      crossorigin="anonymous"
    ></script>

    <title>Tindog</title>
  </head>
  <body>
    <section id="title">
      <!-- Nav Bar -->

      <div class="container-fluid">
        <nav class="navbar navbar-expand-lg navbar-dark">
          <a class="navbar-brand" href="#">tindog</a>
          <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link" aria-current="page" href="#">Contact</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Download</a>
              </li>
            </ul>
          </div>
        </nav>

        <!-- Title -->

        <div class="row">
          <div class="col-lg-6">
            <h1>Meet new and interesting dogs nearby.</h1>
            <button type="button" class="btn btn-dark btn-lg download-button">
              <i class="fab fa-apple"></i> Download
            </button>
            <button
              type="button"
              class="btn btn-outline-light btn-lg download-button"
            >
              <i class="fab fa-google-play"></i>
              Download
            </button>
          </div>

          <div class="col-lg-6">
            <img
              class="title-image"
              src="images/iphone6.png"
              alt="iphone-mockup"
            />
          </div>
        </div>
      </div>
    </section>

    <!-- Features -->

    <section id="features">
      <div class="row">
        <div class="feature-box col-lg-4">
          <i class="icon fas fa-check-circle fa-4x"></i>
          <h3>Easy to use.</h3>
          <p>So easy to use, even your dog could do it.</p>
        </div>
        <div class="feature-box col-lg-4">
          <i class="icon fas fa-bullseye fa-4x"></i>
          <h3>Elite Clientele</h3>
          <p>We have all the dogs, the greatest dogs.</p>
        </div>
        <div class="feature-box col-lg-4">
          <i class="icon fas fa-heart fa-4x"></i>
          <h3>Guaranteed to work</h3>
          <p>Find the love of your dog's life or get your money back.</p>
        </div>
      </div>
    </section>

    <!-- Testimonials -->

    <section id="testimonials">
      <div id="carouselControls" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <h2>
              I no longer have to sniff other dogs for love. I've found the
              hottest Corgi on TinDog. Woof.
            </h2>
            <img
              class="testimonial-img"
              src="images/dog-img.jpg"
              alt="dog-profile"
            />
            <em>Pebbles, New York</em>
          </div>
          <div class="carousel-item">
            <h2 class="testimonial-text">
              My dog used to be so lonely, but with the TinDog's help, He has
              found the love of his life. I think
            </h2>
            <img
              src="images/lady-img.jpg"
              alt="lady-profile"
              class="testimonial-img"
            />
            <em>Beverly, illinois</em>
          </div>
        </div>
        <button
          class="carousel-control-prev"
          type="button"
          data-bs-target="#carouselControls"
          data-bs-slide="prev"
        >
          <span class="carousel-control-prev-icon"></span>
        </button>
        <button
          class="carousel-control-next"
          type="button"
          data-bs-target="#carouselControls"
          data-bs-slide="next"
        >
          <span class="carousel-control-next-icon"></span>
        </button>
      </div>
    </section>

    <!-- Press -->

    <section id="press">
      <img class="press-img" src="images/TechCrunch.png" alt="tc-logo" />
      <img class="press-img" src="images/tnw.png" alt="tnw-logo" />
      <img
        class="press-img"
        src="images/bizinsider.png"
        alt="biz-insider-logo"
      />
      <img class="press-img" src="images/mashable.png" alt="mashable-logo" />
    </section>

    <!-- Pricing -->

    <section id="pricing">
      <h2>A Plan for Every Dog's Needs</h2>
      <p>Simple and affordable price plans for you and your dog.</p>

      <h3>Chihuahua</h3>
      <h2>Free</h2>
      <p>5 Matches Per Day</p>
      <p>10 Messages Per Day</p>
      <p>Unlimited App Usage</p>
      <button class="button">Sign Up</button>

      <h3>Labrador</h3>
      <h2> / mo</h2>
      <p>Unlimited Matches</p>
      <p>Unlimited Messages</p>
      <p>Unlimited App Usage</p>
      <button class="button">Sign Up</button>

      <h3>Mastiff</h3>
      <h2> / mo</h2>
      <p>Priority Listing</p>
      <p>Unlimited Matches</p>
      <p>Unlimited Messages</p>
      <p>Unlimited App Usage</p>
      <button class="button">Sign Up</button>
    </section>

    <!-- Call to Action -->

    <section id="cta">
      <h3>Find the True Love of Your Dog's Life Today.</h3>
      <button class="button">Download</button>
      <button class="button">Download</button>
    </section>

    <!-- Footer -->

    <footer id="footer">
      <p>&copy; Copyright 2021 TinDog</p>
    </footer>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

幻灯片没有移动 Bootstrap

slides not moving in Bootstrap

html

css

bootstrap-4

方法一

方法二

方法三