ブートストラップ-ナビゲーション要素

Bootstrapは、ナビゲーション要素のスタイルを設定するためのいくつかの異なるオプションを提供します。それらはすべて同じマークアップと基本クラスを共有し、.nav。Bootstrapは、マークアップと状態を共有するためのヘルパークラスも提供します。修飾子クラスを交換して、各スタイルを切り替えます。

表形式のナビゲーションまたはタブ

タブ付きナビゲーションメニューを作成するには-

基本クラスがの基本的な順序なしリストから始めます。 .nav
クラスを追加 .nav-tabs。

次の例はこれを示しています-

<p>Tabs Example</p>

<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

ピルナビゲーション

基本的な丸薬

タブをピルに変えるには、上記と同じ手順に従い、クラスを使用します .nav-pills の代わりに .nav-tabs。

次の例はこれを示しています-

<p>Pills Example</p>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

垂直ピル

クラスを使用してピルを垂直に積み重ねることができます .nav-stacked クラスと一緒に- .nav, .nav-pills。

次の例はこれを示しています-

<p>Vertical Pills Example</p>

<ul class = "nav nav-pills nav-stacked">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

正当化されたナビゲーション

クラスを使用して、768pxより広い画面で、親と同じ幅のタブまたはピルを作成できます。 .nav-justified に加えて .nav, .nav-tabs または .nav, .nav-pillsそれぞれ。小さい画面では、ナビゲーションリンクがスタックされます。

次の例はこれを示しています-

<p>Justified Nav Elements Example</p>

<ul class = "nav nav-pills nav-justified">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

<br>
<br>
<br>

<ul class = "nav nav-tabs nav-justified">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

無効なリンク

それぞれについて .nav クラス、追加した場合 .disabled クラス、それはまた無効にする灰色のリンクを作成します :hover 次の例に示すような状態-

<p>Disabled Link Example</p>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   
   <li class = "disabled"><a href = "#">iOS(disabled link)</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

<br>
<br>

<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   
   <li class = "disabled"><a href = "#">VB.Net(disabled link)</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

このクラスは、<a>の外観のみを変更し、機能は変更しません。ここでリンクを無効にするには、カスタムJavaScriptを使用します。

ドロップダウン

ナビゲーションメニューは、ドロップダウンメニューと同様の構文を共有します。デフォルトでは、いくつかのデータ属性と連動して機能するアンカーを持つリストアイテムがあり、.dropdown-menu クラス。

ドロップダウンのあるタブ

タブにドロップダウンを追加するには-

基本クラスがの基本的な順序なしリストから始めます。 .nav
クラスを追加する .nav-tabs。
次に、順序付けされていないリストを追加します。 .dropdown-menu クラス。

<p>Tabs With Dropdown Example</p>

<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   
   <li class = "dropdown">
      <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
         Java 
         <span class = "caret"></span>
      </a>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Swing</a></li>
         <li><a href = "#">jMeter</a></li>
         <li><a href = "#">EJB</a></li>
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
      
   </li>
	
   <li><a href = "#">PHP</a></li>
</ul>

ドロップダウン付きの丸薬

ピルで同じことをするために、単に交換してください .nav-tabs とのクラス .nav-pills 次の例に示すように。

<p>Pills With Dropdown Example</p>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   
   <li class = "dropdown">
      <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
         Java <span class = "caret"></span>
      </a>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Swing</a></li>
         <li><a href = "#">jMeter</a></li>
         <li><a href = "#">EJB</a></li>
         
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
      
   </li>
	
   <li><a href = "#">PHP</a></li>
</ul>