JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

Bootstrapナビゲーションバー入門：navbar-inverseクラスで黒背景・白文字の反転デザインを作る方法

navbar-inverseクラスとは

Bootstrapでは、.navbar-inverseクラスを.navbarクラスに追加するだけで、黒い背景に白い文字の反転ナビゲーションバー（逆色ナビバー）を簡単に作成できます。

通常のナビゲーションバーは明るい配色になっていますが、このクラスを適用することで、ダークテーマのサイトや視認性・コントラストを高めたい場面に最適な見た目になります。追加のコードを書く必要がなく、クラスを一つ加えるだけで手軽にデザインを切り替えられるのが魅力です。

実装例

以下のコードを実行すると、navbar-inverseクラスを適用したナビゲーションバーの動作を実際に確認できます。

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>
      <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
      <script src = "/scripts/jquery.min.js"></script>
      <script src = "/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <nav class = "navbar navbar-inverse" role = "navigation">
         <div class = "navbar-header">
            <a class = "navbar-brand" href = "#">TutorialsPoint</a>
         </div>
         <div>
            <ul class = "nav navbar-nav">
               <li class = "active"><a href = "#">iOS</a></li>
               <li><a href = "#">SVN</a></li>
               <li class = "dropdown">
                  <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
                     Java
                     <b class = "caret"></b>
                  </a>
                  <ul class = "dropdown-menu">
                     <li><a href = "#">jmeter</a></li>
                     <li><a href = "#">EJB</a></li>
                     <li><a href = "#">Jasper Report</a></li>
                     <li class = "divider"></li>
                     <li><a href = "#">Separated link</a></li>
                     <li class = "divider"></li>
                     <li><a href = "#">One more separated link</a></li>
                  </ul>
               </li>
            </ul>
         </div>
      </nav>
   </body>
</html>

コードのポイント解説

  • navbar navbar-inverse：ナビバーの基本クラスに、反転スタイルを組み合わせて指定しています。
  • navbar-header / navbar-brand：サイト名やロゴを表示するブランド領域です。
  • nav navbar-nav：メニュー項目を横並びに配置するためのリストクラスです。
  • active：現在表示中のページに対応するメニューを強調表示します。
  • dropdown / dropdown-menu：「Java」のようにクリックするとサブメニューが展開されるドロップダウンを実現します。

利用時の注意点

navbar-inverseクラスはBootstrap 3系の機能です。Bootstrap 4以降では廃止されているため、新しいバージョンでは「bg-dark」や「navbar-dark」といったユーティリティクラスを使うことで、同じように黒背景・白文字の反転ナビバーを実現できます。プロジェクトで使用しているBootstrapのバージョンに合わせて、適切なクラスを選択するようにしましょう。

  1. C#のConsoleクラスとは？主要プロパティの使い方を実例付きで解説

    C#のConsoleクラスは、コンソールアプリケーションにおける標準入力・標準出力・標準エラー出力の各ストリームを表すクラスです。テキストの表示や入力の読み取りだけでなく、文字色や背景色の変更、カーソル位置やサイズの制御など、コンソール操作に関するさまざまな機能が提供されています。ここでは、Consoleクラスの代表的なプロパティの使い方を、サンプルコードと実行結果とあわせて解説します。Console.CursorLeftプロパティコンソール上のカーソル位置（左端から数えた列位置）を変更するには、Console.CursorLeftプロパティを使用します。サンプルコードusing System

  2. 【C#】Tuple<T1, T2, T3, T4, T5, T6>クラスの使い方を徹底解説

    C#のTuple<T1, T2, T3, T4, T5, T6>クラスとは Tuple<T1, T2, T3, T4, T5, T6> クラスは、6 つの要素を持つ「6 タプル」を表します。タプルとは、複数の要素を順序付けてひとまとめに格納できるデータ構造で、各要素にはそれぞれ異なる型を指定できます。 このクラスは、次のような場面で活用されます。 データセットへのシンプルなアクセス データセットの容易な操作 単一のデータセットとしての表現 メソッドから複数の値を返したい場合 メソッドに複数の値を渡したい場合 主要な6つのプロパティ Tuple<T1, T2,