Der vorherige Artikel hat bereits über einige Schritte und einige grundlegende Verwendungen von Bootstrap gesprochen. Klicken Sie hier, um anzuzeigen
Dieser Blog führt Ihnen weiterhin einige gemeinsame Effekte vor, die hauptsächlich die folgenden Komponenten enthalten
1. Pulldown -Menü
2. Navigationsleiste
3. Fortschrittsbalken
4. Medienobjekte
5. Pagination
6. Liste
Importieren Sie zuerst die CSS und JS von Bootstrap
<link rel = "stylesheet" href = "css/bootstrap.min.css"> <! src = "js/jQuery-3.1.0.min.js"> </script> <script src = "js/bootstrap.min.js"> </script>
1. Pulldown -Menü
Es besteht hauptsächlich aus Taste und UL und kann Untertitel und geteilte Linien hinzufügen
<Div> <button type = "button" data-toggle = "Dropdown" aria-expanded = "false"> U-Bahn-Zeile <! href = "#"> Zeile 2 </a> </li> <li> <a href = "#"> Zeile 3 </a> </li> <li> <a href = "#"> Zeile 4 </a> </li> <!
2. Navigationsleiste
Die Navigationsleiste ist der Standard für fast auf jeder Webseite, daher ist es absolut richtig zu lernen, wie man sie benutzt.
Dies ist die Navigationsleiste oben auf der Seite
<!-Setzen Sie die NAV-Klasse so, dass sie mehr High-End sein, auf Navigh-Statik-Top einstellen, um die abgerundeten Ecken der Navigation zu entfernen und oben zu beheben. data-target="#bs-example-navbar-collapse-1"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> <span></span> </button> <!--Swap Brand to img--> <a href="#">Brand</a> </div> <!--Set the id to bs-example-navbar-collapse-1 to zurückgezogen werden und auf-> <div id = "bs-example-navbar-collapse-1"> <ul> <li> <a href = "#"> Mitgliedsmanagement </a> </li> <li> <a href = "#"#"> Mitgliedsmanagement </a> </li> <li> <li> <a href ="#"#"#"#"#"#"#"#" | Management</a></li> <li><a href="#">Member Management</a></li> <li><a href="#">Member Management</a></li> <li><a href="#">Member Management</a></li> <li><a href="#">Member Management</a></li> <!--A drop-down menu in the navigation bar--> <li> <a href="#" data-toggle="dropdown" role="button" aria-expanded="false"> System maintenance<span></span> </a> <ul role="menu"> <li><a href="#">Restore the system</a></li> <li><a href="#">System backup</a></li> <li><a href = "#"> trennen Sie </a> </li> <li> <a href = "#"> Löschen Sie den Benutzer </a> </li> </li> </li> </ul> <!-Schreiben Sie zuerst Navi-Rechts-Right und die rechts-> <!-Button in der Navigationsleiste in der Navigationsleiste in der Navigationsleiste in der Navigationsleiste. <Div> <Eingabe type = "text" placeholder = "Suchinhalte eingeben"> </div> <schalttyp = "summit"> suche </button> </form> </div> </div> </nav> </nav>
Wenn wir Webseiten verwenden, um Blogs oder Dateien zu durchsuchen, haben wir eine Ebene. Wenn wir zu diesem Zeitpunkt auf die vorherige oder mehrere Ebenen zurückkehren möchten, benötigen wir die Standortnavigationsleiste.
<!-Navigationsleiste-> <ol> <li> <a href = "#"> Mein Backend </a> </li> <li> <a href = "#"> Systemanalyse </a> </li> <!-Der aktuelle Standort kann nicht angeklickt werden, um zu springen-> <li> Zugriffsstatistik </li> </ol> </ol>
3. Fortschrittsbalken
<Div> <!-Progress-Bar-Streifen setzt die Streifen und aktiven Sets Animation-> <!-Zeigen Sie den Prozentsatz des Fortschrittsbalkens gemäß dem Prozentsatz der Stilbreite-> <div rollen = "progreshbar" Aria-Valuenow = "60" Aria-Valuemin = "0" ARIA-VALUEMAX = "100". bar-> 30% </div> </div>
4. Medienobjekte
Dies ist im Grunde die gleiche Nachricht auf Weibo oder Twitter
Der Avatar links, der Titel und Text auf der rechten Seite
<div> <div> <img src = "bilder/1.jpg"> </div> <div> <h4> Medienüberschrift </h4> <p> cras sitz amet nibh libero, in gravida nulla. Nulla vel metus sclerisque ante sollicicin comodo. CRAS PURUS ODIO, Vestibulum in Vulputat bei, Tempus viverra turpis. Fusce Celdimentum nunc ac nisi vulputate fringilla. Donec Lacinia Congue Felis in Faucibus. </P> </div> </div>
5. Pagination
Dies sind mehrere Seiten
<ul> <li> <a href = "#" aria-label = "vorher"> <!-Doppelpfeile links-> <span aria-hidden = "true"> «</span> </a> </li> <! <li> <a href = "#"> 3 </a> </li> <li> <a href = "#"> 4 </a> </li> <li> <a href = "#"> 5 </a> </li> <li> <a href = "#"#"> 6 </a> <li> <li> <li> <li> <li> <li> <a> <a href ="#"> 7" href = "#"> 7 </a> </li> <li> <a href = "#"> aria-label = "next"> <!-doppelte Pfeile rechts-> <span aria-hidden = "true"> »</span> </a> </li> </ul>
Dies ist nur die vorherige und die nächste Seite
<ul> <li> <a href = "#"> <span aria-hidden = "true"> ← </span> vorherige Seite </a> </li> <li> <a href = "#"> <span aria-hidden = "true"> → </span> </a> </li> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul>
Das obige ist mit zwei miteinander verbundenen Tasten geschrieben
Das Folgende wird geschrieben, da zwei Schaltflächen auf beiden Seiten verteilt sind
<ul> <li> <a href = "#"> <span aria-hidden = "true"> ← </span> vorherige Seite </a> </li> <li> <a href = "#"> <span aria-hidden = "true"> → </span> </a> </li> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul>
6. Liste
Der Effekt der Liste ist sehr häufig und sehr einfach zu bedienen
<div> <!-Das erste Element wurde ausgewählt-> <a href = "#"> Zugriffsstatistik </a> <a href = "#"> Informationsstatistik </a> <a href = "#"> log statistics </a> </a> </a> </a> Informationsstatistik. href = "#"> Informationsstatistik </a> <a href = "#"> Informationsstatistik </a> </div>
Ich habe die obige Komponente verwendet, um eine statische Backend -Webseite zu erstellen
Der Effekt ist wie im Bild gezeigt
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.