在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

如使用图像示例和文档配色方案所见，每个类都通过几个不同的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);
  }
}