Mit der zunehmenden Anzahl von mobilen Benutzern ist die herkömmliche Websystemarchitektur nicht mit der normalen Verwendung vieler mobiler Terminals kompatibel. Bei der Arbeit werde ich auch feststellen, dass viele Kunden jetzt Managementsysteme für mobile Terminals wie Mobiltelefone und Tablets verwenden müssen. Wenn die entsprechende Antwort -Webseite für jedes Terminal separat entwickelt wird, erhöht dies die Kosten des Projekts und den Druck auf Entwickler zwangsläufig. Zu diesem Zeitpunkt ist es notwendig, das reaktionsschnelle Layout zu verstehen, das geboren wird, um Multi-Terminalprobleme zu lösen. Diesmal führen wir leichte, Open Source und kostenlose Bootstrap ein.
Aufbau einer Entwicklungsumgebung
Laden Sie zunächst das Boostrap -Quellcode -Paket der offiziellen Website herunter: http://www.bootcss.com/. Um einfache Projekte zu entwickeln, müssen Sie nicht alle CSS, JS, Schriftarten usw. in den Quellcode hinzufügen. Nach Ihren Projektanforderungen können Sie die Umgebung anpassen, die Sie benötigen.
Die erforderlichen Dateien sind wie folgt: jQuery.min.js, Bootstrap.min.js, Bootstrap.css. Wenn Sie einige der Schriftstile verwenden müssen, müssen Sie auch Schriftstellungsdateien hinzufügen, wie in der folgenden Abbildung gezeigt:
[Anmerkung] Beim Laden von JS müssen Sie zuerst jQuery.min.js laden, da Sie in Bootstrap.min.js JQuery-bezogene Methoden verwenden, d. H. Boostrap.min.js, hängt von jQuery.min.js ab.
Test Bootsrap -Umgebung
Schreiben Sie eine Testdatei index.html. Der Inhalt der Testdatei lautet wie folgt:
<! DocType html> <html> <kopf> <titels> Testen Sie die Boostrap -Umgebung </title> <link rel = "styleSheet" type = "text/cs type = "text/javaScript" src = "./ js/bootstrap.min.js"> </script> </head> <body> </body> </html>
Das obige ist eine Bootsrap -Entwicklungsumgebung. Es ist sehr einfach!
Was Sie bei der Verwendung von Boostrap wissen müssen, ist das Rastersystem von Boostrap. Genau an dieses Gittersystem ist es besser kompatibel mit Terminalgeräten mit unterschiedlichen Auflösungen.
Die offizielle Website des spezifischen Grid -Systems hat eine klare Einführung: http://v3.bootcss.com/css/. Das folgende Bild der offiziellen Website befindet sich:
Bei der Verwendung von Boostrap verwenden wir hauptsächlich einige Stile, die darin definiert wurden. Dies ist hilfreich für ein Programm, das nicht die Fähigkeit zur Kunst hat und schnell eine ziemlich gute Seite erstellt.
Bei der Verwendung von Bootstrap überprüfen wir häufig einige Hilfedokumente auf der offiziellen Website: http://v3.bootcss.com/css/#tables.
Ich persönlich empfehle Ihnen persönlich, dass Sie den entsprechenden Code in den Beispielen der offiziellen Website direkt in Ihre eigene Webseite kopieren und dann basierend darauf relevante Änderungen vornehmen. Auf diese Weise wird die Entwicklungsgeschwindigkeit schneller und die Genauigkeit höher sein.
Demonstrieren Sie einige Boostrap-Stile --- Tischstile.
<! DocType html> <html> <Head> <title> test boostrap -Umgebung </title> <link rel = "styleSheet" type = "text/css" href = "./ CSS/stootstrap.css"> <script type = "text/javascript" src = ". type="text/javascript" src="./js/bootstrap.min.js"></script><body> <table> <tr> <td> Test form</td> <td> Test form</td> <td> Test form</td> <td> Test form</td> <td> Test form</td> <td> Test form</td> <td> Test form</td> <td>Test</td> <td>Test</td> </tr> <tr> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> </tr> <tr> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> </tr> <tr> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> </tr> </table></body></html>
Die Ergebnisse der Webseite sind wie folgt:
Die Attribute im Unterricht werden vorgestellt:
1) Tabelle plus dies hat bereits den Bootsrap -Tischstil
2) Tabellenhaus zeigt an, dass der Zeilenhintergrund der Tabellenmaus hell bleibt
3) Die Tabelle mit Tabellen erscheint in Grenzen
4) Tischstreifenstreifen gestreift
[Hinweis] Wenn mehrere Attribute addiert werden, befinden sich zwischen jedem Attribut Leerzeichen.
2. Knopf
<!-button-> <a href = "#" rollen = "button"> link </a> <button type = "subieren"> button </button> <Eingabe type = "button" value = "input"> <Eingabe type = "subieren" value = "subay"> <! type = "button"> (Einstellungen) Primär </button> <! Negative Aktion-> <Button type = "Button"> (Gefahr) Gefahr </button> <!-Erkennen Sie eine Schaltfläche, indem Sie sie wie ein Link aussehen, während Sie das Schaltflächenverhalten beibehalten-> <Schaltfläche Typ = "Button"> (Link) Link </button>
Die Ergebnisse der Webseite sind wie folgt:
Für viele andere Stile und Komponenten wird empfohlen, auf die offizielle Hilfsdokumentation zu verweisen.
Zusammenfassen
Dieser Artikel ist ein Leitfaden, der kurz vorstellt, wofür Boostrap ist und wie man ihn benutzt. Es gibt keine detaillierte Liste aller Komponenten und Stile, aber ... lesen Sie!
Dies ist ein sehr magischer Artikel. Sie müssen sich anklicken und einen Blick darauf werfen: Bootstrap -Lern -Tutorial lohnt sich zu teilen und zu sammeln
Wenn Sie weiterhin ausführlich lernen möchten, können Sie hier klicken, um Ihnen zu lernen und Ihnen zwei aufregende Themen anzuhängen: Bootstrap -Lern -Tutorial Bootstrap Practical Tutorial
Ich hoffe, dass diejenigen, die an Bootstrap interessiert sind, die Auswirkungen jedes Stils manuell testen und wie man jede Komponente selbst verwendet, und den Spaß, den Bootstrap mitgebracht hat, wirklich spüren.