ブートストラップフレームワークでは、ナビゲーションはナビゲーションコンポーネントとして独立しています。さまざまなバージョンによると、対応するソースコードを見つけることができます。
LESS：NAVS.Less
sass：_navs.scss
タブナビゲーションとも呼ばれるタグ型ナビゲーション
タグ型のナビゲーションは、.nav-tabsスタイルを通じて実装されています。タグ型のナビゲーションを作成するときは、元のナビゲーションクラス名を使用してクラス名.nav-tabsをコンテナに追加する必要があります。
<ul> <li> <a href = "＃">ナビゲーションタイトル1 </a> </li> <li> <a href = "＃">ナビゲーションタイトル2 </a> </li> <li> <a href = "＃">ナビゲーション3 </a> </a> </li> <li> <a href = "タイトル5 </a> </li> </ul>
原理：
メニュー項目Liをブロックに表示し、同じレベルで配置し、非ハイライトメニューのスタイルとマウスのサスペンション効果を定義します
.nav-tabs {border-bottom：1px solid #ddd;}。nav-tabs> li {float：left; margin-bottom：-1px;} > A：Hover {Border-Color：#eee #eee #ddd;}一般に、タブには現在選択されているアイテムがあり、クラス名を（LI）タグにアクティブを追加する必要があります。
<ul> <li> <a href = "＃">ナビゲーションタイトル1 </a> </li> <li> <a href = "＃">ナビゲーションタイトル2 </a> </li> <li> <a href = "＃">ナビゲーション3 </a> </a> </li> <li> <a href = "タイトル5 </a> </li> </ul>
.nav-tabs> li.active> a、.nav-tabs> li.active> a：hover、.nav-tabs> li.active> a：focus {color：＃555;カーソル：デフォルト;バックグラウンドカラー：#fff;境界線：1px solid #ddd;境界線 - カラー：透明;}現在のオプションに加えて、一部のタブには障害状態もあります。この効果を実現するには、タグ項目に無効になっているクラス名を追加してください。
.nav> li.disabled> a {color：＃999;}。nav> li.disabled> a：hover、.nav> li.disabled> a：focus {color：＃999;テキスト装置：なし;カーソル：禁止されていません。背景色：透明;}メニュー項目をクリックしてコンテンツを切り替える効果を達成したい場合は、JSプラグインに協力する必要があります
カプセル（錠剤）ナビゲーション
現在、丸い角の効果で強調表示されている実装方法はタブナビゲーションに似ており、同じ構造を使用すると、クラス名.nav-tabsをクラス名.nav-pillsに置き換えるだけです。
.nav-pills> li {float：left;}。nav-pills> li> a {border-radius：4px;}。nav-pills> li {margin-left：2px;}。バックグラウンドカラー：＃428BCA;}垂直積み重ねられたナビゲーション
水平ナビゲーションに加えて、垂直ナビゲーションもあります。垂直積み重ねられたナビゲーションを作成するには、.nav-pillsに基づいてクラス名を追加する必要があります。
カプセルナビゲーションと比較して、主なことは、ナビゲーションアイテムが浮かんでいるのを防ぎ、垂直に配置し、隣接するナビゲーションアイテムの特定の間隔を残すことです。
.nav-stacked> li {float：none;}。nav-stacked> li + li {margin-top：2px;マージン左：0;} <ul> <li> <a href = "＃">ナビゲーションタイトル0 </a> </li> <li> <a href = "＃">ナビゲーションタイトル1 </a> </li> <li> <a href = "＃">ナビゲーションタイトル2 </a> href = "＃">ナビゲーションタイトル4 </a> </li> <li> <a href = "＃">ナビゲーションタイトル5 </a> </li> </ul>垂直スタッキングナビゲーションは、ドロップダウンメニューグループとグループの間のスプリットラインのようなものであり、ナビゲーション項目の間にスプリットラインもあります。ナビゲーション項目の間に<li class = "divider"> </li>を追加するだけです。
<ul> <li> <a href = "＃">ナビゲーションタイトル0 </a> </li> <li> <a href = "＃">ナビゲーションタイトル1 </a> </li> <li>ナビゲーションタイトル2 </a> </a> </li> <li> </ href = "＃">ナビゲーションタイトル4 </a> </li> <li> <a href = "＃">ナビゲーションタイトル5 </a> </li> </ul>
.nav .nav-divider {height：1px; margin：9px 0; overflow：hidden; background-color：＃e5e5e5;}適応ナビゲーション
適応ナビゲーションとは、コンテナの幅全体を占めるナビゲーションを指し、メニュー項目はテーブルセルの幅に適応できます。適応ナビゲーションは、前述の.btn-group-justifiedによって作成された適応ボタンコンポーネントと同じですが、適応ナビゲーションを作成する場合は、.nav-tabsまたは.nav-pillsでクラス名を使用する必要があります。
原理：
リストULの幅を100％に設定してから、[各メニュー項目LIのテーブルセルを設定して、リストがテーブルセルの形式をシミュレートするようにします。
.nav-justified {width：100％;}。nav-justified> li {float：none;}。nav-justified> li> a {margin-bottom：5px;テキストアライグ：center;}。nav-justified> .dropdown .dropdown-menu {top：auto;左：auto;}@media（min-width：768px）{.nav-justified> li {display：table-cell;幅：1％; } .nav-justified> li> a {margin-bottom：0; }}上記のメディアクエリ条件があります。@media（min-width：768px）{...}は、ブラウザのウィンドウ幅が768pxを超える場合、上記のスタイルで適応ナビゲーションを上記のスタイルにのみ表示できることを意味しますが、ブラウザのウィンドウ幅が768px未満の場合、下のスタイルに表示されます。
.nav-tabsと.nav-justifiedが一緒に使用されます。これは、適応タブナビゲーションを意味します。ブラウザのウィンドウ幅が768px未満の場合、スタイルで追加の処理が行われます。
.nav-tabs.nav-justified {width：100％; Border-Bottom：0;}。nav-tabs.nav-justified> li {float：none;}。nav-tabs.nav-justified> li> a {margin-bottom：5px; TEXT-ALIGN：center;}。nav-tabs.nav-justified> .dropdown .dropdown-menu {top：auto;左：auto;}@media（min-width：768px）{.nav-tabs.nav-justified> li {display：table-cell; width：.active> a：hover、.nav-tabs.nav-justified> .active> a：hover、.nav-tabs.nav-justified> .active> a：focud {border：1px solid #ddd;} Border-Radius：4px 4px 0 0; } .nav-tabs.nav-justified> .active> a、.nav-tabs.nav-justified> .active> a：hover、.nav-tabs.nav-justified> .active> a：focus {border-bottom-color：#fff; }}ナビゲーションとプルダウンメニュー（セカンダリナビゲーション）
セカンダリナビゲーションを作成するには、Liを親コンテナとして使用するだけで、クラス名を使用し、Liの別のULリストをネストする必要があります。
<ul> <li> <a href = "＃">ナビゲーションメニュー1 </a> </li> <li> <a href = "＃">ナビゲーションメニュー2 </a> </li> <li> <a href = "＃">ナビゲーションメニュー3 </a> </a> </li> <li> <a href = "＃"メニュー4 </a> </li> <li> <adata-toggle = "dropdown">ナビゲーションメニュー5 <span> </span> </a> <ul> <li> <a href = "＃">ドロップダウンメニュー1 </a> </li> <li> <a href = "＃">ドロップダウンメニューmenu3 </a> </li> <li> <a href = "＃">ドロップダウンmenu4 </a> </li> </li> </li> <li> <a href = "＃">ナビゲーションメニュー6 </a> </li> </ul>
ブレッドクランブナビゲーション
パン粉は通常、ナビゲーションに使用され、その主な機能はユーザーにページの現在の場所を伝えることです。パン粉は、ブートストラップフレームワークの独立したモジュールコンポーネントでもあります。
LESS：BREADCRUMBS.LESS
SASS：_BREADCRUMBS.SCSS
<ol> <li> <a href = "＃"> home </a> </li> <li> <a href = "＃">私の本</a> </li> <li>図解CSS </li> </ol>
.breadcrumb {padding：8px 15px; margin-bottom：20px; list-style：none; background-color：＃f5f5f5; border-radius：4px;}。 .active {color：＃999;}上記は、Li+Li：LiとLiの間に分離器を実装する前に使用します。このソリューションは、IEの下位バージョンではサポートされていません。
まだ詳細に学びたい場合は、ここをクリックして2つのエキサイティングなトピックを学び、添付できます。BootstrapLearning Tutorial Bootstrap Practical Tutorial
上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。