ブートストラップ4ナビゲーションバー
ナビゲーションバー
ナビゲーションバーは、ページの上部に配置されるナビゲーションヘッダーです。
基本的なナビゲーションバー
Bootstrapを使用すると、画面サイズに応じてナビゲーションバーを拡大または縮小できます。
標準のナビゲーションバーが.navbar
クラスで作成され、その後にレスポンシブ折りたたみクラスが続き.navbar-expand-xl|lg|md|sm
ます:(特大、大、中、小の画面にナビゲーションバーを垂直に積み重ねます）。
ナビゲーションバー内にリンクを追加するには、。を含む<ul>要素を使用しclass="navbar-nav"ます。次に、クラス<li>を持つ要素を追加し、その後にクラスを持つ要素を追加します。.nav-item<a>.nav-link
例
<!-- A grey horizontal navbar that becomes
vertical on small screens -->
<nav class="navbar navbar-expand-sm
bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
3</a>
</li>
</ul>
</nav>
垂直ナビゲーションバー
クラスを削除.navbar-expand-xl|lg|md|smして、垂直ナビゲーションバーを作成します。
例
<!-- A vertical navbar -->
<nav class="navbar bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
3</a>
</li>
</ul>
</nav>
中央に配置されたナビゲーションバー
クラスを追加して.justify-content-center、ナビゲーションバーを中央に配置します。
次の例では、ナビゲーションバーを中、大、および特大の画面の中央に配置します。小さな画面では、垂直方向に左揃えで表示されます（.navbar-expand-smクラスのため）。
例
<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
例
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link"
href="#">Active</a>
</li>
<li
class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link
disabled" href="#">Disabled</a>
</li>
</ul>
</nav>
<!-- Black with white text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Blue with white text -->
<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">
<a
class="navbar-brand" href="#">Logo</a>
...
</nav>
画像でクラスを使用する場合.navbar-brand、Bootstrap 4は、ナビゲーションバーに垂直に合うように画像のスタイルを自動的に設定します。
例
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a class="navbar-brand" href="#">
<img src="bird.jpg"
alt="Logo" style="width:40px;">
</a>
...
</nav>
ナビゲーションバーの折りたたみ
多くの場合、特に小さな画面では、ナビゲーションリンクを非表示にして、クリックすると表示されるボタンに置き換えます。
折りたたみ可能なナビゲーションバーを作成するには、。付きのボタンを使用します。次に、ナビゲーションバーのコンテンツ（リンクなど）をdiv要素内でラップし、その後にボタンの「thetarget 」と一致するIDを続けます。class="navbar-toggler",
data-toggle="collapse" and data-target="#thetarget"class="collapse navbar-collapse"data-target
例
<nav class="navbar navbar-expand-md bg-dark
navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button
class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse"
id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
</ul>
</div>
</nav>
ヒント： .navbar-expand-mdクラスを削除して、常にナビゲーションバーリンクを非表示にし、トグルボタンを表示することもできます。
ドロップダウン付きのナビゲーションバー
Navbarは、ドロップダウンメニューを保持することもできます。
例
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li
class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop"
data-toggle="dropdown">
Dropdown
link
</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
ナビゲーションバーのフォームとボタン
入力とボタンを並べてグループ化するための<form>要素を追加します。class="form-inline"
例
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<input class="form-control
mr-sm-2"
type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
.input-group-prependまたはなどの他の入力クラスを使用.input-group-appendして、入力フィールドの横にアイコンやヘルプテキストを添付することもできます。これらのクラスの詳細については、ブートストラップ入力の章を参照してください。
例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<div class="input-group">
<div
class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text"
class="form-control" placeholder="Username">
</div>
</form>
</nav>
ナビゲーションバーテキスト
クラスを使用して、.navbar-textリンクではないナビゲーションバー内の要素を垂直方向に整列します（適切なパディングとテキストの色を保証します）。
例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!--
Links -->
<ul class="navbar-nav">
<li
class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
<!-- Navbar text-->
<span class="navbar-text">
Navbar text
</span>
</nav>
固定ナビゲーションバー
ナビゲーションバーは、ページの上部または下部に固定することもできます。
固定ナビゲーションバーは、ページスクロールに関係なく、固定位置（上または下）に表示されたままになります。
クラスは.fixed-topナビゲーションバーを上部に固定します：
例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav>
.fixed-bottomクラスを使用して、ナビゲーションバーをページの下部に配置します。
例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
...
</nav>
Use the .sticky-top class to make the navbar fixed/stay at
the top of the page when you scroll past it. Note:
This class does not work in IE11 and earlier (will treat it as position:relative).
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
...
</nav>