Bootstrap-Navigationssteuerung

Der allgemeine Begriff Navigation bezieht sich auf den Prozess der Navigation von Informationsressourcen im World Wide Web. Der Bootstrap bietet eine Möglichkeit, Navigationskomponenten wie einfache Tab-Navigation, Pillen-basierte Navigation, vertikale oder gestapelte Navigation, Tab- und Pillen-basiertes Dropdown-Menü zu erstellen, die über die .nav-Klasse dasselbe Markup und dieselben Stile verwenden.

Die Liste der in diesem Tutorial bereitgestellten Navigationssteuerelemente lautet:

  • Grundlegende Tab-Navigation
  • Grundlegende Pillennavigation
  • Begründete Navigation
  • Deaktivierte Links
  • Dropdowns
  • Hinzufügen von Symbolen
  • lesen Sie auch:

    • Bootstrap-Setup
    • Bootstrap-Typografie

    Die folgenden Beispiele zeigen die verschiedenen Techniken, die zum Implementieren der Navigationssteuerelemente in Bootstrap verwendet werden. Wenn Sie Fragen zur Bootstrap-Navigation haben, schreiben Sie diese bitte in den Kommentarbereich.

    Bootstrap-Navigationssteuerung

    <!DOCTYPE html>
    <head>
    <title>Bootstrap Example</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div  >
    <h2>Basic Tab Navigation</h2>
    <ul  >
    	 <li  ><a href="#">Home</a></li>
    	 <li><a href="#">About Us</a></li>
    	 <li><a href="#">Services</a></li>
    	 <li><a href="#">Contact Us</a></li>
    	 <li><a href="#">Sign In</a></li>
    </ul>
    </div>
    </body>
    </html>
    

    Das obige Skript verwendet .nav-tabs Klasse, die zusammen mit der Basisklasse nav zum Erstellen einer tabulatorbasierten Navigation verwendet wird. Der Bootstrap unterstützt die aktive Klasse für Navigationsleisten. Daher muss jede HTML-Seite die aktive Klasse zum Link der aktuellen Seite hinzufügen.

    • Bootstrap Basic Tab-Navigationsdemo

    Bootstrap Basic Tab-Navigationsbild

    Bootstrap Basic Pills Navigation

    Mithilfe der Klasse können wir mit Bootstrap eine grundlegende Pillen-basierte Navigation erstellen .nav-pillen statt zu verwenden .nav-tabs Klasse. Das Folgende ist ein Beispiel:

    <!DOCTYPE html>
    <head>
    <title>Bootstrap Example</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div  >
    <h2>Basic Pills Navigation</h2>
    <ul  >
    	 <li  ><a href="#">Home</a></li>
    	 <li><a href="#">About Us</a></li>
    	 <li><a href="#">Services</a></li>
    	 <li><a href="#">Contact Us</a></li>
    	 <li><a href="#">Sign In</a></li>
    </ul>
    </div>
    </body>
    </html>
    
    • Bootstrap Grundlegende Pillen-Navigationsdemo

    Bootstrap Basic Pills Navigationsbild

    Bootstrap-gerechtfertigte Navigation

    Mithilfe der Bootstrap-Klasse könnten wir die gleiche Breite von Tabs oder Pillen mit der gleichen Breite ihres übergeordneten Bildschirms erreichen .nav-gerechtfertigt. Wir verwenden diese Klasse zusammen mit .nav Navigationsregisterkarten oder .nav nav-pillen Klassen, um die Navigationslinks auf der Webseite zu rechtfertigen. Das Folgende ist ein Beispiel:

    <!DOCTYPE html>
    <head>
    <title>Bootstrap Example</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div  >
    <h2>Justified Navigation</h2>
    <ul  >
    	 <li  ><a href="#">Home</a></li>
    	 <li><a href="#">About Us</a></li>
    	 <li><a href="#">Services</a></li>
    	 <li><a href="#">Contact Us</a></li>
    	 <li><a href="#">Sign In</a></li>
    </ul><br><br>
    <ul  >
    	 <li  ><a href="#">Home</a></li>
    	 <li><a href="#">About Us</a></li>
    	 <li><a href="#">Services</a></li>
    	 <li><a href="#">Contact Us</a></li>
    	 <li><a href="#">Sign In</a></li>
    </ul>
    </div>
    </body>
    </html>
    
    • Bootstrap Demo zur gerechtfertigten Navigation

    Bootstrap-ausgerichtetes Navigationsbild

    Bootstrap-deaktivierte Links

    Es ist möglich, den Link in der Tab- oder Pillennavigation mithilfe der Bootstrap-Klasse zu deaktivieren .deaktiviert . Wenn ein Element deaktiviert ist, erscheint es abgeblendet und reagiert nicht auf Benutzereingaben. Es wird mit grauen Links angezeigt und deaktiviert auch den Hover-Effekt für diesen Link. Das Folgende ist ein Beispiel:

    <!DOCTYPE html>
    <head>
    <title>Bootstrap Example</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div  >
    <h2>Justified Navigation</h2>
    <ul  >
    	 <li  ><a href="#">Home</a></li>
    	 <li><a href="#">About Us</a></li>
    	 <li><a href="#">Services</a></li>
    	 <li  ><a href="#">Contact Us</a></li>
    	 <li><a href="#">Sign In</a></li>
    </ul><br><br>
    <ul  >
    	 <li  ><a href="#">Home</a></li>
    	 <li><a href="#">About Us</a></li>
    	 <li  ><a href="#">Services</a></li>
    	 <li><a href="#">Contact Us</a></li>
    	 <li><a href="#">Sign In</a></li>
    </ul>
    </div>
    </body>
    </html>
    
    • Bootstrap Deaktivierte Links-Demo

    Bild „Bootstrap deaktivierte Links“.

    Bootstrap-Dropdowns

    Mit Bootstrap können wir eine Tab-basierte oder Pillen-basierte Dropdown-Navigation erstellen. Beim Klicken auf eine Schaltfläche oder Textauswahl wird das Dropdown-Menü angezeigt, in dem der Benutzer einen einzelnen Wert auswählen kann. Wir benutzen das .Dropdown-Menü Klasse in Verbindung mit einigen Datenattributen, um eine ungeordnete Liste auszulösen. Das Folgende ist ein Beispiel:

    <!DOCTYPE html>
    <head>
    <title>Bootstrap Example</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div  >
    <h2>Dropdowns with Tabs</h2>
    <ul  >
    	<li  ><a href="#">Home</a></li>
    	<li><a href="#">About Us</a></li>
    	<li  ><a href="#"   data-toggle="dropdown">Services<span  ></span></a>
        <ul  >
    		 <li><a href="#">Service 1</a></li>
    		 <li><a href="#">Service 2</a></li>
    		 <li><a href="#">Service 3</a></li>
    		 <li  ></li>
    		 <li><a href="#">Service 4</a></li>
    	</ul>
        </li>
       <li><a href="#">Contact Us</a></li>
       <li><a href="#">Sign In</a></li>
    </ul><br><br>
    <h2>Dropdowns with Pills</h2>
    <ul  >
    	<li  ><a href="#">Home</a></li>
    	<li><a href="#">About Us</a></li>
    	<li  ><a href="#"   data-toggle="dropdown">Services<span  ></span></a>
        <ul  >
    		 <li><a href="#">Service 1</a></li>
    		 <li><a href="#">Service 2</a></li>
    		 <li><a href="#">Service 3</a></li>
    		 <li  ></li>
    		 <li><a href="#">Service 4</a></li>
    	</ul>
        </li>
       <li><a href="#">Contact Us</a></li>
       <li><a href="#">Sign In</a></li>
    </ul>
    </div>
    </body>
    </html>
    

    Wie im obigen Skript gezeigt, schließen wir einfach die Klasse „dropdown-menu“ in die Klasse „.dropdown“ ein. Mithilfe des Dropdown-Plug-Ins haben wir ein Dropdown-Menü mithilfe der Basisklassennavigation erstellt Navigationsregisterkarten Und Navigationspillen. Das Ankerelement verwendet die Dropdown-Toggle-Klasse und das Data-Toggle-Attribut, das die Optionen anzeigt, wenn der Benutzer das Dropdown-Feld aktiviert.

    • Bootstrap Dropdown-Navigationsdemo

    Bootstrap-Dropdowns-Bild

    Bootstrap-Symbole hinzufügen

    Heutzutage werden Schriftsymbole immer beliebter, um das Benutzererlebnis zu verbessern. Bootstrap bietet Glyphicons, eine Sammlung monochromatischer Icons und Symbole basierend auf CSS-Sprites, in denen wir Icons jeder Farbe erstellen können, indem wir einfach die CSS-Farbeigenschaft auf das angegebene Element anwenden. Bootstrap ermöglicht das Hinzufügen von Symbolen zur Tabs- und Pillen-basierten Navigation, um sie attraktiver zu gestalten. Das Folgende ist ein Beispiel:

    <!DOCTYPE html>
    <head>
    <title>Bootstrap Example</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div  >
    <h2>Adding Icons to Tabs and Pills Nav</h2>
    <ul  >
    	 <li  ><a href="#"><span  ></span>Home</a></li>
    	 <li><a href="#"><span  ></span>Profile</a></li>
    	 <li><a href="#"><span  ></span>Messages</a></li>
    	 <li><a href="#"><span  ></span>Contact Us</a></li>
    </ul><br><br>
    <ul  >
    	 <li  ><a href="#"><span  ></span>Home</a></li>
    	 <li><a href="#"><span  ></span>Profile</a></li>
    	 <li><a href="#"><span  ></span>Messages</a></li>
    	 <li><a href="#"><span  ></span>Contact Us</a></li>
    </ul>
    </div>
    </body>
    </html>
    
    • Bootstrap Demo zur Symbolnavigation hinzufügen

    Bootstrap-Symbolbild hinzufügen

    Kommentar verfassen

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

    Nach oben scrollen