Das Netzsystem ist "Grid Systems" in Englisch, und einige Leute übersetzen es als "Gittersystem". Es verwendet ein festes Gitter -Design -Layout. Sein Stil ist ordentlich und prägnant. Nach dem Zweiten Weltkrieg wurde es sehr beliebt und ist heute zu einem der Mainstream -Stile des Publikationsdesigns geworden.
1692 war Louis XIV, der neu aufgestiegene französische König, der Ansicht, dass Frankreichs Druckstufe unbefriedigend war, und ordnete die Einrichtung eines königlichen Sonderausschusses an, um den Druck zu verwalten. Ihre erste Aufgabe ist es, neue Schriftarten zu entwerfen, die wissenschaftlich, vernünftig und wertvoll sind. Das Komitee wurde von Mathematiker Nicolas Jaaugeon geleitet. Sie basierten auf römischen Körpern und verwendeten Quadrate als Designbasis. Jedes quadratische Netz wurde in 64 grundlegende quadratische Einheiten unterteilt, und jede quadratische Einheit wurde in 36 kleine Gitter unterteilt. Auf diese Weise besteht ein Drucklayout aus 2.304 kleinen Gittern. In diesem strengen geometrischen Netznetzwerk wurden die Form der Schriftart, die Layoutanordnung und die Wirksamkeit der Kommunikationsfunktion entworfen. Dies ist die früheste Aktivität der Welt, um wissenschaftliche Experimente an Schriftarten und Layouts durchzuführen, und es ist auch der früheste Prototyp des Gittersystems.
Die Definition des Webseiten -Rastersystems lautet: Verwenden eines regulären Raster -Arrays zum Leitfaden und Standardisieren der Layout- und Informationsverteilung auf der Webseite. Web -Raster -Systeme werden aus planaren Rastersystemen entwickelt. Für das Webdesign kann die Verwendung von Gittersystemen nicht nur die Informationen auf Webseiten schöner und einfacher, sondern auch nutzbarer machen. Darüber hinaus werden Webseiten für die Front-End-Entwicklung flexibler und standardisierter sein.
Bootstrap bietet ein reaktionsschnelles, mobiles Streaming-Gittersystem. Mit zunehmender Bildschirm- oder Ansichtsfenstergröße wird das System automatisch in bis zu 12 Spalten unterteilt. Es enthält einfach zu verwendende vordefinierte Klassen und leistungsstarke Mixins, um mehr semantische Layouts zu erzeugen.
Mit anderen Worten, Bootstrap unterteilt die Breite eines Elements in 12 Teile. Wir arrangieren die Elemente in dieser Reihe, die in 12 Teile unterteilt sind.
1. Grundziele
Machen Sie die folgenden zwei Zeilen, und die Breite jeder Zelle in diesen beiden Zeilen ändert sich aufgrund verschiedener Geräte:
Auf dem kleinen Bildschirm des Mobiltelefons berücksichtigt das Aufwärts -A für 2 Teile B 10 Teile, die Abwärts -A -Konten für 1 Teil B für 10 Teile c für 1 Teile, und das ABC teilt diese 12 Teile.
Auf dem mittleren Bildschirm des Tablets werden 8 Teile B für 4 Teile nach oben, AB diese 12 Teile kontaktiert.
Auf dem großen PC -Bildschirm ist AB -A -Konten für 8 B -Konten für 8 Aktien.
2. Produktionsprozess
Konfigurieren Sie zuerst Bootstrap im Webordner und laden Sie die Komponenten auf der offiziellen Website herunter (klicken Sie auf, um den Link zu öffnen). Die in der Produktionsumgebung verwendete Bootstrap -Version (klicken Sie, um den Link zu öffnen). Bootstrap3 ist nicht mit 2. kompatibel. Es wird empfohlen, Bootstrap3 direkt gemäß seinen Entwicklungsdokumenten zu verwenden. Kopieren Sie nach dem Dekomprimieren von Bootstrap die erhaltenen 3 Ordner CSS, Schriftarten und JS in das Site -Verzeichnis. Wenn es sich um das JSP -Webprojekt von Eclipse handelt, stellen Sie es unter den Weber -Ordner.
Der Code ist wie folgt. Weitere Informationen finden Sie in den Kommentaren:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd"><Htmlmlml xmlns = "http://www.w3.org/1999/xhtml"> <kopf> <!-Web-Codierung, externe Dateien, die verwendet werden sollen, werden automatisch an den Bildschirm anpassen-> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <link "content =" text/html; href = "css/bootstrap.css" rel = "styleSheet" media = "screen"> <meta name = "viewPort" content = "width = Gerätebidakte, initiale scale = 1,0, benutzerkalierbar = nein" Bildschirm-> <!-class = "Container" wird automatisch zentrieren-> <div> <!-eine Zeile definieren-> <div> <! -> <!-BG-Warning ist die Hintergrundfarbe, die eine hellgelbe Farbe definiert-> <div> a </div> <div> b </div> </div> <div> <! -> <div> a </div> <div> b </div> <div> c </div> </div> </body> </html>