如何更改 Bootstrap 4 導覽列切換器圖示顏色？

修改Bootstrap 4 導覽列按鈕圖示顏色

Bootstrap 4 的導覽列切換器圖示（由漢堡包表示。圖示影像有兩種變體：一種用於淺色背景，另一種用於深色背景。

要指定切換器的顏色，您可以使用以下類別：

• 導覽列-dark：在較暗的情況下顯示淺色/白顏色切換器
• navbar-light：在淺色背景上顯示深色/灰色切換器。

但是，如果您想進一步自訂切換器的顏色，您可以可以建立自訂圖示。例如，下面的程式碼片段使用 SVG 資料中的 lines='rgba(255,102,203, 0.5)' 值將切換器顏色設定為粉紅色 (255, 102, 203)：

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
  border-color: rgb(255, 102, 203);
}

現場示範請參考http://www.codeply.com/go/4FdZGlPMNV。

或者，您也可以使用外部庫中的圖標，例如 Font Awesome。

從 Bootstrap 4 Beta 開始，navbar-inverse 類別已替換為 navbar-dark

導覽列背景較暗，導致連結和切換器顏色較淺。

以上是如何更改 Bootstrap 4 導覽列切換器圖示顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！