Html 在Twitter引导4中设置导航栏主题

Twitter引导文档没有对下面的navbar示例进行解释

<nav class="navbar navbar-dark bg-inverse">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

---

上面的示例有图像输出，但没有解释它们实际上如何影响导航栏。有人能解释一下它们是如何工作的吗？

正如您在使用文档的图像示例中看到的那样，每个类都会使用几个不同的css属性影响导航栏。如果您需要知道确切的样式，您可以通过简单的尝试轻松地检查它

尽管您可以查看引导页面来阅读他们的SCSS文件。例如，这些是使用

.navbar light

进行的更改：

// Dark links against a light background
.navbar-light {
  .navbar-brand {
    color: $navbar-light-active-color;

    @include hover-focus {
      color: $navbar-light-active-color;
    }
  }

  .navbar-nav {
    .nav-link {
      color: $navbar-light-color;

      @include hover-focus {
        color: $navbar-light-hover-color;
      }
    }

    .open > .nav-link,
    .active > .nav-link,
    .nav-link.open,
    .nav-link.active {
      @include plain-hover-focus {
        color: $navbar-light-active-color;
      }
    }
  }

  .navbar-divider {
    background-color: rgba(0,0,0,.075);
  }
}

---

这不是你的文件吗？