引导 CDN 未正确导入答案

【问题标题】：Bootstrap CDN is not importing correctly引导 CDN 未正确导入
【发布时间】：2020-02-26 09:41:26
【问题描述】：

以下是我的头标签：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<script type="text/javascript" src="boot.js"></script>

最后一个脚本是对我用来执行所有 jQuery 代码的另一个文件的引用。但是下面的代码：

<body>
    <nav class="navbar navbar-expand-md navbar-dark">
        <nav class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </nav>
</body>

这只是显示一个白页。但是，如果我将 bootstrap cdn 用于 JavaScript 版本 3.4.1，它可以工作，但不是预期的（可能是因为它的版本较旧）。为什么会发生这种情况？

【问题讨论】：

删除 navbar-dark 类。此类使链接文本变为白色。
@Turnip 为什么会这样？
因为它设计用于深色背景的网站。阅读文档：getbootstrap.com/docs/4.0/components/navbar/#color-schemes

标签： javascript jquery html

【解决方案1】：

如果您想将深色背景保留在导航栏中，请添加更多类 bg-dark 和 <nav class="navbar navbar-expand-md navbar-dark bg-dark">

我认为这会奏效。举个例子：

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

      <!-- jQuery library -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

      <!-- Popper JS -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

      <!-- Latest compiled JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  </head>

  <body>
      <nav class="navbar navbar-expand-md navbar-dark bg-dark">
          <nav class="navbar-nav">
              <li class="nav-item">
                  <a class="nav-link" href="#">Link</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#">Link</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#">Link</a>
              </li>
          </nav>
  </body>
</html>

【讨论】：