Bootstrap - Navigationselemente

Bootstrap bietet verschiedene Optionen zum Gestalten von Navigationselementen. Alle haben das gleiche Markup und die gleiche Basisklasse..nav. Bootstrap bietet auch eine Hilfsklasse zum Teilen von Markups und Status. Tauschen Sie Modifikatorklassen aus, um zwischen den einzelnen Stilen zu wechseln.

Tabellarische Navigation oder Registerkarten

So erstellen Sie ein Navigationsmenü mit Registerkarten:

Beginnen Sie mit einer einfachen ungeordneten Liste mit der Basisklasse von .nav
Klasse hinzufügen .nav-tabs.

Das folgende Beispiel zeigt dies -

<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>

Pillen Navigation

Grundlegende Pillen

Befolgen Sie die oben beschriebenen Schritte, um die Tabs in Pillen umzuwandeln. Verwenden Sie die Klasse .nav-pills Anstatt von .nav-tabs.

Das folgende Beispiel zeigt dies -

<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>

Vertikale Pillen

Sie können die Pillen mithilfe der Klasse vertikal stapeln .nav-stacked zusammen mit den Klassen - .nav, .nav-pills.

Das folgende Beispiel zeigt dies -

<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>

Begründete Nav

Sie können Tabs oder Pillen mit der gleichen Breite wie die übergeordneten Registerkarten auf Bildschirmen mit einer Breite von mehr als 768 Pixel mithilfe der Klasse erstellen .nav-justified zusammen mit .nav, .nav-tabs oder .nav, .nav-pillsbeziehungsweise. Auf kleineren Bildschirmen sind die Navigationslinks gestapelt.

Das folgende Beispiel zeigt dies -

<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>

Deaktivierte Links

Für jeden der .nav Klassen, wenn Sie die hinzufügen .disabled Klasse wird ein grauer Link erstellt, der auch die deaktiviert :hover Zustand wie im folgenden Beispiel gezeigt -

<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>

Diese Klasse ändert nur das Erscheinungsbild des <a>, nicht seine Funktionalität. Verwenden Sie benutzerdefiniertes JavaScript, um Links hier zu deaktivieren.

Dropdowns

Navigationsmenüs haben eine ähnliche Syntax wie Dropdown-Menüs. Standardmäßig haben Sie ein Listenelement, bei dem ein Anker in Verbindung mit einigen Datenattributen eine ungeordnete Liste mit a auslöst.dropdown-menu Klasse.

Registerkarten mit Dropdowns

So fügen Sie Dropdowns zur Registerkarte hinzu -

Beginnen Sie mit einer einfachen ungeordneten Liste mit der Basisklasse von .nav
Fügen Sie die Klasse hinzu .nav-tabs.
Fügen Sie nun eine ungeordnete Liste mit einem hinzu .dropdown-menu Klasse.

<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>

Pillen mit Dropdowns

Um dasselbe mit Pillen zu tun, tauschen Sie einfach die aus .nav-tabs Klasse mit .nav-pills wie im folgenden Beispiel gezeigt.

<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>