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

ブートストラップでナビゲーション バーの色を変更する方法: 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 サイトの他の関連記事を参照してください。