ブートストラップ4ナビゲーション
ナビゲーションメニュー
単純な水平メニューを作成する場合は、
.navクラスを<ul>要素に追加し、次に.nav-item
for each<li>を追加して、.nav-linkクラスをリンクに追加します。
例
<ul class="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>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
整列したナビゲーション
クラスを追加し.justify-content-centerてナビゲーションを中央に配置し、クラスを追加してナビゲーションを右揃えに.justify-content-endします。
例
<!-- Centered nav -->
<ul class="nav justify-content-center">
<!-- Right-aligned nav -->
<ul class="nav justify-content-end">
垂直ナビゲーション
クラスを追加.flex-columnして、垂直ナビゲーションを作成します。
例
<ul class="nav
flex-column">
タブ
ナビゲーションメニューを.nav-tabsクラスのナビゲーションタブに変えます。.activeクラスをアクティブ/現在のリンクに追加します。タブを切り替え可能にする場合は、このページの最後の例を参照してください。
例
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" 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-pills。錠剤を切り替え可能にしたい場合は、このページの最後の例を参照してください。
例
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" 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-justifiedクラス（等しい幅）でタブ/ピルを正当化します：
例
<ul class="nav nav-pills
nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>
ドロップダウン付きの錠剤
例
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item dropdown">
<a class="nav-link
dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</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>
ドロップダウン付きのタブ
例
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item dropdown">
<a class="nav-link
dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</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>
トグル可能/ダイナミックタブ
家
痛み自体は重要ですが、痛みは脂肪症のプロセスによって強化されますが、私はそれを減らす時間を与えて、私がいくつかの素晴らしい仕事と痛みをするようにします。
タブを切り替え可能にするには、data-toggle="tab"各リンクに属性を追加します。.tab-pane次に、タブごとに一意のIDを持つクラスを
追加し、それら<div>をclassを持つ要素内にラップします.tab-content。
タブをクリックしたときにタブをフェードインおよびフェードアウトさせたい場合は、
.fadeクラスを.tab-pane次の場所に追加します。
例
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<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="#menu1">Menu 1</a>
</li>
<li
class="nav-item">
<a class="nav-link" data-toggle="tab"
href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div
class="tab-pane container active" id="home">...</div>
<div class="tab-pane
container fade"
id="menu1">...</div>
<div class="tab-pane
container fade" id="menu2">...</div>
</div>
トグル可能/ダイナミックピル
家
痛み自体は重要ですが、痛みは脂肪症のプロセスによって強化されますが、私はそれを減らす時間を与えて、私がいくつかの素晴らしい仕事と痛みをするようにします。
同じコードがピルにも適用されます。data-toggle属性をdata-toggle="pill"次のように変更するだけです。
例
<!-- Nav pills -->
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-toggle="pill" href="#menu1">Menu 1</a>
</li>
<li
class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div
class="tab-pane container active" id="home">...</div>
<div class="tab-pane
container fade"
id="menu1">...</div>
<div class="tab-pane
container fade" id="menu2">...</div>
</div>
完全なブートストラップ4ナビゲーションリファレンス
すべてのタブオプション、メソッド、およびイベントの完全なリファレンスについては、 Bootstrap 4JSタブリファレンスにアクセスしてください。