Bootstrap von Twitter ist derzeit das beliebteste Front-End-Frontwork. Bootstrap basiert auf HTML, CSS und JavaScript. Es ist einfach und flexibel und macht die Webentwicklung schneller.
Schlüsselpunkte für das Lernen:
1. Kleine Symbolkomponente
2. Pulldown-Menükomponente
3. Knopfgruppenkomponente
4. Dropdown-Menü im Button-Stil
In dieser Lektion erfahren wir hauptsächlich die drei Komponentenfunktionen von Bootstrap: kleine Symbolkomponente, Dropdown-Menükomponente und verschiedene Tastenkomponenten.
eins. Kleine Symbolkomponente
Bootstrap bietet 263 kostenlose kleine Symbole (zweimal gezählt). Weitere Informationen finden Sie im Komponentenlink der chinesischen offiziellen Website:
http://v3.bootcs.com/components/#glyphicons.
Einige Ikonen sind wie folgt:
Sie können die zu verwendenden <i> oder <span> -Tags wie folgt verwenden:
// kleines Symbol verwenden <i> </i> <span> </span> // Sie können auch Schaltflächen mit <schaltflächen> <span> </span> </button> <tasten> <button> <Pan> </span> </button> <button> <button> </span> </button> kombinieren
zwei. Dropdown-Menükomponente
Im Dropdown-Menü klicken Sie auf ein Element oder eine Schaltfläche, um die zu angezeigte versteckte Liste auszulösen.
// Basic-Format <Div> <button data-toggle = "Dropdown"> Dropdown-Menü <Pan> </span> </button> <ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"#"> </a> </li> <li> <a href ="#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#" </a> </li> </ul> </div>
Schaltflächen und Menüs müssen in einen .Dropdown-Container eingewickelt werden, und als die Schaltfläche "Klickelement" muss data-toggle = "Dropdown" so eingestellt werden, dass sie effektiv sind. Für den Menüabschnitt können Einstellungen automatisch feste Stile ausblenden und hinzufügen. Stellen Sie den Pfeil so ein, dass sie auf oder runter sein.
// Einrichten auf Trigger <Div> // Menüelemente sind nach rechts ausgerichtet. Der Standardwert ist Dropdown-Menu-Linde <ul> // Setzen Sie den Titel des Menüs, fügen Sie keine Hyperlinks hinzu <li> Website-Navigation <// LI> // Die Trennlinie des Menüs festlegen. // Setzen Sie das Menü so, dass dies standardmäßig <div> angezeigt wird
drei. Knopfgruppenkomponente
Eine Knopfgruppe ist der eindeutige Effekt der Integration mehrerer Tasten in einen Container.
// Basic -Format <Div> <button type = "button"> links </button> <button type = "button"> middle </button> <button type = "button"> rechts </button> </div> // Integrieren Sie mehrere Schaltflächen, um die Verwaltung zu erleichtern. type = "button"> </button> <button> <button type = "button"> </button> <button> <button type = "button"> </button> <button> <button type = "button"> </button> <button> <button type = "button"> </button> <button> <button type BTN-Gruppen-sm "> <div> // Nest Eine Gruppe nisten, z. B. Dropdown-Menü <div> <button type =" button "> links </button> <button type =" button "> middle </button type =" button href="#">Home</a></li><li><a href="#">Information</a></li><li><a href="#">Product</a></li><li><a href="#">About </a></li></ul></div></div>
Hinweis: Dies wird in <div> nicht implementiert. Durch die Quellcodeanalyse wissen Sie, dass das Nest selbst eine Positionierung hat, sodass Sie es nicht einrichten müssen. Und fügen Sie einfach eine weitere abgerundete Ecke auf der rechten Seite hinzu.
// Setzen Sie die Button -Gruppe vertikal angeordnet <Viv> // Setzen Sie die an beiden Enden ausgerichtete Taste. Verwenden Sie das <a> tag <div> <a type = "button"> links </a> <a type = "button"> Mitte </a> <a type = "button"> rechts type = "button"> links </button> </div> <div> <button type = "button"> rechts </button> </div>
Vier. Dropdown-Menü im Button-Stil
Dieses Dropdown-Menü entspricht tatsächlich dem zweiten Wissenspunkt, außer dass dies in der Gruppe ist und es keine Notwendigkeit besteht, Class = "Dropdown" zu deklarieren.
// Gruppentaste Dropdown-Menü <Div> <Button type = "button" data-toggle = "Dropdown"> Dropdown-Menü <Pan> </span> </button> <ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#" href = "#"> About </a> </li> </ul> </div> // Taste-Taste-Drop-Down-Menü <Div> <button type = "button"> Dropdown-Menü </button> <button type = "button" data-toggle = "Dropdown"> <span> </span> </button> <li> <li> <a> href = "#"#"#"#"#"#"#" href = "#"> Informationen </a> </li> <li> <a href = "#"> Produkt </a> </li> <li> <a href = "#"> Über </a> </li> </ul> </div> // Popup <Viv>
Der oben genannte Inhalt ist die Komponente der Menüschaltflächen -Symbol für die vom Editor vorgelegte Bootstrap -Komponente. Ich hoffe, es wird für alle hilfreich sein!