Zuerst müssen Sie Bootstrap und JQuery vorstellen
Empfehlen Sie einen CDN: http://cdn.gbtags.com/index.html
Schreiben Sie dann den HTML -Code. Wenn Sie den Display -Effekt nicht ändern möchten, darf CSS nicht 2333 schreiben.
Da es viele HTML -Codes gibt, sind hier in drei Teile unterteilt und dann ist der Gesamt -HTML -Code der letzte
Zuallererst müssen Sie, wie in der obigen Abbildung gezeigt, die folgenden Komponenten von Bootstrap verstehen
• Navigationsleiste
•Taste
•Bilden
• Dropdown -Menü
Tatsächlich gibt es viele Stile der oben genannten Komponenten. Wir müssen nur einen Teil davon kennen. Wenn Sie mehr wissen möchten, finden Sie unter http://www.gbtags.com/api/bootstrap3.2/bootstrap-doc/components/index.html weitere Informationen.
PS: Klasse {} Hier sind nur Kommentare, nicht HTML -Code
PS2: Bietet HTML -Dateien ein Online -Fall -Debugging
Layout der Navigationsleiste und Navigationsleiste
<!-Erstellen Sie eine BootStarp-Navigationsleiste und Navigationslayout-> <nav> <Viv> // do sth </div> </nav>
Navigationsknöpfe
<!-Erstellen Sie eine Schaltfläche-> <!-Klasse {Navbar-Toggle: Wenn Sie diese Schaltfläche an JS übergeben, klickbar zusammengebrochen: Wenn Sie Navi-Collapse nicht kombinieren, ist es eine Standardklasse. Wenn Sie es nicht hinzufügen, finden Sie keine Fehler. ARIA-EXPANDED = "False": Assisted Lesefunktion. Setting für spezielle Gruppen-> <button type = "button" data-toggle = "collapse" data-target = "#navbar-gbtag" aria-expanded = "false"> <!-Fügen Sie einige Ikonen hinzu, die die ICON-Style-Style-STAR-Style-SR-. Versuchen Sie}-> <span> Klicken Sie auf mich </span> <span> </span> <span> </span> <span> </span> <span> </span> </button>Bilden
<div> <!-class {Form-kontroll: Setzen Sie die Breite auf %, aber wir setzen die Navigationsform im übergeordneten Elementformular, sodass die Breite durch einen bestimmten Betrag gesteuert wirdPulldown-Menü
<li> <!-class {Dropdown-Toggle: Deklarieren Sie, dass dies eine Liste ist, die fallen gelassen werden kann. Eigentlich fand ich nicht den spezifischen Zweck dieser Klasse. Abbrechen und fand keinen bugspan.caret {Symbol Bildstil für ein kleines Dreieck}} data-toggle = "Dropdown": Führen Sie ein notwendiges Attribut der Dropdown-Menükomponentenrolle ein. Declare this is a button--><a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown menu name<span></span></a><ul><li><a href="">bootstrap</a></li><!--class{divider:divider style}role="separator":Declare Dieses Element als Teiler-> <li rollen = "separator"> </li> <li> <a href = ""> Bitte folgen Sie dem Geek-Label </a> </li> </ul> <!-Dropdown-Menü->Gesamtumsetzung von HTML
<! DocType html> <html> <head> <meta charset = "utf-8"> <title> Reaktionsschnelle Navigationsleiste </title> <link rel = "styleSheet" type = "text/css" href = "../ CSS/bootstrap.min type = "text/javaScript" charset = "utf-8"> </script> <script src = "../ js/bootstrap.min <!-Erstellen Sie ein Bootstraplogo-Layout-> <!-Hinweis: Sie müssen einen Navigationskopf-Header erstellen, das Logo einwickeln und ansprechende Schaltflächen einwickeln. Ansonsten ... jeder löscht den Navigationskopf und verengt den Bildschirm und klickt auf das Dropdown-Menü. Klickbar zusammengebrochen: Wenn Sie Navi-Collapse nicht kombinieren, handelt es sich um eine Standardklasse. Es scheint, dass keine Fehler gefunden werden, ohne es hinzuzufügen. } data-toggle = "Collapse": Einführung von Collapse-Plug-In-Data-target = "#navbar-gbtag": Beim Klicken auf die Taste wird das Tag umgeleitet/geöffnet ARIA-expanded = "false": assistiertes Lesen. <!-Fügen Sie ein paar Symbole und Anweisungen in der Schaltflächenklasse hinzu. standardmäßig erweitert. Wenn der Zusammenbruch abgebrochen wird, wird die Taste standardmäßig erweitert. NAVABAR-Collapse: Die erforderliche Klasse für das Navigationsleisten-Elementlayout} ID: In Übereinstimmung mit der Datensteuer der Taste-> <div id = "navbar-gbtag"> <!-Erstellen Sie die interne Elementklasse {NAV: Erstellen Sie eine erforderliche Basisklasse für die internen Elemente des Navigationsleistens. NAVBAR-NAV: Dies ist nicht leicht zu erklären. Weil ich die offizielle Dokumentation durchgesehen habe und sie nicht im Detail gesagt habe. Hier werde ich es kurz erklären: Machen Sie die UL horizontal zentriert und horizontal. Gleichzeitig ist die Breite die Inhaltsbreite und drückt die dahinter stehenden Elemente nicht zusammen. Und schließlich können Sie diese Klasse löschen und versuchen zu wissen, dass sie verwendet wird. NAVABAR-Right: Die Klasse, die von Navigationsleiste angeordnet ist. Eine Liste, die fallen gelassen werden kann. Eigentlich fand ich nicht den spezifischen Zweck dieser Klasse. Ich habe es abgesagt und keine Fehler gefunden. Span .Caret {Icon-Bildstil eines kleinen Dreiecks}} data-toggle = "Dropdown": Führen Sie ein notwendiges Attribut der Dropdown-Menükomponentenrolle ein. Declare this is a button--> <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown menu name<span></span></a> <ul> <li><a href="">bootstrap</a></li> <!--class{ divider: Divider style} role="separator": Declare Dieses Element als Teiler-> <li rolle = "separator"> </li> <li> <a href = ""> Bitte achten Sie auf das Geek-Tag </a> </li> </ul> <!-Dropdown-Menü-> </li> <!-Navigation Subelement-> </ul> <! http://v3.bootcs.com/components/#navbar-forms navbar-linft: Wird verwendet, um die Ausrichtung von Elementen in der Navigationsleiste zu spezifizieren. BTN: Der Button-Stil basiert auf der BTN-Basisklassespezifische Referenz http://v3.bootcss.com/css/#buttons Form- und Group: Eine Basisklasse für die Auflistung einer einzelnen Elemente. Das übergeordnete Elementformular, so dass die Breite durch einen bestimmten Betrag gesteuert wird}-> <Eingabe type = "text" placeholder = "search"/> </div> <!-Formgruppe-> <button type = "sure"> such </button> </form> <!-Form-> <ul> <li> <a href = "> seelen: ROLLE = "Button" aria-haspopup = "true" aria-expanded = "false"> Dropdown-Menüname <span> </span> </a> <ul> <li> <a href = "" bootstrap </a> </li> <!-class {divider style} rollen = "separator": deklarieren Sie dieses Element. href = ""> Bitte folgen Sie dem Geek-Tag </a> </li> </ul> <!-Dropdown-Menü-> </li> <!-Navigations-Subelement 2-> </ul> <!-Navigationselement 2-> </diviv> <!-Navigationslayout-> </div> <!-End Full-Screen-Layout-> </navi> </body> </html> </body> </body> </body>Der obige Inhalt ist der Beispielcode zum Erstellen von reaktionsschnellen Navigationsleisten des Editors an Sie. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie weitere Informationen wissen möchten, achten Sie bitte auf die Website wulin.com. Danke schön!