Bootstrap - ナビゲーションデモ

ナビバーとは何か？

こんにちは、Web開発者の卵たち！今日は、Bootstrapのナビゲーションバー、または私たちが呼ぶように「ナビバー」の面白い世界に飛び込みます。家を建てていると考えましょう - ナビバーはすべての部屋を繋ぐホールのように考えられます。それは、訪問者があなたのウェブサイトを簡単に移動するのに役立つ中央ハブです。

Bootstrap - Navigation Demo

ナビバーは、ウェブページの上部に配置され、ウェブサイトの異なるセクションやページへのリンクを提供する強力なナビゲーションコンポーネントです。それは、訪問者があなたのデジタルランドスケープを案内する地図のようです。

なぜBootstrapをナビバーに使うのか？

Bootstrapは、Web開発者のためのスーパーヒーローツールキットのようなものです。预设のコンポーネントがたくさん詰まっています。ナビバーにBootstrapを使うと次のことができます：

異なるデバイス間での一貫性（レスポンシブデザイン）
キャスタマイズが簡単
各種ナビゲーションパターンのビルトインサポート

では、袖をまくって始めましょう！

ナビバーの基本構造

以下はBootstrapナビバーの基本構造です：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">あなたのブランド</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーションを切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">ホーム <span class="sr-only">(現在)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">機能</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">価格</a>
</li>
</ul>
</div>
</nav>

これを分解してみましょう：

<nav class="navbar navbar-expand-lg navbar-light bg-light">：これは私たちの主要なナビバーコンテナです。クラスはその外観と動作を定義します。
<a class="navbar-brand" href="#">：ここにあなたのブランド名やロゴを配置します。
<button class="navbar-toggler">：このボタンは小さなスクリーン上に表示され、ナビバーを切替えます。
<div class="collapse navbar-collapse">：この中にはナビバー項目が含まれ、小さなスクリーンでは折り畳まれます。
<ul class="navbar-nav">：この順序付きリストにはナビゲーション項目が含まれます。
<li class="nav-item">：各リスト項目はナビゲーション項目を表します。

ナビバーのカスタマイズ

色の変更

Bootstrapにはさまざまな色のスキームがあります。ダークなナビバーを試してみましょう：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!-- ナビバーのコンテンツ -->
</nav>

ここで、navbar-light bg-lightをnavbar-dark bg-darkに変更しました。ナビバーが夜間のスタイルになるようになります！

検索フォームの追加

検索機能を追加したいですか？以下のようにします：

<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">検索</button>
</form>

これをnavbar-collapseのdivの中に追加します。ナビゲーションホールに放大鏡を追加するようなものです！

ドロップダウンメニュー

ドロップダウンメニューで少し盛り上げましょう：

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ドロップダウン
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">アクション</a>
<a class="dropdown-item" href="#">別のアクション</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">ここに別のもの</a>
</div>
</li>

これにより、ナビバー内にドロップダウンメニューが作成されます。ナビゲーションホールに秘密の部屋を追加するようなものです！

レスポンシブ動作

Bootstrapのナビバーはデフォルトでレスポンシブです。小さなスクリーンでは、ナビバーがトグルボタン（しばしば「ハンバーガーメニュー」と呼ばれる）に折り畳まれます。これにより、すべてのデバイスでナビゲーションが使用可能になります。

実際に確認するために、ブラウザのウィンドウをリサイズしてみてください。ナビバー項目が消え、トグルボタンが表示されるのを見つけるでしょう。このボタンをクリックすると、ナビゲーション項目がドロップダウン形式で表示されます。

ベストプラクティス

シンプルに保つ：ユーザーを太多くのオプションで圧倒しないでください。
明確なラベルを使用：ナビゲーション項目が簡単に理解できるようにします。
アクティブなページを強調：activeクラスを使用してユーザーに現在位置を示します。
ブランドを考慮：デザイン全体に合わせた色やスタイルを選びます。

結論

おめでとうございます！あなたは刚刚 اولین Bootstrapナビバーを構築しました。実践は完璧を生みます。さまざまな組み合わせを試し、色を遊び、最も重要なのは、楽しむことです！

以下は、私たちが使用した主要なBootstrapクラスの表です：

クラス	目的
navbar	メインナビバーコンテナを定義
navbar-expand-lg	ナビバー拡張のブレイクポイントを設定
navbar-light/dark	ナビバーの色スキームを設定
bg-light/dark	ナビバーの背景色を設定
navbar-brand	ブランド/ロゴエリアのスタイル
navbar-toggler	小さなスクリーン用のトグルボタンを作成
navbar-nav	ナビゲーション項目のリストのスタイル
nav-item	単一のナビゲーション項目のスタイル
nav-link	ナビゲーション項目内のリンクのスタイル
dropdown-toggle	ドロップダウントグルを作成
dropdown-menu	ドロップダウンメニューコンテナのスタイル
dropdown-item	ドロップダウンメニューアイテムのスタイル

さあ、素晴らしいナビバーを作成しましょう！すべての素晴らしいウェブサイトは素晴らしいナビゲーションから始まります。ハッピーコーディング！

Credits: Image by storyset