ホームページ > ウェブフロントエンド > ブートストラップのチュートリアル > ブートストラップでナビゲーションバーの色を変更する方法

ブートストラップでナビゲーションバーの色を変更する方法

coldplay.xixi
リリース: 2023-02-13 13:55:15
オリジナル
11851 人が閲覧しました

ブートストラップでナビゲーション バーの色を変更する方法: 1. ナビゲーションの背景色を変更して黒に設定し、nav タグの背景色を黒に設定します。2. ナビゲーション バーの色を変更します。ナビゲーション選択列で、クラス名 active を newactive に変更し、その背景色を赤に設定します。

ブートストラップでナビゲーションバーの色を変更する方法

#この記事の動作環境: Windows 7 システム、bootstrapv4.4.1 バージョン、Dell G3 コンピューター。

ブートストラップでナビゲーション バーの色を変更する方法:

1. ブートストラップで作成されたナビゲーション バーの HTML ページは、

bootstrap.min で読み込まれる必要があります。 css,bootstrap.min.js はナビゲーション効果を実現できます。下の図は、完全なコードとレンダリングです。

ブートストラップでナビゲーションバーの色を変更する方法

#2. ナビゲーションの背景色を変更し、黒に設定します。 nav タグの背景色を黒に設定し、コードは

background:#000 です。以下はコードとレンダリングです。

ブートストラップでナビゲーションバーの色を変更する方法

#3. ナビゲーションで選択した列の色を変更します (たとえば、「ホームページ」の背景を赤に設定します)。クラス名 active を newactive に変更し、背景色を赤に設定します。

ブートストラップでナビゲーションバーの色を変更する方法

#4. 「メニュー」の下の 2 番目の列にマウスを置いたときに、その列の色を変更します。クラス名

dropdown-menu の下の a タグの hover 属性を設定し、色を黒に設定します。

ブートストラップでナビゲーションバーの色を変更する方法

#5. 「メニュー」をクリックしたときの 2 番目の列の色を変更します。 CSS コードは .

navbar-default .navbar-nav>.open>a:focus {color: black;background-color: red;} で、a タグの focus 属性の色を設定します。このクラスの下にあります。

ブートストラップでナビゲーションバーの色を変更する方法

#6. ナビゲーション バーのデフォルトのテキストの色を変更します。クラス名 navbar-default の下の a タグのテキストの色を白に設定し、コードは .

navbar-default .navbar-nav>li>a {color: #fff;} となります。

ブートストラップでナビゲーションバーの色を変更する方法

推奨: ブートストラップ ビデオ チュートリアル

以上がブートストラップでナビゲーションバーの色を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート