ナブとタブ

Bootstrap に含まれるナビゲーションコンポーネントをどのように使用するかのドキュメントと例です。

項目

Base nav

Bootstrap で利用可能なナビゲーションは、基本的な NavList コンポーネントからアクティブな状態と無効な状態まで、一般的なマークアップとスタイルを共有します。それぞれのスタイルを切り替えるために修飾子クラスを入れ替えます。

ベースの NavList コンポーネントは flexbox で構築されており、すべてのタイプのナビゲーションコンポーネントを構築するための強力な基盤を提供します。これには、いくつかのスタイルのオーバーライド (リストを扱うための)、より大きなヒットエリアのためのリンクのパディング、基本的な無効化されたスタイルが含まれています。

Available styles

NavList コンポーネントのスタイルを修飾子とユーティリティで変更します。必要に応じて組み合わせて使用することもできますし、独自のスタイルを構築することもできます。

Horizontal alignment

flexbox utilities を使用して、ナビゲーションの水平方向の配置を変更できます。 デフォルトでは、ナビゲーションは左揃えですが、簡単に中央または右揃えに変更できます。

justify-content="center" 属性で中央揃えにします。

justify-content="end" 属性で右揃えにします。

Vertical

flex-direction="column" 属性で flex item(フレックスアイテム) の方向を変更してナビゲーションを縦に積み上げることができます。一部のビューポートでは縦にしたいが、他のビューポートでは縦したくない場合は、flex-direction="sm-column" を使用してください。

いつものように、NavItem コンポーネントがなくても縦方向のナビゲーションは可能です。

Tabs

nav="tabs" 属性を追加してタブ付きのインターフェイスを生成できます。 tab JavaScript plugin でタブ可能領域を作成します。

Pills

同じ HTML を使用しますが、代わりに nav="pills" 属性を使用します。

同じ HTML を使用しますが、代わりに nav="underline" 属性を使用します。

Fill and justify

NavList の内容が利用可能な幅いっぱいになるように強制します。NavItem コンポーネントで利用可能なすべてのスペースを比例して埋めるには、 fill 属性を使います。すべてのナビゲーションアイテムの幅が同じではないことに注意してください。

Nav コンポーネントベースのナビゲーションを使用する場合、NavLink コンポーネントのスタイリングに必要なのは NavLink コンポーネントだけなので、 NavItem コンポーネントを省略しても問題ありません。

アイテムを等しいサイズにしたい場合は justified 属性を使用します。 すべての水平方向のスペースはナビゲーションリンクで占められますが、上記の fill 属性とは異なり、すべてのナビゲーションアイテムは同じ幅になります。

Nav コンポーネントに fill 属性を適用した場合は

Working with flex utilities

レスポンシブナブのバリエーションが必要な場合は flexbox utilities を使用します。 これらの utilities(ユーティリティ) は冗長ではありますが、レスポンシブブレークポイント間でより大きなカスタマイズが可能です。 下の例では、ナビは最も低いブレークポイントの場合は縦になり、幅をひろげることで、水平レイアウトになります。

Regarding accessibility

ナビゲーションバーを提供するためにナビゲーションを使っている場合、NavList コンポーネントの親コンテナに role="navigation" を追加するか、Nav コンポーネントをナビゲーション全体にラップしてください。role を NavList コンポーネント自体に追加しないでください。

ナビゲーションバーは、nav="tabs" 属性で視覚的にタブとしてスタイリングされていますが、role="tablist"role="tab"role="tabpanel" 属性を与えないでください。 これらは WAI ARIA Authoring Practices で説明されているように、動的なタブ付きインターフェースにのみ適切です。 JavaScript behavior を参照してください。JavaScript はアクティブなタブに aria-selected="true" 属性を追加することで選択された状態を処理するため、動的なタブ付きインターフェースでは aria-current 属性は必要ありません。

Using dropdowns

dropdown menu(ドロップダウンメニュー)に HTML を少し追加して、 dropdowns JavaScript plugin でドロップダウンメニューを追加します。

Tabs with dropdowns

Pills with dropdowns

JavaScript behavior

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

vue

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

vue

タブのプラグインは pills でも動作します。

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

vue

縦の pills でも同様です。

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

vue

Using data attributes

要素に tab 属性または pill 属性を指定するだけで、JavaScript を書かなくてもタブやピルのナビゲーションを有効にすることができます。これらのデータ属性は nav="tabs" 属性や nav="pills" 属性を持った NavList コンポーネントで使用します。

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

vue

Fade effect

タブをフェードインさせるには、TabPane コンポーネントに fade 属性を追加します。最初のタブペインには、最初のコンテンツを表示するために show 属性を追加する必要があります。

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

vue

Auto activate

NavLink

項目