English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap4 基本教程

Bootstrap4 ナビゲーション

Bootstrapは、タブやボタンなど、非常に柔軟で美しい基本的なナビゲーションコンポーネントを作成するための簡単で速い方法を提供しています。Bootstrapのすべてのナビゲーションコンポーネント（タブとボタン）は、基本的な.nav クラスを共有して同じ基本的なマークアップとスタイルを提供します。

シンプルな水平ナビゲーションを作成したい場合は、<ul> 要素に追加できます .nav クラス、各 <li> オプションに .nav を追加-item クラス、各リンクに .nav を追加-link クラス:

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　サンプル</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>ナビゲーション</h2>
　　<p>簡単な水平ナビゲーション:</p>
　　<ul　class="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>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link　disabled"　href="#">無効</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>
テストを見て‹/›

ナビゲーションアライメント

.justify-content-center クラスでナビゲーションを中央に表示、.justify-content-end クラスでナビゲーションを右寄せに設定。

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　サンプル</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>ナビゲーション</h2>
　　<p>左寄せナビゲーション（デフォルト）:</p>
　　<ul　class="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>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link　disabled"　href="#">無効</a>
　　　　</li>
　　</ul>
　　
　　<p　class="text-center">中央揃えナビゲーション:</p>
　　<ul　class="nav　justify-content-center">
　　　　<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>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link　disabled"　href="#">無効</a>
　　　　</li>
　　</ul>
　　　　
　　<p　class="text-right">右揃えナビゲーション:</p>
　　<ul　class="nav　justify-content-end">
　　　　<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>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link　disabled"　href="#">無効</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>
テストを見て‹/›

垂直ナビゲーション

.flex-column　クラスを使用して垂直ナビゲーションを作成します：

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　サンプル</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>垂直ナビゲーション</h2>
　　<p>.flex-column　クラスを使用して垂直ナビゲーションを作成します：</p>
　　<ul　class="nav　flex-column">
　　　　<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>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link　disabled"　href="#">無効</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>
テストを見て‹/›

オプションカード

.navを使用して-tabs　クラスを使用すると、ナビゲーションをオプションカードに変換できます。選択されたオプションには .active　クラスを使用してマークします。

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　サンプル</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>オプションカード</h2>
　　<p>オプションカードナビゲーション:</p>
　　<ul　class="nav　nav-tabs">
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link　active"　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>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link　disabled"　href="#">無効</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>
テストを見て‹/›

カプセルナビゲーション

.nav-pills　クラスを使用すると、ナビゲーションアイテムをカプセル形状に設定できます。

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　サンプル</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>カプセル</h2>
　　<p>カプセルナビゲーション:</p>
　　<ul　class="nav　nav-pills">
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link　active"　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>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link　disabled"　href="#">無効</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>
テストを見て‹/›

ナビゲーション等幅

.nav-justified　クラスを使用すると、ナビゲーションアイテムが等幅に表示されます。

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　サンプル</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>ナビゲーション等幅</h2>
　　<p>.nav-justified　クラスを使用すると、ナビゲーションアイテムが等幅に表示されます。</p>
　　<ul　class="nav　nav-pills　nav-justified">
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link　active"　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>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link　disabled"　href="#">無効</a>
　　　　</li>
　　</ul><br>
　　<p>Justified　tabs:</p>
　　<ul　class="nav　nav-tabs　nav-justified">
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link　active"　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>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link　disabled"　href="#">無効</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>
テストを見て‹/›

カプセルドロップダウンメニュー

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　サンプル</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>カプセルナビゲーションバーにドロップダウンメニュー</h2>
　　<ul　class="nav　nav-pills">
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link　active"　href="#">アクティブ</a>
　　　　</li>
　　　　<li　class="nav-item　dropdown">
　　　　　　<a　class="nav-link　dropdown-toggle"　data-toggle="dropdown"　href="#">ドロップダウン</a>
　　　　　　<div　class="dropdown-menu">
　　　　　　　　<a　class="dropdown-item"　href="#">リンク　1</a>
　　　　　　　　<a　class="dropdown-item"　href="#">リンク　2</a>
　　　　　　　　<a　class="dropdown-item"　href="#">リンク　3</a></div>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">リンク</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link　disabled"　href="#">無効</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>
テストを見て‹/›

オプションカードドロップダウンメニュー

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　サンプル</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>オプションカードドロップダウンメニュー</h2>
　　<ul　class="nav　nav-tabs">
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link　active"　href="#">アクティブ</a>
　　　　</li>
　　　　<li　class="nav-item　dropdown">
　　　　　　<a　class="nav-link　dropdown-toggle"　data-toggle="dropdown"　href="#">ドロップダウン</a>
　　　　　　<div　class="dropdown-menu">
　　　　　　　　<a　class="dropdown-item"　href="#">リンク　1</a>
　　　　　　　　<a　class="dropdown-item"　href="#">リンク　2</a>
　　　　　　　　<a　class="dropdown-item"　href="#">リンク　3</a></div>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">リンク</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link　disabled"　href="#">無効</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>
テストを見て‹/›

動的オプションカード

オプションカードが動的に切り替え可能になるようにする場合は、各リンクに data-toggle="tab"　属性を追加。 各オプションに対応する内容の上に .tab-pane　クラス。

フェード効果があると希望する場合は、.tab-pane　後ろに追加 　 .fadeクラス:

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　サンプル</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>オプションカード切り替え</h2>
　　<br>
　　<!--　Nav　tabs　-->
　　<ul　class="nav　nav-tabs"　role="tablist">
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link　active"　data-toggle="tab"　href="#home">Home</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　data-toggle="tab"　href="#menu"1">メニュー　1</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　data-toggle="tab"　href="#menu"2">メニュー　2</a>
　　　　</li>
　　</ul>
　　<!--　Tab　panes　-->
　　<div　class="tab-content">
　　　　<div　id="home"　class="container　tab-pane　active"><br>
　　　　　　<h2>HOME</h2>
　　　　　　<p>ロレム・イプサム・ドロール・シット・アメト、コンセクタ・アディピシア・エリート、セド・ド・ユイモド・テンプラ・インシディンタ・ユト・ラボレ・エト・ドロール・マグナ・アリクア。</p>/p>
　　　　</div>
　　　　<div id="menu1" class="container tab-pane fade"><br>
　　　　　　<h2>メニュー　1</h2>
　　　　　　<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>/p>
　　　　</div>
　　　　<div id="menu2" class="container tab-pane fade"><br>
　　　　　　<h2>メニュー　2</h2>
　　　　　　<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>/p>
　　　　</div>
　　</div>
</div>
</body>
</html>
テストを見て‹/›

カプセル状のダイナミックなタブ

カプセル状のダイナミックなタブを切り替えるには、上記のサンプルのコード内の data-toggle 属性が data-toggle="pill":

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　サンプル</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>カプセル・タブ・切り替え</h2>
　　<br>
　　<!--　Nav　pills　-->
　　<ul　class="nav　nav-pills"　role="tablist">
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link　active"　data-toggle="pill"　href="#home">ホーム</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　data-toggle="pill"　href="#menu1">メニュー　1</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　data-toggle="pill"　href="#menu2">メニュー　2</a>
　　　　</li>
　　</ul>
　　<!--　Tab　panes　-->
　　<div　class="tab-content">
　　　　<div　id="home"　class="container　tab-pane　active"><br>
　　　　　　<h2>HOME</h2>
　　　　　　<p>ロレム・イプサム・ドロール・シット・アメト、コンセクタ・アディピシア・エリート、セド・ド・ユイモド・テンプラ・インシディンタ・ユト・ラボレ・エト・ドロール・マグナ・アリクア。</p>/p>
　　　　</div>
　　　　<div id="menu1" class="container tab-pane fade"><br>
　　　　　　<h2>メニュー　1</h2>
　　　　　　<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>/p>
　　　　</div>
　　　　<div id="menu2" class="container tab-pane fade"><br>
　　　　　　<h2>メニュー　2</h2>
　　　　　　<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>/p>
　　　　</div>
　　</div>
</div>
</body>
</html>
テストを見て‹/›
Bootstrap4 ナビゲーションバーBootstrap4 折りたたみ