如何更改 Bootstrap 4 導覽列切換按鈕顏色?
自訂Bootstrap 4 導覽列切換按鈕顏色
上下文:
上下文:上下文中,較小螢幕通常具有用於導航的漢堡選單按鈕。預設情況下,此按鈕具有特定顏色。
問題:
您可以修改 Bootstrap 4 導覽列切換按鈕的顏色嗎?答案:
- 使用Bootstrap 的預定義樣式:
- Bootstrap 4 使用 SVG 背景圖像作為切換圖標。不同樣式有特定的類別:
.navbar-dark:深色背景上的淺色圖示.navbar-light:淺色背景上的深色圖示
.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"); }
登入後複製
如果這些預訂選項無法滿足您的需求,您可以使用所需的顏色建立自訂 SVG 圖示。例如:
此程式碼將圖示顏色設定為粉紅色。您可以調整 rgba() 函數中的值以符合您喜歡的顏色。使用外部圖示庫:
或者,您可以使用Font 等庫中的圖示太棒了,確保您應用必要的CSS 類別來設定它們的樣式。 Bootstrap 中的更新4.0.0:以前稱為navbar-inverse,深色主題的導航欄類現在為navbar-dark,它為連結和切換按鈕產生較淺的顏色。以上是如何更改 Bootstrap 4 導覽列切換按鈕顏色?的詳細內容。更多資訊請關注PHP中文網其他相關文章!
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章
Windows 11 KB5054979中的新功能以及如何解決更新問題
4 週前
By DDD
如何修復KB5055523無法在Windows 11中安裝?
3 週前
By DDD
Inzoi:如何申請學校和大學
1 個月前
By DDD
如何修復KB5055518無法在Windows 10中安裝?
3 週前
By DDD
在哪裡可以找到Atomfall中的站點辦公室鑰匙
4 週前
By DDD

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)