Was ist Bootstrap?
Bootstrap ist ein Front-End-Framework für die schnelle Entwicklung von Webanwendungen und Websites. Bootstrap basiert auf HTML, CSS und JavaScript.
Geschichte
Bootstrap wurde von Mark Otto und Jacob Thornton von Twitter entwickelt. Bootstrap ist ein Open -Source -Produkt, das im August 2011 auf GitHub veröffentlicht wurde.
Ich habe in letzter Zeit viel Freizeit. Heute werde ich Ihnen ein Front -End -Style -Framework vorstellen - Bootstrap.
1. Bootstrap Gesamtarchitektur
Warum nenne ich in der Einführung Bootstrap als Front-End-Stil? Vielleicht ist ein solcher Titel nicht sehr genau, aber ich denke, ein solcher Titel kann es einigen Anfängern ermöglichen, zu verstehen und zu verstehen, was Bootstrap schneller ist. Ich mag es nicht, einige High-End-Wörter zu verwenden, um das Verständnis eines bestimmten Wissens zu vertiefen, sondern lieber einige leicht verständliche Wörter zu verwenden, um Wissenspunkte zu beschreiben. Obwohl eine solche Beschreibung etwas ungenau sein mag, denke ich, dass es keine große Sache ist, da solche Beschreibungen Anfänger tatsächlich ermöglichen können, dieses Wissen schneller zu verstehen. Weil ich verwirrt war, als ich Wissenspunkte lernte, waren einige offizielle Wissensdokumente so High-End. In der Tat waren es nur einige Dinge aus der Vergangenheit und dann eingekapselt, um die Entwicklung einfacher und schneller zu machen. Hier teile ich also, dass das Bootstrap -Framework gleich ist. Darüber hinaus soll die Inhaltsorganisation Anfängern ermöglichen, sie besser zu beherrschen. Denn als ich anfing, damit in Kontakt zu kommen, war ich auch Anfänger. Ich denke, diese Art der Organisation kann Ihnen helfen, das Wissen schneller und besser zu verstehen.
Für Bootstrap müssen wir zunächst seine Gesamtarchitektur vorstellen - woraus genau besteht es. Ich glaube, dass Sie schnell verstehen können, woraus genau in Bootstrap zusammengesetzt ist, indem Sie sich das Bild unten ansehen.
Aus der obigen Abbildung können wir deutlich sehen, dass Bootstrap hauptsächlich aus den folgenden Teilen besteht:
12 Gittersystem - soll den Bildschirm in 12 Kopien (Spalten) unterteilen.
Verwenden Sie Zeilen, um Elemente zu organisieren (jede Zeile enthält 12 Spalten) und dann den Inhalt in die Spalte einfügen.
Kontrollspaltenversatz durch col-md-offset-*.
Grundlegende Layoutkomponenten - Bootstrap bietet eine Vielzahl von grundlegenden Layoutkomponenten. Wie Artenseting, Code, Formulare, Schaltflächen, Formulare usw.
JQuery - Bootstrap Alle JavaScript -Plugins basieren auf jQuery. Wenn Sie diese JS -Plugins verwenden möchten, müssen Sie sich auf die JQuery -Bibliothek beziehen. Dies ist auch der Grund, warum wir uns auf die Jquery -Bibliothek verweisen müssen und sich auf die JS -Datei und die CSS -Datei von Bootstrap beziehen, die beide Abhängigkeiten sind.
CSS -Komponenten - Bootstrap hat viele CSS -Komponenten für uns implementiert. Zusammenstellen Sie die Box, die Knopfgruppe, die Navigation usw. Mit anderen Worten, Bootstrap-Inhalt hat uns geholfen, viele CSS-Stile zu definieren, und Sie können diese Stile direkt auf Elemente wie frühere Dropdown-Boxen anwenden.
JavaScript Plug-In-Bootstrap implementiert auch einige JS-Plug-Ins für uns. Wir können die von ihm bereitgestellten Plug-Ins verwenden, um einige gängige Funktionen auszufüllen, ohne dass wir den JS-Code umschreiben müssen, um Effekte wie Eingabeaufentwicklungsboxen und modale Fenster zu erzielen.
Responsives Design - Dies ist ein Designkonzept. Responsiv bedeutet, dass die Seite automatisch nach der Bildschirmgröße angepasst wird, sodass die Front-End-Seite auf Bildschirmen unterschiedlicher Größen gut abschneiden kann.
Bootstrap besteht aus den oben genannten Teilen. Das obige hat eine kurze Einführung in jede Komponente gegeben, und der folgende Inhalt ist nichts anderes als eine detaillierte Einführung in jede Komponente anhand einiger Beispiele.
2. 12 Gittersystem
Bootstrap definiert ein 12 -Gitter -System für ein besseres Layout. Das erste, was zu definieren ist, ist das Layoutsystem für jedes Front-End-Framework. In Bootstrap verwendet es Zeilen und Spalten, um das Seitenlayout zu erstellen. Es gibt mehrere Prinzipien für sein Layout:
Die Zeile muss in .Container (feste Breite) oder .Container-Fluid (100% Breite) enthalten sein
Jede Zeile enthält 12 Spalten
Platzieren Sie den Inhalt in jeder Spalte
Im Rastersystem von Bootstrap sind die Browser in 4 Typen entsprechend ihrer Breite unterteilt. Die Werte sind: automatisch (100%), 750px, 970px und 1170px.
Die entsprechenden Stile sind ultra-klein (xs), klein (SM), mittelgroßer Bildschirm (MD) und groß (LG)
Es wird ursprünglich durch Definieren der Mindestbreite durch Medienabfrage implementiert. Daher sind die von Bootstrap hergestellten Webseiten mit den großen und kleinen kompatibel!
Innerhalb des Bootstrap -Frameworks wurde der Abgrenzungswert der Bildschirmgröße vordefiniert, und der Abgrenzwert wird durch Medienabfragen definiert. Seine Definition ist wie folgt:
/* Ultra-Small-Bildschirm (Mobile, weniger als 768px)* //* Es gibt keinen Code in Bezug auf Medienabfrage, da dies der Standard in Bootstrap ist (erinnern Sie sich an Bootstrap, ist mobile first? 992px) */ @media (min-width: @screen-md-min) {...}/ *großer Bildschirm (große Desktop-Anzeige, größer oder gleich 1200px) */ @media (min-width: @screen-lg-min) {...}Tatsächlich werden Medienabfragen auch in der Win8 -Anwendungsentwicklung verwendet, um reaktionsschnelle Anwendungen zu realisieren. Wenn Sie also das Reaktionssystem in Zukunft hören, denken Sie nicht, dass es sehr tiefgreifend ist. Tatsächlich definiert das Framework Medienfragen für uns. Wenn die in den Medienabfragen definierte minimale Breite die in den Medienabfragen definierte Mindestbreite überschreitet, können Sie auf diese Weise die Elementgröße zwischen verschiedenen Bildschirmen verkleinern, um sich an den Bildschirm anzupassen. Das von Bootstrap vorgeschlagene Konzept wird jedoch für mobile Geräte bevorzugt, sodass die von Bootstrap entworfenen Seiten nur mit dem großen und kleinen Unvereinbar mit den kleinen kompatibel sein können.
3.. Grundlegende Layoutkomponenten
Die grundlegende Layoutkomponente ist, dass das Bootstrap -Framework einige einheitliche Stile für einige grundlegende Layout -Etiketten definiert. Wie Tabelle, Taste, Form usw. Schauen wir uns ein Beispiel der Tabelle an:
<! DocType html> <html Lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-äquiv = "x-ua-compatible" content = "ie = edge"> <meta name = "adveport" content = "width = toy-widdh, initial-mough, initial-scale = 1" 1 "1"> <; Und jeder andere Inhalt * muss ihnen folgen! -> <title> Bootstrap 101 Vorlage </title> <!-Da es kein JS-Plugin für Bootstrap gibt, gibt es keinen Verweis auf die JQuery-Komponente-> <!-Bootstrap-> <link rel = "Stylesheet" href = "http://cdn.bootcs.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head> <body> <h3> Standardstiltabelle </h3> <table> <Caption> Tabelle Titel. table--><thead><tr><th>ID</th><th>First Name</th><th>Last Name</th></tr></thead><tbody><tr><th scope="row">1</th><td>Tommy</td><td>Li</td></tr><tr><th scope = "row"> 2 </th> <td> bob </td> <td> sAN </td> </tr> <tr> <Th Scope = "row"> 3 </th> <td> sam </td> <td> wang </td> </tbody> <h3> Tisch mit Border </h3> </h3> </h3> <cable> <cable> </tDable. T+Kopf, T repräsentiert die Bedeutung der Tabelle-> <Thead> <tr> <Th> id </th> <th> Vorname </th> <Th> Nachname </th> </tr> </thead> <tbody> <tr> <th scope = "row"> 1 </th> </th> </td> <td> li </td> </td> </td> </td> </td> </td> </td> scope = "row"> 2 </th> <td> bob </td> <td> sAN </td> </tr> <tr> <Th Scope = "row"> 3 </th> <td> sam </td> <td> Wang </td> </tr> </tbody> <! http://v3.bootcs.com/css/#tables --><!-- jQuery (notwendig für die JavaScript-Plugins von Bootstrap)-> <script src = "http://cdn.bootcs.com/jquery/1.1.2/jquery.Min.Min.Min.Min. -> <script src = "http://cdn.bootcss.com/bootstrap/3.4/js/bootstrap.min.js"> </script> </body> </html>
Der Beispielcode für Schaltfläche und Formular wird hier nicht veröffentlicht. Sie können den folgenden Link verwenden, um den laufenden Effekt und den Quellcode anzuzeigen. Sie können auch alle Quellcodes dieses Themas über die letzte Download -Datei herunterladen.
Iv. CSS -Komponenten
CSS -Komponenten ähneln den grundlegenden Layoutkomponenten, dh Bootstrap definiert einige vorhandene Stile für einige Tags, und die Auswirkung dieser Stile ist sehr schön, so dass jeder Unternehmen oder jeder Entwickler keinen anderen Stil schreiben muss, wodurch die Entwicklungseffizienz beschleunigt wird. Schauen wir uns hier ein Navigationsbeispiel an. Um es unverblümt auszudrücken, wenn Sie dieses Ding zu viel verwenden, werden Sie sich natürlich damit vertraut machen.
<! DocType html> <html Lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-äquiv = "x-ua-compatible" content = "ie = edge"> <meta name = "adveport" content = "width = toy-widdh, initial-mough, initial-scale = 1" 1 "1"> <; Und jeder andere Inhalt * muss ihnen folgen! -> <title> Bootstrap 101 Template </title> <!-Bootstrap-> <link rel = "stylesheet" href = "http://cdn.bootcs.com/bootstrap/3.3.4/css/bootstrap.min Gruppiert für eine bessere mobile Anzeige-> <div> <button type = "button" data-toggle = "collapse" data-target = "#bs-example-navbar-collapse-1" aria-expanded = "false"> <span> Toggle-Navigation </span> </span> </span> </span> </span> </pan> </pan> </</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</a) </</button href="#">Home</a></div><!-- Collect the nav links, forms, and other content for toggling --><div id="bs-example-navbar-collapse-1"><ul><li><a href="#">Home <span>(current)</span></a></li><li><a href = "#"> About </a> </li> </ul> <ul> <li> <a href = "#"> link </a> </li> <li> <a href = "#" data-toggle = "Dropdown" rollen = "button" aria-haspop = "true" <lari- expanded = "falsedown"> <last ">" falsedown "> <last"> "falsedown"> <lais ">" falsedown "> <lais"> "falsedown"> <lais ">" falsedown "> <lais"> "falsedown"> <lais ">" falsedown "> <la>" | href="#">Action 1</a></li><li><a href="#">Action 2</a></li><li><a href="#">Action 3</a></li><li><a href="#">Separated Action</a></li></li></ul></div><!-- /.navbar-collapse -> </div> <!-/.Container-fluid-> </nav> <!-jQuery (notwendig für die JavaScript-Plugins von Bootstrap)-> <script src = "http://cdn.bootcs.com/jquery/1.11.2/jquery.Min.Min.Min.Min. -> <script src = "http://cdn.bootcss.com/bootstrap/3.4/js/bootstrap.min.js"> </script> </body> </html>
Die Betriebseffekte anderer Komponenten sind wie folgt:
5. JavaScript-Plug-In
Standardmäßig können alle JS -Plugins implementiert werden, indem spezifischer HTML -Code und entsprechende Eigenschaften festgelegt werden, ohne eine Zeile von JavaScript -Code zu schreiben. Das Wesentliche seiner Implementierung ist, dass Bootstrap den entsprechenden JavaScript -Code für diese Eigenschaften implementiert.
Schauen wir uns ein Beispiel für ein modales Fenster an:
<! DocType html> <html Lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-äquiv = "x-ua-compatible" content = "ie = edge"> <meta name = "adveport" content = "width = toy-widdh, initial-mough, initial-scale = 1" 1 "1"> <; Und jeder andere Inhalt * muss ihnen folgen! -> <title> Bootstrap 101 Template </title> <!-Bootstrap-> <link rel = "stylesheet" href = "http://cdn.bootcs.com/bootstrap/3.3.4/css/bootstrap.min type = "button" data-toggle = "modal" data-target = "#myModal"> klicken Titel </h4> </div> <div> <p> Testkörper… </p> </div> <div> <button type = "button" data-dismiss = "modal"> schließen </button <button = "button"> speichern Änderungen </button> </div> <!-/.modal-content-> </div> <!-/. JQuery (notwendig für die JavaScript-Plugins von Bootstrap)-> <script src = "http://cdn.bootcs.com/jquery/1.11.2/jquery.min.js"> </script> <!-Integrieren Sie alle kompilierten Plugins (unten) oder einbeziehen einzelne Dateien nach Bedarf nach Bedarf einzeln src = "http://cdn.bootcs.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> </body> </html>
Haben Sie nach dem Lesen aller vorherigen Inhalte sofort das Gefühl, dass Bootstrap eigentlich nur ein Style -Framework ist? Damit können wir schnell und einfach Webseiten erstellen. Nach dem Lesen des vorherigen Inhalts werden Sie außerdem nicht verwechselt, warum das offizielle Bootstrap -Dokument wie folgt lautet:
Ist die Einträge in der Navigationsleiste des offiziellen Bootstraps nicht die Hauptkomponenten unserer obigen Einführung dokumentiert?
6. Zusammenfassung
Zu diesem Zeitpunkt ist der gesamte Inhalt dieses Artikels beendet. Ich hoffe, dass Anfänger durch diesen Artikel Bootstrap schnell verstehen und meistern können. Darüber hinaus entspricht dieser Artikel den wichtigsten Punkten von Bootstrap. Für detailliertere Inhalte können Sie sich auf die offizielle chinesische Website von Bootstrap beziehen. Aber ich glaube nicht, dass ich es nicht mehr will. Es ist besser, es direkt zu üben, wenn Sie diese Zeit haben. Die VS2013 -Webanwendung unterstützt das Bootstrap -Framework standardmäßig. Sie können sofort eine Webanwendung über VS2013 erstellen, um die Anwendung von Bootstrap unter ASP.NET MVC zu erleben, bevor Sie sie lesen.