nav
bootstrap5.css
bootstrap5.css
article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
display: block;
}
bootstrap5.css
.nav {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
bootstrap5.css
.nav-link {
display: block;
padding: 0.5rem 1rem;
}
bootstrap5.css
.nav-link:hover,
.nav-link:focus {
text-decoration: none;
}
bootstrap5.css
.nav-link.disabled {
color: #6c757d;
pointer-events: none;
cursor: default;
}
bootstrap5.css
.nav-tabs {
border-bottom: 1px solid #dee2e6;
}
bootstrap5.css
.nav-tabs .nav-item {
margin-bottom: -1px;
}
bootstrap5.css
.nav-tabs .nav-link {
border: 1px solid transparent;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}
bootstrap5.css
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
border-color: #e9ecef #e9ecef #dee2e6;
}
bootstrap5.css
.nav-tabs .nav-link.disabled {
color: #6c757d;
background-color: transparent;
border-color: transparent;
}
bootstrap5.css
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
color: #495057;
background-color: #fff;
border-color: #dee2e6 #dee2e6 #fff;
}
bootstrap5.css
.nav-tabs .dropdown-menu {
margin-top: -1px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
bootstrap5.css
.nav-pills .nav-link {
border-radius: 0.25rem;
}
bootstrap5.css
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
color: #fff;
background-color: #007bff;
}
bootstrap5.css
.nav-fill .nav-item {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
text-align: center;
}
bootstrap5.css
.nav-justified .nav-item {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
text-align: center;
}
bootstrap5.css
.navbar {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0.5rem 1rem;
}
bootstrap5.css
.navbar > .container,
.navbar > .container-fluid {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
}
bootstrap5.css
.navbar-brand {
display: inline-block;
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
margin-right: 1rem;
font-size: 1.25rem;
line-height: inherit;
white-space: nowrap;
}
bootstrap5.css
.navbar-brand:hover,
.navbar-brand:focus {
text-decoration: none;
}
bootstrap5.css
.navbar-nav {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
bootstrap5.css
.navbar-nav .nav-link {
padding-right: 0;
padding-left: 0;
}
bootstrap5.css
.navbar-nav .dropdown-menu {
position: static;
float: none;
}
bootstrap5.css
.navbar-text {
display: inline-block;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
bootstrap5.css
.navbar-collapse {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-align: center;
align-items: center;
}
bootstrap5.css
.navbar-toggler {
padding: 0.25rem 0.75rem;
font-size: 1.25rem;
line-height: 1;
background-color: transparent;
border: 1px solid transparent;
border-radius: 0.25rem;
}
bootstrap5.css
.navbar-toggler:hover,
.navbar-toggler:focus {
text-decoration: none;
}
bootstrap5.css
.navbar-toggler-icon {
display: inline-block;
width: 1.5em;
height: 1.5em;
vertical-align: middle;
content: "";
background: no-repeat center center;
background-size: 100% 100%;
}
bootstrap5.css
@media (max-width: 575.98px) {
.navbar-expand-sm > .container,
.navbar-expand-sm > .container-fluid {
padding-right: 0;
padding-left: 0;
}
}
bootstrap5.css
@media (min-width: 576px) {
.navbar-expand-sm {
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-ms-flex-pack: start;
justify-content: flex-start;
}
.navbar-expand-sm .navbar-nav {
-ms-flex-direction: row;
flex-direction: row;
}
.navbar-expand-sm .navbar-nav .dropdown-menu {
position: absolute;
}
.navbar-expand-sm .navbar-nav .nav-link {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.navbar-expand-sm > .container,
.navbar-expand-sm > .container-fluid {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.navbar-expand-sm .navbar-collapse {
display: -ms-flexbox !important;
display: flex !important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
.navbar-expand-sm .navbar-toggler {
display: none;
}
}
bootstrap5.css
@media (max-width: 767.98px) {
.navbar-expand-md > .container,
.navbar-expand-md > .container-fluid {
padding-right: 0;
padding-left: 0;
}
}
bootstrap5.css
@media (min-width: 768px) {
.navbar-expand-md {
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-ms-flex-pack: start;
justify-content: flex-start;
}
.navbar-expand-md .navbar-nav {
-ms-flex-direction: row;
flex-direction: row;
}
.navbar-expand-md .navbar-nav .dropdown-menu {
position: absolute;
}
.navbar-expand-md .navbar-nav .nav-link {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.navbar-expand-md > .container,
.navbar-expand-md > .container-fluid {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.navbar-expand-md .navbar-collapse {
display: -ms-flexbox !important;
display: flex !important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
.navbar-expand-md .navbar-toggler {
display: none;
}
}
bootstrap5.css
@media (max-width: 991.98px) {
.navbar-expand-lg > .container,
.navbar-expand-lg > .container-fluid {
padding-right: 0;
padding-left: 0;
}
}
bootstrap5.css
@media (min-width: 992px) {
.navbar-expand-lg {
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-ms-flex-pack: start;
justify-content: flex-start;
}
.navbar-expand-lg .navbar-nav {
-ms-flex-direction: row;
flex-direction: row;
}
.navbar-expand-lg .navbar-nav .dropdown-menu {
position: absolute;
}
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.navbar-expand-lg > .container,
.navbar-expand-lg > .container-fluid {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.navbar-expand-lg .navbar-collapse {
display: -ms-flexbox !important;
display: flex !important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
.navbar-expand-lg .navbar-toggler {
display: none;
}
}
bootstrap5.css
@media (max-width: 1199.98px) {
.navbar-expand-xl > .container,
.navbar-expand-xl > .container-fluid {
padding-right: 0;
padding-left: 0;
}
}
bootstrap5.css
@media (min-width: 1200px) {
.navbar-expand-xl {
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-ms-flex-pack: start;
justify-content: flex-start;
}
.navbar-expand-xl .navbar-nav {
-ms-flex-direction: row;
flex-direction: row;
}
.navbar-expand-xl .navbar-nav .dropdown-menu {
position: absolute;
}
.navbar-expand-xl .navbar-nav .nav-link {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.navbar-expand-xl > .container,
.navbar-expand-xl > .container-fluid {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.navbar-expand-xl .navbar-collapse {
display: -ms-flexbox !important;
display: flex !important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
.navbar-expand-xl .navbar-toggler {
display: none;
}
}
bootstrap5.css
.navbar-expand {
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-ms-flex-pack: start;
justify-content: flex-start;
}
bootstrap5.css
.navbar-expand > .container,
.navbar-expand > .container-fluid {
padding-right: 0;
padding-left: 0;
}
bootstrap5.css
.navbar-expand .navbar-nav {
-ms-flex-direction: row;
flex-direction: row;
}
bootstrap5.css
.navbar-expand .navbar-nav .dropdown-menu {
position: absolute;
}
bootstrap5.css
.navbar-expand .navbar-nav .nav-link {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
bootstrap5.css
.navbar-expand > .container,
.navbar-expand > .container-fluid {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
bootstrap5.css
.navbar-expand .navbar-collapse {
display: -ms-flexbox !important;
display: flex !important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
bootstrap5.css
.navbar-expand .navbar-toggler {
display: none;
}
bootstrap5.css
.navbar-light .navbar-brand {
color: rgba(0, 0, 0, 0.9);
}
bootstrap5.css
.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:focus {
color: rgba(0, 0, 0, 0.9);
}
bootstrap5.css
.navbar-light .navbar-nav .nav-link {
color: rgba(0, 0, 0, 0.5);
}
bootstrap5.css
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
color: rgba(0, 0, 0, 0.7);
}
bootstrap5.css
.navbar-light .navbar-nav .nav-link.disabled {
color: rgba(0, 0, 0, 0.3);
}
bootstrap5.css
.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active {
color: rgba(0, 0, 0, 0.9);
}
bootstrap5.css
.navbar-light .navbar-toggler {
color: rgba(0, 0, 0, 0.5);
border-color: rgba(0, 0, 0, 0.1);
}
bootstrap5.css
.navbar-light .navbar-text {
color: rgba(0, 0, 0, 0.5);
}
bootstrap5.css
.navbar-light .navbar-text a {
color: rgba(0, 0, 0, 0.9);
}
bootstrap5.css
.navbar-light .navbar-text a:hover,
.navbar-light .navbar-text a:focus {
color: rgba(0, 0, 0, 0.9);
}
bootstrap5.css
.navbar-dark .navbar-brand {
color: #fff;
}
bootstrap5.css
.navbar-dark .navbar-brand:hover,
.navbar-dark .navbar-brand:focus {
color: #fff;
}
bootstrap5.css
.navbar-dark .navbar-nav .nav-link {
color: rgba(255, 255, 255, 0.5);
}
bootstrap5.css
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
color: rgba(255, 255, 255, 0.75);
}
bootstrap5.css
.navbar-dark .navbar-nav .nav-link.disabled {
color: rgba(255, 255, 255, 0.25);
}
bootstrap5.css
.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active {
color: #fff;
}
bootstrap5.css
.navbar-dark .navbar-toggler {
color: rgba(255, 255, 255, 0.5);
border-color: rgba(255, 255, 255, 0.1);
}
bootstrap5.css
.navbar-dark .navbar-text {
color: rgba(255, 255, 255, 0.5);
}
bootstrap5.css
.navbar-dark .navbar-text a {
color: #fff;
}
bootstrap5.css
.navbar-dark .navbar-text a:hover,
.navbar-dark .navbar-text a:focus {
color: #fff;
}
bootstrap5.css
@media print {
/* 印刷字に利用するCSS mediaで大きく括って、それぞれのタグの設定をする */
*,
*::before,
*::after {
text-shadow: none !important;
box-shadow: none !important;
}
a:not(.btn) {
text-decoration: underline;
}
abbr[title]::after {
content: " (" attr(title) ")";
}
pre {
white-space: pre-wrap !important;
}
pre,
blockquote {
border: 1px solid #adb5bd;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
@page {
size: a3;
}
body {
min-width: 992px !important;
}
.container {
min-width: 992px !important;
}
.navbar {
display: none;
}
.badge {
border: 1px solid #000;
}
.table {
border-collapse: collapse !important;
}
.table td,
.table th {
background-color: #fff !important;
}
.table-bordered th,
.table-bordered td {
border: 1px solid #dee2e6 !important;
}
.table-dark {
color: inherit;
}
.table-dark th,
.table-dark td,
.table-dark thead th,
.table-dark tbody + tbody {
border-color: #dee2e6;
}
.table .thead-dark th {
color: inherit;
border-color: #dee2e6;
}
}
html bootstrap5 Sample
カードにピル型ナビゲーションを組み込む:nav-pillsとcard-header-pills
<div class="card">
<div class="card-header">
<!-- ピル型のナビゲーション:card-header-pills -->
<ul class="nav nav-pills card-header-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>
</ul>
</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p> <a href="#" class="btn btn-primary">ボタン</a>
</div>
</div>
カードにナビゲーションを組み込む:nav-tabs
<div class="card">
<!-- カードのヘッダー -->
<div class="card-header">
<!-- タブ型のナビゲーション:card-header-tabs -->
<ul class="nav nav-tabs card-header-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>
</ul>
</div>
<!-- カードの本文 -->
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
<a href="#" class="btn btn-primary">ボタン</a>
</div>
</div>
ページネーション:pagination
<nav>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">前</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">次</a></li>
</ul>
</nav>
ページネーションの配置 中央寄せ:justify-content-center
<nav>
<ul class="pagination justify-content-center">
<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">前</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">次</a></li>
</ul>
</nav>
ページネーションの配置 右寄せ:justify-content-end
<nav>
<ul class="pagination justify-content-end">
<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">前</a> </li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">次</a></li>
</ul>
</nav>
ページネーションにアイコンを使用する
<nav>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#" aria-label="前へ"><span aria-hidden="true">«</span><span
class="sr-only">前へ</span></a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="次へ"><span aria-hidden="true">»</span><span
class="sr-only">次へ</span></a></li>
</ul>
</nav>
リンクの無効状態やアクティブ状態を指定する:disabled
<nav>
<ul class="pagination">
<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">前</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2 <span class="sr-only">(現ページ)</span></a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">次</a></li>
</ul>
</nav>
ページネーションのサイズ:pagination-lg
<nav>
<ul class="pagination pagination-lg">
<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">前</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">次</a></li>
</ul>
</nav>
ページネーションのサイズ:pagination-sm
<nav>
<ul class="pagination pagination-sm">
<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">次</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">前</a></li>
</ul>
</nav>
タブとタブパネル:navとnav-tabsとtab-contentとtab-pane
ホームのコンテンツ
プロフィールのコンテンツ
コンタクトのコンテンツ
<!-- タブ部分 -->
<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">ホーム</a></li>
<li class="nav-item"><a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
aria-controls="profile" aria-selected="false">プロフィール</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">コンタクト</a></li>
</ul>
<!-- パネル部分 -->
<!-- herfの#とidで切り替える -->
<div class="tab-content mt-3" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">ホームのコンテンツ</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">プロフィールのコンテンツ</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">コンタクトのコンテンツ</div>
</div>
タブ型ナビゲーション(JavaScript経由):thisとtabとshow
ホームのコンテンツが入ります。
プロフィールのコンテンツが入ります。
コンタクトのコンテンツが入ります。
<ul class="nav nav-tabs" id="myTab_js" role="tablist">
<li class="nav-item"><a class="nav-link active" id="home-tab" href="#home_js" role="tab" aria-controls="home"
aria-selected="true">ホーム</a></li>
<li class="nav-item"><a class="nav-link" id="profile-tab" href="#profile_js" role="tab" aria-controls="profile"
aria-selected="false">プロフィール</a></li>
<li class="nav-item"><a class="nav-link" id="contact-tab" href="#contact_js" role="tab" aria-controls="contact"
aria-selected="false">コンタクト</a></li>
</ul>
<!-- パネル部分 -->
<div class="tab-content mt-3" id="myTabContent">
<div class="tab-pane fade show active" id="home_js" role="tabpanel" aria-labelledby="home-tab">ホームのコンテンツが入ります。</div>
<div class="tab-pane fade" id="profile_js" role="tabpanel" aria-labelledby="profile-tab">プロフィールのコンテンツが入ります。</div>
<div class="tab-pane fade" id="contact_js" role="tabpanel" aria-labelledby="contact-tab">コンタクトのコンテンツが入ります。</div>
</div>
<script>
$('#myTab_js a').on('click', function (e) {
// 本来のaの通常処理をしない
e.preventDefault()
$(this).tab('show')
})
</script>
ナビゲーションバー基本:navbarとnavbar-brandとcollapse
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!-- TOPは常に表示 -->
<a class="navbar-brand" href="#">TOP</a>
<!-- navbar-togglerでレスポンシブ -->
<!-- レスポンシブ状態でないと、トグルアイコンは非表示になり、メニューが表示される -->
<!-- レスポンシブになると、トグルアイコンが表示され、メニューは非表示になる -->
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav2"
aria-controls="navbarNav2" aria-expanded="false" aria-label="ナビゲーションの切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav2">
<!-- メニューはulとliを使う -->
<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>
ナビバーとコンテナ:container
コンテンツcontainer
コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">TOP</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav22"
aria-controls="navbarNav2" aria-expanded="false" aria-label="ナビゲーションの切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav22">
<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>
</div>
</nav>
<!-- ここから、コンテンツが始まる -->
<div class="container bg-light">
<h4>コンテンツcontainer</h4>
<p>
コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。
</p>
</div>
ナビバーの検索窓:form-inline
<nav class="navbar navbar-expand navbar-dark bg-dark">
<!-- 画面が狭い時はアイコン、画面が広い時メニューを表示 -->
<a class="navbar-brand" href="#">TOP</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active"><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>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
外部コンテンツの表示/非表示:navbar-togglerとnavbar-toggler-icon
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h4 class="text-white">折り畳みコンテンツ</h4>
<span class="text-muted">ナビゲーションバーブランド経由で切り替え可</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent"
aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
ナビバーの中に入力グループ
<nav class="navbar navbar-dark bg-dark">
<form class="form-inline">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="basic-addon1">
</div>
</form>
</nav>
ナビゲーションドロップダウンメニュー:dropdown-toggle
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">ブランド</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<!-- dropdown-toggleを使う -->
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenu" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
ドロップダウンメニュー
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenu">
<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 active"><a class="nav-link" href="#">メニュー1</a></li>
<li class="nav-item active"><a class="nav-link" href="#">メニュー2</a></li>
<li class="nav-item"><a class="nav-link" href="#">メニュー3</a></li>
</ul>
</div>
</nav>
ナビゲーションバー内テキスト:navbar-text
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">ブランド</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarText"
aria-controls="navbarText" aria-expanded="false" aria-label="ナビゲーションの切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link" href="#">ホーム </a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
</ul>
<!-- ナビバー内にテキストを表示したい場合 -->
<span class="navbar-text ml-auto">ナビゲーションバーテキスト</span>
</div>
</nav>
ピル型ナビゲーション:nav-pills
<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 disabled" href="#">無効</a></li>
</ul>
ナビゲ―ション項目の幅を調整:nav-fill
<!-- 収まらない場合は、改行される -->
<nav class="nav nav-pills nav-fill">
<a class="nav-item nav-link active" href="#">リンク1</a>
<a class="nav-item nav-link" href="#">リンク2</a>
<a class="nav-item nav-link active" href="#">長いテキストリンク</a>
<a class="nav-item nav-link" href="#">リンク3</a>
</nav>
ナビゲ―ション項目の幅を調整:nav-justified
<!-- 幅に合わせる、収まらない場合は高さが変わる -->
<nav class="nav nav-pills nav-justified">
<a class="nav-item nav-link active" href="#">リンク1</a>
<a class="nav-item nav-link" href="#">リンク2</a>
<a class="nav-item nav-link active" href="#">長いテキストリンク</a>
<a class="nav-item nav-link" href="#">リンク3</a>
</nav>
ナビゲーション:flex
ピル型ナビゲーションドロップダウン:nav-linkとdropdown-toggle
<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="#" role="button" aria-haspopup="true"
aria-expanded="false">ドロップダウン</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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">その他リンク</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>
タブ型ナビゲーション:nav-tabs
<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 disabled" href="#">無効</a></li>
</ul>
タブ型ナビゲーションドロップダウン:dropdown-toggle
<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="#" role="button" aria-haspopup="true"
aria-expanded="false">ドロップダウン</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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">その他リンク</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>
ナビゲーションバー 切替ボタンを左寄せに表示:mr-auto
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav02"
aria-controls="navbarNav02" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">ブランド</a>
<div class="collapse navbar-collapse" id="navbarNav02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active"><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>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
ナビゲーションバーアイコンしか出さない
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!-- navbar-brand -->
<a class="navbar-brand" href="#">TOP</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav2"
aria-controls="navbarNav2" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav2">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active"><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>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
ブランドの表示・非表示 ブランドを折り畳んで隠すナビゲーションバ
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<a class="navbar-brand" href="#">ブランドを隠す</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active"><a class="nav-link" href="#">リンク1<span class="sr-only">(現位置)</span></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>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
navbar-brand画像:navbar-brand
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img src="img/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
</nav>
ボタン:navbar
ナビバーのデザイン:navbar-darkとbg-dark
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">ブランド</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<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>
<!-- アウトラインの検索ボタン、darkだど映える -->
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-outline-info my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
ナビバーのデザイン:navbar-darkとbg-primary
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">ブランド</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2"
aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent2">
<ul class="navbar-nav mr-auto">
<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-lightで文字色を暗くし、背景色をCSSで設定
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
<a class="navbar-brand" href="#">ブランド</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent3"
aria-controls="navbarSupportedContent3" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent3">
<ul class="navbar-nav mr-auto">
<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>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-outline-primary my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
ナビゲーション:navとnav-itemとnav-link
ナビゲーション中央寄せ:justify-content-center
ナビゲーション右寄せ:justify-content-end
ナビゲーションを垂直(縦)に並べる:flex-column
ナビゲーションを縦に並べる:nav要素、li使わないaのみ
<!-- flex-columnを使うと、liと同じ効果が得られる -->
<nav class="nav flex-column">
<a class="nav-link active" href="#">アクティブ</a>
<a class="nav-link" href="#">リンク</a>
<a class="nav-link disabled" href="#">無効</a>
</nav>