Bootstrap5模式不适用于入门模板

html5 • • 问答

我正在尝试使用 Bootstrap 5 入门模板（我使用 Bootstrap Bundle with Popper 选项）来实现一个简单的模态，但由于某种原因，它不起作用。我已经解决了其他类似的问题，但不幸的是，没有一个对我有用。我想不通我哪里出错了。

我附上了简化的代码片段。我试图避免使用 javascript 来触发模态。我想使用 HTML>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"/>
    <title>Hello, world!</title>
  </head>
  <body>
    <div>
      <h2>Basic Modal Example</h2>
      <!-- Trigger the modal with a button -->
      <button type="button">
        Open Modal
      </button>
      <!-- Modal -->
      <div role="dialog">
        <div>
          <!-- Modal content-->
          <div>
            <div>
              <button type="button">
                &times;
              </button>
              <h4>Modal Header</h4>
            </div>
            <div>
              <p>Some text in the modal.</p>
            </div>
            <div>
              <button type="button">
                Close
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
  </body>
</html>

回答

您可能正在使用一些较旧的示例/模板。尝试使用文档中的代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"/>
    <title>Hello, world!</title>
  </head>
  <body>
    <div>
      <h2>Basic Modal Example</h2>
      <!-- Button trigger modal -->
      <button type="button">
        Launch demo modal
      </button>

      <!-- Modal -->
      <div tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div>
          <div>
            <div>
              <h5>Modal title</h5>
              <button type="button" aria-label="Close"></button>
            </div>
            <div>
              ...
            </div>
            <div>
              <button type="button">Close</button>
              <button type="button">Save changes</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
  </body>
</html>

以上是Bootstrap5模式不适用于入门模板的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>