Auf der offiziellen Website von Bootstrap wird eine Navigationsleistenkomponente bereitgestellt:
Setzen Sie einfach JQ und Bootstrap in den Site -Ordner ein und geben Sie den folgenden Code ein:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd"><Htmlmlml xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> navbar </tithes> <meta name = "view" name = "view" content="width=device-width,initial-scale=1.0,user-scalable=no"> <link href="css/bootstrap.css" rel="stylesheet" media="screen"> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> </head> <body> <div> <nav role="navigation"> <div> <div> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> <span></span> </button> <a href="#">Brand</a> </div> <div id="bs-example-navbar-collapse-1"> <ul> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#" data-toggle="dropdown">Dropdown <span></span> </a> <ul> <a href="#" data-toggle="dropdown">Dropdown <span></span> </a> <ul role="menu"> <li> <a href="#">Action</a> </li> <li> <a href="#">Another action</a> </li> <li> <a href = "#"> Etwas anderes hier </a> </li> <li> </li> <li> <a href = "#"> getrennter Link </a> </li> <li> </li> <li> <a href = "#"> getrennte Link </a> </li> </li> </li> </li> </li> </a href = "#"#"#"#"#"#"#"#"#"#"> one mehr getrennte </ul> </form rollen = "such"> <div> <Eingabe type = "text" placeholder = "such"> </div> <button type = "enden"> surven </button> </form> <ul> <li> <a href = "#"> link </a> </li> <a href = "#" data-"#" data-"#" data-toGle = " role="menu"> <li> <a href="#">Action</a> </li> <li> <a href="#">Another action</a> </li> <li> <a href="#">Something else here</a> </li> <li></li> <li> <a href="#">Separated link</a> </li> </li> </li> </li> </ul> </div> </div> </nav> ASDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
Sie können eine Navigationsleiste erhalten, die mit der Größe des Fensters variieren kann:
Sie können auch den Klassenwert in <NAV -Rolle = "Navigation"> in <nav Rollen = "Navigation"> ändern, und die Navigationsleiste wird oben auf der Webseite aufgehängt. Egal wie das Fenster gezogen wird, wenn Sie den Klassenwert in <nav Rollen = "Navigation"> ändern, können Sie eine schwarze Navigationsleiste erhalten.
Es sieht sehr nützlich aus, aber seine Nachteile sind ziemlich tödlich. Unabhängig von den Farben dieser Navigationsleiste sind nur weiß und schwarz, zwei Farben. Das Schrecklichste ist, dass die Navigationsleiste direkt am Telefon in IE8 angezeigt wird, aber unter der Bildschirmauflösung von 1440 x 900 liegt. Sie sollten wissen, dass IE8 nicht IE6 ist, sondern der Standardbrowser für Win7 -System.
Dadurch wird der Benutzer das Element in der Navigationsleiste ausgewählt, um auf die Schaltfläche rechts zu klicken, und dann wird das Dropdown-Menü:
Lassen Sie den Inhalt der Webseite direkt in ein ganzes Stück heruntergezogen werden. Es ist erwähnenswert, dass IE8 jetzt der Standardbrowser für Win7 ist. Unabhängig von der absoluten Kernposition von IE6 in China ist die Kompatibilität von IE8, selbst im Zusammenhang mit immer mehr Benutzern, die Win7 wählen, noch eine Frage, die es wert ist, in Betracht zu ziehen.
Wenn Sie daher nur diese Art von Navigationsleiste als Navigation der Website auswählen können, gibt es zwei Arten von Bootstrap, die als Ersatz mit unterschiedlichen Stilen verwendet werden können. Eine ist die Registerkartenseite und die andere ist die Knopfgruppe. Die sogenannte Breadcrumb-Navigationsleiste ist keine gute Lösung, da das Dropdown-Menü in der Bootstrap als Taste angezeigt werden muss. Wenn es in Text geschrieben ist, ist es auch undankbar in IE8. Natürlich können Sie die Bootstrap vollständig beiseite legen, und die CSS der Meister werden von selbst handgeschrieben und auf den Rahmen herabblicken.
1. Tag Seite
Der grundlegende Stil des Tags ist wie folgt, und es gibt ein Dropdown-Menü, das Unterstützung von Bootstrap.js, Bootstrap.css und JQ erfordert.
Tagseiten ändern sich nicht mit der Browsergröße
Sie können auf einer Webseite wechseln oder auf andere Seiten springen. Die Links auf der Registerkarte, die Sie zum Navigieren empfehlen, werden mit demselben Layout wie dieser Seite zu anderen Webseiten springen. Das heißt, diese Registerkartenseite existiert auch und hat den gleichen Standort.
Der Code ist wie folgt:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd"><Htmlmlml xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <titels> Togglabletabs </title> <meta name = "" name = " content="width=device-width,initial-scale=1.0,user-scalable=no"> <link href="css/bootstrap.css" rel="stylesheet" media="screen"> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src = "js/bootstrap.js"> </script> </head> <body> <div> <ul rollen = "bablist"> <!-Nur ein Tag kann einen aktiven Status in einem Tag haben-> <li rollen = "Präsentation"> <! ROLLE = "tab" data-toggle = "tab"> home </a> </li> <li rollen = "Präsentation"> <a href = "#profil" rollen = "tab" data-toggle = "tab"> profil </a> </li> <li rollen = "Präsentation"> <a href = "#profile" rollen = "lag" tab "-Ralle" -Ralung ". href = "#messages" rollen = "tab" data-toggle = "tab"> messus </a> </li> <li rollen = "Präsentation"> <a href = "#Einstellungen" ROLLE = "tab" data-toggle = "tab"> Einstellungen </a> </li> <!-einschließlich des Weges, um das Dropdown-Menü zu schreiben. <!--This is the small triangle of the drop-down menu--> Dropdown <span></span> </a> <ul role="menu"> <li role="presentation"> <a href="#home" role="tab" data-toggle="tab">Home</a> </li> <li role="presentation"> <a href="#profile" role="tab" data-toggle="tab">Profile</a> </li> <li rollen = "Präsentation"> <a href = "#messages" rollen = "tab" data-toggle = "tab"> messus </a> </li> <li rollen = "Präsentation"> <a href = "#Einstellungen" ROLE = "tab" data-toggle = "tab"> Einstellungen </a> </li> </ul> </ul>. ist kein Sprung. Auf diese Weise trennen Sie den Code so, dass der Code einer Webseite nicht auf einer Seite konzentriert ist-> <li rollen = "Präsentation"> <a href = "back.html" rollen = "tab"> Die anderen Seiten </a> </li> </li> </ul> <!-Wenn die Registerkarte auf dieser Seite auf dieser Seite auf der Ebene überspringt, schreiben Sie den Inhalt der Ebene der Ebene hier. --> <div> <div role="tabpanel" id="home"> Home </div> <div role="tabpanel" id="profile"> Profile </div> <div role="tabpanel" id="messages"> Messages </div> <div role="tabpanel" id="settings"> Settings </div> </div> </div> </body></html>
2. Wählen Sie die Schaltflächengruppe aus
Dieser Absatz wurde immer wieder verändert, vor allem, weil mein Verständnis dieser Komponente nicht gründlich genug ist.
Der grundlegende Stil einer Auswahlknopfgruppe, die die Seite abdeckt, lautet wie folgt:
Es wird sich mit der Größe des Browsers ändern. Natürlich wird es nicht wie die Navigationsstange -Marine geschlossen, die mit Bootstrap geliefert wird, und liegt natürlich nicht geschlossen und liegt leise in einem Knopf.
Diese Auswahlknopfgruppe ist zweifellos mit IE8 kompatibel, aber die Schaltfläche ohne Dropdown-Menü ist tatsächlich ein Hyperlink, wobei das Tag <a> anstelle des <a> -Tags <a> im Vergleich zum allgemeinen <a> -Tag verwendet wird. Siehe den Code für die Schaltfläche in der Klasse dieses <A> -Tags, siehe Code für Details. Der Code für diese Schaltfläche ist wirklich etwas Besonderes.
Der spezifische Code lautet wie folgt:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd"><Htmlmlml xmlns = "http://www.w3.org/1999/xhtml"> <kopf> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> Taste Gruppengruppe </title> <meta name = "meta name =" content="width=device-width,initial-scale=1.0,user-scalable=no"> <link href="css/bootstrap.css" rel="stylesheet" media="screen"> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> </head> <body> <!--Require button group to fill the entire page--> <div> <div> <!--Write buttons that do not have a drop-down menu to write this way, it is rare to define links for buttons, please note --> <a href="#"> Left </a> </div> <div> <button type="button"> Middle </button> </div> <div> <button type="button"> Right </button> </div> <!--Write this button with a drop-down menu --> <div> <button type="button" data-toggle="dropdown"> Dropdown <span></span> </button> <ul role="menu"> <li> <a href="#">Dropdown link</a> </li> <li> <a href="#">Dropdown Link </a> </li> </ul> </div> </div> </body> </html>
3. Fügen Sie eine Tabelle auf dem Panel hinzu und in einen gewöhnlichen Hyperlinktext eingebettet
Die häufigsten und einfachsten Dinge sind oft die praktischsten Dinge, aber hier werden Tabellen zum Layout verwendet, anstatt die Seite in ein 12-teiliges Netzsystem zu teilen. Weil 12 Kopien einige Spalten wie 5 Exemplare nicht einfach zu verteilen waren.
In diesem Panel werden von Bootstrap bereitgestellte Panel -Elemente verwendet, die auch automatisch gemäß der Fenstergröße eingestellt werden können.
Der Code ist viel einfacher als die beiden oben genannten Lösungen, aber er ist gleichzeitig nicht so schillernd. Aber es ist wirklich einfach und praktisch.
<!-Dieser Knoten kann ignoriert werden. Es wird nur für Screenshots in einen Containerbehälter platziert und füllt nicht das gesamte Fenster-> <div> <!-Das Panel von nur Körper, und ändert den Stil nur die Randfarbe-> <div> <div style = "Text-Align: Mitte"> <table> <tr> <! Wenn es sieben Elemente sind, wird eine Zelle 100/7 = 14% der Größe berücksichtigen. -> <td> <a href = "#"> project 1 </a> </td> <td> <a href = "#"> project 2 </a> </td> <td> <a href = "#"> Projekt 3 </a> </td> <td> <a <a href = "#"#"#"#"#"> project "#"> project "#"> project 4 </a> </td> <td> <a href = "#"#"> project"#"> project"#"> project 4 </a> </td> <td> <a href =" 5 </a> </td> </table> </div> </div> </div>
Die oben genannten drei Lösungen sind Lösungen zur Lösung der Fehler der Bootstrap -Navigationsleiste in IE8. Ich persönlich denke, der erste Typ ist etwas selten und alternativ, der zweite Typ ist der empfohlenste des Autors, und der dritte Typ muss im Formular verwendet werden. Wenn Sie es vermeiden können, versuchen Sie es zu vermeiden. Sie können die Auswahlknopfgruppe in einem Panel platzieren, um den dritten Typ des Text- und Tabelleninhalts zu ersetzen.
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.