示例模式未从引导程序加载答案

【问题标题】：Example Modal Not Loading from Bootstrap示例模式未从引导程序加载
【发布时间】：2020-12-24 18:14:52
【问题描述】：

我只是在遵循 YouTube 教程时从 Bootstrap 复制/粘贴了以下代码，但它不会为我弹出。我所做的只是从网站复制/粘贴（与视频中的完全一样），但我点击了按钮，没有任何反应。

我希望此代码弹出表单供用户填写。

知道什么会导致这个问题吗？

<!-- Button trigger modal Source: https://getbootstrap.com/docs/4.0/components/modal/ -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

完整代码：

{% load static %}
<html>
<head>
    <title>Polling</title>
    <link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<div class="container">
    <div class="jumbotron">
    <div class="card">
      <div class="card-header">
        Featured Item(s)
      </div>
      <div class="card-body">
        <h1 style="font-family: Graphik Black; font-size: 20px">Apple iPhone XS (AT&T)</h1>
        <p class="card-text">This is a description.</p>
        <div class="row">
            <div class="col-md-12">
                <button type="button" class="btn btn-success badge-pill float-right" style="font-size: 12px; width:55px">+ New</button>
            </div>
        </div> 
        <br>
        <table class="table table-hover">
  <thead>
    <tr style="font-family: Graphik Black; font-size: 14px">
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
    </tr>
  </thead>
  <tbody>
    <tr style="font-family: Graphik; font-size: 12px">
      <th scope="row" class="container">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td><button type="button" class="btn btn-danger btn-sm badge-pill" style="font-size: 11px; width:60px">Remove</button></td>
    </tr>
    <tr style="font-family: Graphik; font-size: 12px"> 
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td><button type="button" class="btn btn-danger btn-sm badge-pill" style="font-size: 11px; width:60px">Remove</button></td>
    </tr>
    <tr style="font-family: Graphik; font-size: 12px">
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td><button type="button" class="btn btn-danger btn-sm badge-pill" style="font-size: 11px; width:60px">Remove</button></td>
    </tr>
  </tbody>
</table>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
    </div>
</div>
</body>
</html>

【问题讨论】：

标签： javascript html jquery css twitter-bootstrap

【解决方案1】：

引导模式与 JS 一起工作。按照documentation

中的说明添加 bootstrap.js 文件

<head>
   [...]
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>

【讨论】：

【解决方案2】：

Bootstrap-4 模态使用JQuery script。

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

这就是我们使用以下脚本的原因。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

如果您使用的是Bootstrap-4，则上述 ... 必须在您的 HTML 文件中使用。

Bootstrap-5： 但是，Bootstrap-5 已停止使用 JQuery。现在总共只需要两个脚本：

Booststrap-5 中的工作演示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
      crossorigin="anonymous"
    />

    <title>Modal</title>
  </head>
  <body>
    <!-- Button trigger modal -->
    <button
      type="button"
      class="btn btn-primary"
      data-bs-toggle="modal"
      data-bs-target="#exampleModal"
    >
      Launch demo modal
    </button>

    <!-- Modal -->
    <div
      class="modal fade"
      id="exampleModal"
      tabindex="-1"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">...</div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              Close
            </button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

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

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
      crossorigin="anonymous"
    ></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    -->
  </body>
</html>

【讨论】：