html - 在 Twitter Bootstrap 4 中为导航栏设置主题

Question

Twitter Bootstrap 文档没有对以下导航栏示例提供任何解释

<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>

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

Answer 1

如您所见，使用图像示例使用文档 Color schemes 每个类都会通过几个不同的 css 属性影响导航栏。如果您需要知道确切的样式，只需尝试一下即可轻松查看。

尽管您可以检查 Bootstrap v4alphas github 页面来阅读他们的 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);
  }
}