bootstrap4.css
.nav-link.disabled {
color: #6c757d;
pointer-events: none;
cursor: default;
}
bootstrap4.css
.nav-tabs .nav-link.disabled {
color: #6c757d;
background-color: transparent;
border-color: transparent;
}
bootstrap4.css
.navbar-light .navbar-nav .nav-link.disabled {
color: rgba(0, 0, 0, 0.3);
}
bootstrap4.css
.navbar-dark .navbar-nav .nav-link.disabled {
color: rgba(255, 255, 255, 0.25);
}
■ナビゲーションバー:navbar:コンポーネント:ナビゲーション:div要素を使用したナビゲーション
<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">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">リンク1<span class="sr-only">(現位置)</span></a>
<a class="nav-item nav-link" href="#">リンク2</a>
<a class="nav-item nav-link" href="#">リンク3</a>
<a class="nav-item nav-link disabled" href="#">無効</a>
</div>
</div>
</nav>
■ナビゲーションバー:navbar:コンポーネント:ナビゲーション:ul要素を使用したナビゲーション
<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 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>
<li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
</ul>
</div>
</nav>
■ナビゲーションバー:navbar:コンポーネント:ナビゲ―ション項目の幅を調整 nav要素を使用したナビゲーション
<nav class="nav nav-pills nav-fill">
<a class="nav-item nav-link active" href="#">アクティブ</a>
<a class="nav-item nav-link" href="#">リンク</a>
<a class="nav-item nav-link disabled" href="#">無効</a>
</nav>
■ナビゲーションバー:navbar:コンポーネント:ナビゲ―ション項目の幅を調整 nav-fillクラスが無い時
<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>
■ナビゲーションバー:navbar:コンポーネント:ナビゲ―ション項目の幅を調整 nav-fillクラスを追加した時
<ul class="nav nav-pills nav-fill">
<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>
■ナビゲーションバー:navbar:コンポーネント:flexユーティリティを利用したレスポンシブなナビゲーション
<nav class="nav nav-pills flex-column flex-sm-row">
<a class="flex-sm-fill text-sm-center nav-link active" href="#">アクティブ</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">リンク</a>
<a class="flex-sm-fill text-sm-center nav-link disabled" href="#">無効</a>
</nav>
■ナビゲーションバー:navbar:コンポーネント:ピル型ナビゲーション
<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>
■ナビゲーションバー:navbar:コンポーネント:ドロップダウンを組み込んだピル型ナビゲーション
<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>
■ナビゲーションバー:navbar:コンポーネント:タブ型ナビゲーション
<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>
■ナビゲーションバー:navbar:コンポーネント:ドロップダウンを組み込んだタブ型ナビゲーション
<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>
■ナビゲーション水平方向、均等:nav:コンポーネント:ナビゲーション:水平方向
<ul class="nav">
<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:コンポーネント:ナビゲーション:中央寄せ
<ul class="nav justify-content-center"><!-- 中央寄せ -->
<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:コンポーネント:ナビゲーション:右寄せ
<ul class="nav justify-content-end">
<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:コンポーネント:ナビゲーションを垂直(縦)に並べる:ul要素
<ul class="nav flex-column">
<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:コンポーネント:ナビゲーションを縦に並べる:nav要素、li使わないaのみ
<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>