Bootstrap 4 の Navbar トグル ボタンの色を変更するにはどうすればよいですか?

Bootstrap 4 ナビゲーション バーのトグル ボタンの色のカスタマイズ

コンテキスト:

Bootstrap Web サイトでは、小さい通常、画面にはナビゲーション用のハンバーガー メニュー ボタンが付いています。このボタンには、デフォルトで特定の色が付いています。

質問:

Bootstrap 4 ナビゲーションバーのトグルの色を変更できますか?ボタン?

答え:

Bootstrap の定義済みスタイルの使用:

Bootstrap 4 はトグル アイコンに SVG 背景画像を利用します。さまざまなスタイルに固有のクラスがあります:

• .navbar-dark: 暗い背景に明るい色のアイコン
• .navbar-light: 明るい背景に暗い色のアイコン

のカスタマイズアイコン:

これらの事前定義されたオプションがニーズに合わない場合は、希望の色でカスタム SVG アイコンを作成できます。例:

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

このコードは、アイコンの色をピンクに設定します。 rgba() 関数の値を好みの色に合わせて調整できます。

外部アイコン ライブラリの使用:

あるいは、Font などのライブラリのアイコンを使用することもできます。素晴らしい。スタイルに必要な CSS クラスを確実に適用できる

Bootstrap 4.0.0 の更新:

以前は navbar-inverse として知られていた、ダークテーマの navbar クラスは、明るい色を生成する navbar-dark になりました。リンクとトグルボタンについては。

以上がBootstrap 4 の Navbar トグル ボタンの色を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。