Bootstrap4-navs
提供：Dev Guides
説明
Bootstrapは、水平メニューでサイトのナビゲーションアイテムを提供します。
リンクが無効になっているベースナビゲーション
<ul>要素に_.nav_クラスを追加し、その後にnavアイテムを追加してnavメニューを作成し、_nav.link_クラスを追加してnavアイテムのリンクを作成します。 次の例はこれを示しています-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Base Nav and Disabled Link</h2>
<ul class = "nav">
<li class = "nav-item">
<a class = "nav-link active" href = "#">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
<li class = "nav-item">
<a class = "nav-link disabled" href = "#">Sign-In (Disabled)</a>
</li>
</ul>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
出力
位置合わせされたナビゲーション
次の例に示すように、。justify-content-center_クラスを追加することで中心に、。justify-content-end_クラスを追加することで右側に配置することができます-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class="container">
<h2>Center Aligned Nav</h2>
<ul class = "nav justify-content-center">
<li class = "nav-item">
<a class = "nav-link active" href = "#">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Sign-In</a>
</li>
</ul>
<h2>Right Aligned Nav</h2>
<ul class = "nav justify-content-end">
<li class = "nav-item">
<a class = "nav-link active" href = "#">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Sign-In</a>
</li>
</ul>
</div>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous"></script>
<!-- Popper -->
<script src =" https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous"></script>
</body>
</html>それは次の結果を生成します-
出力
垂直方向の配置
次の例に示すように、。flex-column_クラスを.nav_要素に追加することにより、垂直ナビゲーションを作成できます-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Vertical Alignment</h2>
<ul class = "nav flex-column">
<li class = "nav-item">
<a class = "nav-link active" href = "#">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Sign-In</a>
</li>
</ul>
</div>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous"></script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous"></script>
</body>
</html>それは次の結果を生成します-
出力
タブ、丸薬、タブとドロップダウン付き丸薬
.nav-tabs_クラスを使用してタブ付きインターフェイスnavを作成し、。nav-pills_クラスを使用して錠剤をnavするnavメニューを使用できます。 また、以下の例に示すように、<li>要素の_.dropdown_クラスを使用して、ドロップダウンメニューをタブまたはピルに追加することもできます-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Navigation Tabs</h2>
<ul class = "nav nav-tabs">
<li class = "nav-item">
<a class = "nav-link active" href = "#">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Sign-In</a>
</li>
</ul>
<br>
<h2>Navigation Pills</h2>
<ul class = "nav nav-pills">
<li class = "nav-item">
<a class = "nav-link active" href = "#">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Sign-In</a>
</li>
</ul>
<br>
<h2>Tabs With Dropdown</h2>
<ul class = "nav nav-tabs">
<li class = "nav-item">
<a class = "nav-link active" href = "#">Home</a>
</li>
<li class = "nav-item dropdown">
<a class = "nav-link dropdown-toggle" data-toggle = "dropdown"
href = "#" role = "button" aria-haspopup = "true"
aria-expanded = "false">Library</a>
<div class = "dropdown-menu">
<a class = "dropdown-item" href = "#">HTML-5</a>
<a class = "dropdown-item" href = "#">CSS-3</a>
<a class = "dropdown-item" href = "#">JavaScript</a>
<div class = "dropdown-divider"></div>
<a class = "dropdown-item" href = "#">Bootstrap 4</a>
</div>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
</ul>
<br>
<h2>Pills with dropdown</h2>
<ul class = "nav nav-pills">
<li class = "nav-item">
<a class = "nav-link active" href = "#">Home</a>
</li>
<li class = "nav-item dropdown">
<a class = "nav-link dropdown-toggle" data-toggle = "dropdown"
href =" #" role = "button" aria-haspopup = "true"
aria-expanded =" false">Library</a>
<div class = "dropdown-menu">
<a class = "dropdown-item" href = "#">HTML-5</a>
<a class = "dropdown-item" href = "#">CSS-3</a>
<a class = "dropdown-item" href = "#">JavaScript</a>
<div class = "dropdown-divider"></div>
<a class = "dropdown-item" href = "#">Bootstrap 4</a>
</div>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
</ul>
</div>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous"></script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous"></script>
</body>
</html>それは次の結果を生成します-
出力
切り替え可能なタブとピル
data-toggle = "tab" _または_data-toggle = "pill" _属性を<a>要素に追加することにより、トグル可能なタブまたはピルを作成できます。 すべてのタブまたはピルについて、一意のIDを持つ.tab-pane_クラスを追加し、_。tab-content_クラスを持つ<div>要素内にコンテンツを入力します。
次の例はこれを示しています-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Toggleable Tabs</h2>
<ul class = "nav nav-tabs" id = "myTab" role = "tablist">
<li class = "nav-item">
<a class = "nav-link active" id = "home-tab" data-toggle = "tab"
href = "#home" role = "tab" aria-controls = "home"
aria-selected = "true">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" id = "aboutus-tab" data-toggle = "tab"
href = "#aboutus" role = "tab" aria-controls = "aboutus"
aria-selected = "false">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" id = "contact-tab" data-toggle = "tab"
href = "#contact" role = "tab" aria-controls = "contact"
aria-selected = "false">Contact</a>
</li>
</ul>
<div class = "tab-content" id = "myTabContent">
<div class = "tab-pane fade show active" id = "home" role = "tabpanel"
aria-labelledby = "home-tab">Content for Home tab</div>
<div class = "tab-pane fade" id = "aboutus" role = "tabpanel"
aria-labelledby = "aboutus-tab">Content for About Us tab</div>
<div class = "tab-pane fade" id = "contact" role = "tabpanel"
aria-labelledby = "contact-tab">Content for Contact tab</div>
</div>
<br>
<h2>Toggleable Pills</h2>
<ul class = "nav nav-pills mb-3" id = "pills-tab" role = "tablist">
<li class = "nav-item">
<a class = "nav-link active" id = "pills-home-tab"
data-toggle = "pill" href = "#pills-home" role = "tab"
aria-controls = "pills-home" aria-selected = "true">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" id = "pills-aboutus-tab" data-toggle = "pill"
href = "#pills-aboutus" role = "tab" aria-controls = "pills-aboutus"
aria-selected = "false">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" id = "pills-contact-tab" data-toggle = "pill"
href = "#pills-contact" role = "tab" aria-controls = "pills-contact"
aria-selected = "false">Contact</a>
</li>
</ul>
<div class = "tab-content" id = "pills-tabContent">
<div class = "tab-pane fade show active" id = "pills-home"
role = "tabpanel" aria-labelledby = "pills-home-tab">
Content for Home tab
</div>
<div class = "tab-pane fade" id = "pills-aboutus" role = "tabpanel"
aria-labelledby = "pills-aboutus-tab">
Content for About Us tab
</div>
<div class = "tab-pane fade" id = "pills-contact" role = "tabpanel"
aria-labelledby = "pills-contact-tab">
Content for Contact tab
</div>
</div>
</div>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous">
</script>
</body>
</html>それは次の結果を生成します-
