如何自訂 Bootstrap 4 導覽列漢堡選單圖示顏色？

自訂Bootstrap 4 導覽列按鈕圖示顏色

在Bootstrap 4 中，當螢幕尺寸低於992 像素時，會出現漢堡切換按鈕。若要自訂其顏色，您可以使用 navbar-toggler-icon 類別。

導覽列顏色上下文：

漢堡切換器圖示有兩個背景圖片：

• 導覽列燈：白色燈光圖示背景。
• 導覽列深色：深色背景的黑色圖示。

更改圖示顏色：

要覆蓋預設顏色，您可以透過 CSS 自訂圖示。這是一個範例：

.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");
}

此 CSS 將圖示顏色設定為粉紅色。請注意 SVG 資料中的描邊屬性，它決定了圖示顏色。

其他樣式：

要讓圖示的邊框與圖示顏色相符，您可以新增下列樣式：

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

替代方法：

或者，您可以使用外部庫中的圖標，例如Font Awesome，並獨立設定它們的樣式。

已更新Bootstrap 4.0.0：

在Bootstrap 4.0.0 中，navbar-inverse 已重新命名為navbar-dark 用於深色背景的導覽列。

其他自訂選項：

有關自訂Bootstrap 4 導覽列顏色的更多詳細信息，請參閱官方文件：https://getbootstrap.com/ docs/4.0/components/navbar/#colors

以上是如何自訂 Bootstrap 4 導覽列漢堡選單圖示顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！