在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);
  }
}