Bootstrap - ナビバー：プロフェッショナルなウェブナビゲーションの門

こんにちは、未来のウェブ開発者たち！今日は、現代のウェブデザインで最も重要なコンポーネントの一つであるナビバーについて深く掘り下げます。あなたの近所の親切なコンピュータ教師として、私はブートストラップのナビバーの素晴らしい世界を案内するのを楽しみにしています。お気に入りの飲み物を用意し、リラックスした姿勢で、このコーディング冒険を一緒に楽しんでください！

仕組み

ナビバーの構築を始める前に、ナビバーとは何か、そしてどのように機能するかを理解しましょう。ナビバーはウェブサイトの地図のようなものです。ユーザーがあなたのデジタル創造物の中で迷わないように导航します。ブートストラップでは、ナビバーはResponsiveでデフォルトで折り畳まれるため、さまざまなスクリーンサイズに美しく対応します。素晴らしいですね？

基本的なナビバー

まずは基本的なナビバーから始めましょう。以下は簡単な例です：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">MyWebsite</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<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="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>

このコードを分解すると：

• <nav>要素とブートストラップのクラスで始めます。
• navbar-brandクラスはウェブサイト名やロゴに使用されます。
• navbar-togglerはモバイルビュー用で、有名な「ハンバーガー」メニューを作成します。
• navbar-collapseのdiv内には、ナビゲーションアイテムがリストに含まれます。

縦方向のナビバー

少し违ったものを試してみたいですか？縦方向のナビバーを試してみましょう：

<nav class="navbar navbar-light bg-light flex-column">
<a class="navbar-brand" href="#">Vertical Nav</a>
<nav class="nav flex-column">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Contact</a>
</nav>
</nav>

flex-columnクラスが横方向のナビバーを縦方向に変換します。クールですね？

中央寄せのナビバー

中央寄せ

すべてをきれいに整列させたい方に、ナビバー項目を中央寄せる方法です：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="navbar-nav mx-auto">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Services</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
</nav>

mx-autoクラスは自動マージンを適用し、コンテンツを中央に寄せます。

ブランド

あなたのブランドはあなたのアイデンティティです。ブランドを輝かせる方法を見てみましょう：

<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/path/to/logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
</nav>

このコードはロゴをブランド名の隣に追加します。d-inline-blockとalign-topクラスはすべてがきれいに並ぶようにします。

テキスト

時々、ナビバーに普通のテキストが必要です：

<nav class="navbar navbar-light bg-light">
<span class="navbar-text">
Navbar text with an inline element
</span>
</nav>

navbar-textクラスはテキストをナビバーの外観に合わせてスタイルを適用します。

画像とテキスト

画像とテキストを組み合わせて、より動的なナビバーを作成しましょう：

<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/path/to/logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
<span class="navbar-text">
Welcome to our website!
</span>
</nav>

これにより、ロゴと迎賓メッセージが含まれるナビバーが作成されます。プロフェッショナルですね？

ナビ

navコンポーネントはナビバーの心臓部です。もっと複雑な例を見てみましょう：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<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="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>

この例にはアクティブなリンク、通常のリンク、無効なリンクが含まれています。sr-onlyクラスはスクリーンリーダー用であり、アクセシビリティを向上させます。

リストなしのナビバー

よりシンプルな外観を目指す场合、ナビバーにリストを使用しない方法があります：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</nav>

リストタグを使用せずに同じ結果を達成します。

ドロップダウン

レベルアップしましょう。ナビバーにドロップダウンを追加します：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">Link</a>
<div class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</nav>

dropdown-toggleクラスがドロップダウンエフェクトを作成し、dropdown-menuとdropdown-itemがドロップダウンコンテンツをスタイルします。

フォーム

検索バーが必要ですか？問題ありません！ナビバーにフォームを追加する方法です：

<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>

form-inlineクラスはフォーム要素を一行に並べます。

色のスキーム

ブートストラップはさまざまな色のスキームを提供しています。以下はダークなナビバーの例です：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Dark Navbar</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
</div>
</nav>

navbar-lightをnavbar-darkに、bg-lightをbg-darkに変更するだけです。シンプル！

コンテナ

更好的配置，您可以将导航栏内容包装在一个容器中：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Contained Navbar</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
</div>
</div>
</nav>

containerクラスはコンテンツを中央に寄せ、レスポンシブな固定幅を提供します。

配置

固定顶部

ナビバーを顶部に固定したい場合は以下のようにします：

<nav class="navbar fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Fixed top</a>
</nav>

fixed-topクラスはナビバーをページの顶部に固定します。

レスポンシブ行動

ブートストラップのナビバーはデフォルトでレスポンシブです。小さなスクリーンでは折り畳まれ、大きなスクリーンでは展開されます。鍵はnavbar-expand-*クラスです：

<nav class="navbar navbar-expand-md navbar-light bg-light">
<!-- Navbar content -->
</nav>

このナビバーは中程度のスクリーンサイズ及以上で展開されます。

トグル

ナビバーのトグルはモバイルデバイス上の「ハンバーガー」メニューを作成します：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<!-- Navbar content -->
</div>
</nav>

navbar-togglerボタンはナビバーコンテンツの表示/非表示を制御します。

外部コンテンツ

ナビバーの外側でもコンテンツをトグルすることができます：

<nav class="navbar navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>

これにより、ナビバーのブランド名を通じてトグル可能なコンテンツが作成されます。

オフキャンバス

最後に、オフキャンバスナビバーを見てみましょう：

<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<!-- Offcanvas content -->
</div>
</div>
</div>
</nav>

これにより、画面の側からスライドインするサイドバーが作成されます。

そして、皆さん！これでブートストラップのナビバーの世界を探り尽くしました。練習は完璧を追求するためですので、これらの例を試してみてください。ハッピーコーディング、そしてあなたのナビバーが常にユーザーを正しい方向に導くことを願っています！

メソッド	説明
.navbar()	ナビバーコンポーネントを初期化します
.collapse('toggle')	ナビバーの折り畳みをトグルします
.collapse('show')	ナビバーの折り畳みを表示します
.collapse('hide')	ナビバーの折り畳みを非表示します
.offcanvas('toggle')	オフキャンバスナビバーをトグルします
.offcanvas('show')	オフキャンバスナビバーを表示します
.offcanvas('hide')	オフキャンバスナビバーを非表示します

Credits: Image by storyset