Bootstrap 5 ナビゲーションバー
- 前のページ BS5 ナビゲーション
- 次のページ BS5 ボックス
ナビゲーションバー
ナビゲーションバーはページの上部に配置されたナビゲーションヘッダーです：
基本的なナビゲーションバー
Bootstrapを使用すると、ナビゲーションバーはスクリーンサイズに応じて拡張または折り畳みできます。
以下を使用してください .navbar クラスを使用して、標準のナビゲーションバーを作成し、次にレスポンシブな折り畳みクラスを追加します：.navbar-expand-xxl|xl|lg|md|sm（特大、超大、大、中型デバイスでは水平に並べ、小型スクリーンでは垂直に並べ替えるナビゲーションバー）。
ナビゲーションバーにリンクを追加するには、 class="navbar-nav" の <ul> 要素（または <div>）を追加します。次に、 .nav-item クラスの <li> 要素、次に .nav-link クラスの <a> 要素：
例
<!-- 小型スクリーンでは水平な灰色のナビゲーションバーが垂直に変換 -->
<nav class="navbar navbar-expand-sm bg-light">
<div class="container-fluid">
<!-- リンク -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">リンク 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク 3</a>
</li>
</ul>
</div>
</nav>
削除します。
垂直ナビゲーションバーを .navbar-expand-* クラスを使用して、常に垂直なナビゲーションバーを作成します：
例
<!-- 灰色の垂直ナビゲーションバー --> <nav class="navbar bg-light"> ... </nav>
ナビゲーションバーを追加します。
中央に配置された .justify-content-center クラスを使用して、ナビゲーションバーを中央に配置します：
例
<nav class="navbar navbar-expand-sm bg-light justify-content-center"> ... </nav>
カラーナビゲーションバー
どのような .bg-color クラスを使用して、ナビゲーションバーの背景色を変更します：
.bg-primary.bg-success.bg-info.bg-warning.bg-danger.bg-secondary.bg-dark.bg-light
ヒント：以下を使用してください .navbar-dark クラスを使用して、ナビゲーションバーのすべてのリンクに白色のテキスト色を追加するか、または .navbar-light クラスに黒色のテキスト色を追加します。
例
<!-- 灰色背景，白色文本 -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
活动
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">活動</a>
</li>
</ul>
</div>
</nav>
<a class="nav-link disabled" href="#">禁用</a>
<!-- 黑色背景，白色文本 -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- 蓝色背景，白色文本 -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>アクティブ/非アクティブ状態： .active クラスを <a> 要素をアクティブに表示するか、 .disabled クラスを使用して、リンクをクリック不可にします。
ブランド / ロゴ
.navbar-brand クラスを使用して、ページのブランド/ロゴ/プロジェクト名を強調表示します：
例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
</div>
</nav>
クラスを使用すると、 .navbar-brand Bootstrap 5では、クラスと画像を一緒に使用すると、自動的に画像のスタイルが設定され、垂直方向にナビゲーションバーに適応されます。
例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill">
</a>
</div>
</nav>
ナビゲーションバーのテキスト
以下を使用してください .navbar-text class="navbar-text"は、ナビゲーションバー内のリンク以外の要素に垂直に整列させます（適切なインセットとテキストの色を確認してください）。
例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<span class="navbar-text">ナビゲーションバーのテキスト</span>
</div>
</nav>
特に小さなスクリーンでは、ナビゲーションリンクを隠してボタンで代用し、ボタンをクリックしたときに表示したいことが多いです。
折り畳み可能なナビゲーションバーを作成するには、既に設定された class="navbar-toggler"、data-bs-toggle="collapse" および data-bs-target="#thetarget" のボタンに、ナビゲーションバーの内容（リンクなど）を括ります。 class="collapse navbar-collapse" の <div> 要素に、ボタンの data-bs-target マッチングした id："thetarget「。
例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">リンク</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>
</div>
</nav>
ヒント：さらに削除することもできます： .navbar-expand-md クラスはナビゲーションバーのリンクを常に隠し、切り替えボタンを表示します。
ドロップダウンメニューのナビゲーションバー
ナビゲーションバーにはドロップダウンメニューを収容できます：
例
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">ドロップダウンメニュー</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">リンク</a></li>
<li><a class="dropdown-item" href="#">別のリンク</a></li>
<li><a class="dropdown-item" href="#">3番目のリンク</a></li>
</ul>
</li>
ナビゲーションバーのメニューとボタン
ナビゲーションバーにフォームを含めることができます：
例
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">リンク</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">リンク</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">リンク</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="text" placeholder="検索">
<button class="btn btn-primary" type="button">検索</button>
</form>
</div>
</div>
</nav>
位置固定のナビゲーションバー
ナビゲーションバーは、ページのトップまたは下部に固定することもできます。
固定ナビゲーションバーは、ページのスクロールに独立して固定された位置（トップまたは下部）に常に見えます。
.fixed-top クラスは、ナビゲーションバーをページ上に固定します。トップ：
例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> ... </nav>
以下を使用してナビゲーションバーをページの下部に固定してください：
例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom"> ... </nav>
以下を使用してください .sticky-top このクラスは、ナビゲーションバーがページをスクロールする際に固定/ページ上に留まるようにします。トップ。
注記：この種は IE11 及びそれ以前のバージョンでは機能しません（それをコメントとして扱います）。 position:relative）。
例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top"> ... </nav>
- 前のページ BS5 ナビゲーション
- 次のページ BS5 ボックス
