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

Bootstrap4 基本チュートリアル

Bootstrap4 ナビゲーションバー

　 　 Bootstrap ナビゲーションバーコンポーネントを使用して、ウェブサイトやアプリケーションにリスポンシブなナビゲーションバーを作成できます。これらのリスポンシブナビゲーションバーは最初は小視口を持つデバイス（例えば、スマートフォン）で折り畳まれていますが、ユーザーが切り替えボタンをクリックすると展開されます。しかし、ノートパソコンやデスクトップなどの中型および大型デバイスでは、通常通り水平に表示されます。

ナビゲーションバーは通常、ページの上部に配置されます。

navbar クラスを使用して標準的なナビゲーションバーを作成できます。続いて: .navbar-expand-xl|lg|md|sm クラスを使用してリスポンシブなナビゲーションバーを作成します。 （大画面では水平に広がり、小画面では垂直に並びます）。

ナビゲーションバーのオプションは <ul> 要素を使用してクラスを追加できます。 その後、<li> 要素に .nav を追加します。-item クラス、<a> 要素に .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>
<nav　class="navbar　navbar-expand-sm　bg-light">
　　<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>
<br>
<div　class="container-fluid">
　　<h2>シンプルなナビゲーションバーの例</h2>
　　<p>ナビゲーションバーは通常、ページの上部に配置されます。</p>
　　<p> navbar クラスを使用して標準的なナビゲーションバーを作成できます。続いて: navbar-expand-xl|lg|md|sm クラスを使用してリスポンシブなナビゲーションバーを作成します。（大画面では水平に広がり、小画面では垂直に並びます）。</p>
</div>
</body>
</html>
テストを見てみる ‹/›

垂直ナビゲーションバー

を削除することで .navbar-expand-xl|lg|md|sm クラスを使用して垂直ナビゲーションバーを作成します:

<!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>
<nav  class="navbar  bg-light">
　　<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>
<br>
<div　class="container-fluid">
　　<h2>垂直ナビゲーションバー</h2>
　　<p>ナビゲーションバーは通常、ページのヘッダーに配置されます。</p>
</div>
</body>
</html>
テストを見てみる ‹/›

異なる色のナビゲーションバー

異なる色のナビゲーションバーを作成するために以下のクラスを使用できます：.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark と .bg-light)。

ヒント: 暗い背景の場合は、テキストの色を明るく設定し、明るい背景の場合は、テキストの色を暗く設定する必要があります。

<!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>
</div>
<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>
<nav　class="navbar　navbar-expand-sm　bg-dark　navbar-dark">
　　<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>
<nav　class="navbar　navbar-expand-sm　bg-primary navbar-dark">
　　<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>
<nav　class="navbar　navbar-expand-sm　bg-success navbar-dark">
　　<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>
<nav　class="navbar　navbar-expand-sm　bg-info navbar-dark">
　　<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>
<nav　class="navbar　navbar-expand-sm　bg-warning navbar-dark">
　　<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>
<nav　class="navbar　navbar-expand-sm　bg-danger navbar-dark">
　　<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>
<nav　class="navbar　navbar-expand-sm　bg-secondary navbar-dark">
　　<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>
</body>
</html>
テストを見てみる ‹/›

アクティブおよび非アクティブ状態: 選択されたオプションをハイライト表示するために <a> 要素に .active クラスを追加できます。.disabled クラスはリンクをクリック不可に設定します。

ブランド/Logo

.navbar-brand クラスはブランドをハイライト表示するために使用されます/Logo:

<!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>
<nav　class="navbar　navbar-expand-sm　bg-dark　navbar-dark">
　　<!--　ブランド/logo　-->
　　<a　class="navbar-brand"　href="#">ロゴ</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>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link　3</a>
　　　　</li>
　　</ul>
</nav>
<div　class="container-fluid">
　　<h2>ブランド/Logo</h2>
　　<p>.navbar-brand クラスはブランドをハイライト表示するために使用されます/Logo:</p>
</div>
</body>
</html>
テストを見てみる ‹/›

画像を使用する場合、.navbar-brand クラスで画像をナビゲーションバーに適応させる設定。

<!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>
<nav　class="navbar　navbar-expand-sm　bg-dark　navbar-dark">
　　<!--　ブランド/logo　-->
　　<a　class="navbar-brand"  href="#">
　　　　<img  src="https://static.oldtoolbag.com/images/mix/bird.jpg"  alt="logo"  style="width:40px;">
　　</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>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link　3</a>
　　　　</li>
　　</ul>
</nav>
<div　class="container-fluid">
　　<h2>ブランド　/　Logo</h2>
　　<p>画像を使用する場合、.navbar-brand クラスで画像をナビゲーションバーに適応させる設定。</p>
</div>
</body>
</html>
テストを見てみる ‹/›

折り畳みナビゲーションバー

通常、小さいスクリーンではナビゲーションバーを折り畳み、クリックでナビゲーションオプションを表示します。

折り畳みナビゲーションバーを作成するには、ボタンに追加することができます。 data-toggle="collapse" と data-target="#"thetarget"クラス。それから、クラスを設定した div 要素にナビゲーション内容（リンク）を囲みます、div 要素の id はボタンの data-target で指定された id:

<!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>
<nav　class="navbar　navbar-expand-md　bg-dark　navbar-dark">
　　<a　class="navbar-brand"　href="#">Navbar</a>
　　<button　class="navbar-toggler"　type="button"　data-toggle="collapse"　data-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="#">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>
<br>
<div　class="container">
　　<h2>折りたたみナビゲーションバー</h2>
　　<p>通常、小さなスクリーンではナビゲーションバーを折りたたみ、クリックしてナビゲーションオプションを表示します。</p>
　　<p>ヒント:　.navbar-expand-md　クラスを使用すると、ナビゲーションリンクは常に隠され、切り替えボタンは常に表示されます。</p>
</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>
<nav　class="navbar　navbar-expand-sm　bg-dark　navbar-dark">
　　<!--　ブランド　-->
　　<a　class="navbar-brand"　href="#">ロゴ</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 リンク
　　　　　　</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>
　　</ul>
</nav>
<br>
　　
<div　class="container">
　　<h2>ナビゲーションバーにはドロップダウンメニューを使用しています</h2>
　　<p>ナビゲーションバーにはドロップダウンメニューを設定できます。</p>
</div>
</body>
</html>
テストを見てみる ‹/›

ナビゲーションバーのフォームとボタン

ナビゲーションバーのフォーム <form> 要素はクラスを使用して入力フィールドとボタンのレイアウトを整えます：

<!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>
<nav　class="navbar　navbar-expand-sm　bg-dark　navbar-dark">
　　<form　class="form-inline">
　　　　<input　class="form-control"　type="text"　placeholder="検索">
　　　　<button　class="btn　btn-success"　type="button">検索</button>
　　</form>
</nav>
<br>
<div　class="container">
　　<h2>ナビゲーションバーのフォーム</h2>
　　<p>ナビゲーションバーのフォーム　form　要素は　class="form-inline"　クラスを使用して入力フィールドとボタンのレイアウトを整えます：</p>
</div>
</body>
</html>
テストを見てみる ‹/›

他の入力フィールドクラスも使用できます、例えば 　.input-group-addon クラスは、入力フィールドの前に小さなタグを追加するために使用されます。

<!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>
<nav　class="navbar　navbar-expand-sm　bg-dark　navbar-dark">
　　<form　class="form-inline">
　　　　<div　class="input-group">
　　　　　　<span　class="input">-group-<input　type="text"　class="form/span>
　　　　　　control"　placeholder="Username">-<input　type="text"　class="form
　　　　</div>　　　　
　　</form>
</nav>
<br>
<div　class="container">
　　<h2>导航表单</h2>
　　<p>　.input-group-addon　类用于在输入框前添加小标签。</p>
</div>
</body>
</html>
テストを見てみる ‹/›

导航栏文本

使用 .navbar-text 类来设置导航栏上非链接文本，可以保证水平对齐，颜色与内边距一样。

<!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>
<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>
<br>
<div　class="container">
　　<h2>导航栏文本</h2>
　　<p>使用　.navbar-text　类来设置导航栏上非链接文本，可以保证水平对齐，颜色与内边距一样。</p>
</div>
</body>
</html>
テストを見てみる ‹/›

固定导航栏

导航栏可以固定在头部或者底部。

我们使用 .fixed-top 类来实现导航栏的固定：

<!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　　style="height:1500px">
<nav　class="navbar　navbar-expand-sm　bg-dark　navbar-dark　fixed-top">
　　<a　class="navbar-brand"　href="#">ロゴ</a>
　　<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>
　　</ul>
</nav>
<div　class="container-fluid"　style="margin-top:80px">
　　<h2>固定导航栏</h2>
　　<p>ナビゲーションバーはヘッダーまたはフッターに固定できます。</p>
　　<h1>ページをスクロールして効果を確認してください。</h1>
</div>
</body>
</html>
テストを見てみる ‹/›

.fixed-bottom 类用于设置导航栏固定在底部：

<!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　style="height:1500px">
<nav　class="navbar　navbar-expand-sm　bg-dark　navbar-dark　fixed-bottom">
　　<a　class="navbar-brand"　href="#">ロゴ</a>
　　<ul　class="navbar-nav">
　　　　<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>
</nav>
<div　class="container-fluid">
　　<h2>フッターに固定されたナビゲーションバー</h2>
　　<p>ナビゲーションバーはヘッダーまたはフッターに固定できます。</p>
　　<h1>ページをスクロールして効果を確認してください。</h1>
</div>
</body>
</html>
テストを見てみる ‹/›
Bootstrap4 パンくずリストナビゲーションBootstrap4 ナビゲーション