Bootstrap 3.0 Studiennotizen Rastersystemprinzip

Durch die kurze Einführung in den beiden vorherigen Artikeln haben Sie ein vorläufiges Verständnis von Bootstrap. Da ich nur etwas Einfaches über die offizielle Bootstrap-Website lernen möchte, kann ich einfach eine Seite erstellen, die nicht zu kompliziert ist. Wenn Sie also Anfänger sind, sollten Sie einen Blick darauf werfen. Vielleicht hilft es Ihnen weiter. Experten sollten sich bitte fernhalten.

„Bootstrap 3.0 Study Notes“ führt nur kurz in das Herunterladen von Dateien und das Verweisen auf heruntergeladene Dateien ein und ist noch nicht wirklich in das Erlernen des Front-End-Designs eingestiegen. Ich habe auch gesehen, dass viele Internetnutzer großes Interesse an Bootstrap 3.0 haben. Einige sind Experten, die es schon einmal verwendet haben, und einige sind Freunde und Anfänger, die vorhaben, es wie ich zu lernen. Eine der häufigsten Antworten ist: Ich hoffe, dass es eine Serie geben kann. Natürlich hoffe ich auch, dass ich eine Serie gut planen und dann diesem Plan folgen kann. Allerdings sind meine Fähigkeiten begrenzt, daher muss ich entsprechend meinen eigenen Vorlieben lernen.

Haftungsausschluss: Meine Schreibfähigkeiten sind wirklich schlecht, ich hoffe, Sie können mir verzeihen. Wenn Fehler auftreten, informieren Sie mich bitte rechtzeitig und ich werde sie so schnell wie möglich korrigieren. Natürlich hoffe ich, dass mehr Menschen gemeinsam lernen können.

Rastersystem (Layout)

Bootstrap verfügt über ein integriertes, reaktionsfähiges, für Mobilgeräte optimiertes, flüssiges Rastersystem, das das Raster automatisch in bis zu 12 Spalten unterteilt, wenn die Bildschirmgröße oder das Ansichtsfenster zunimmt.

Hier nenne ich das Rastersystem im Bootstrap-Layout. Es erstellt ein Seitenlayout durch eine Kombination aus einer Reihe von Zeilen und Spalten und dann kann Ihr Inhalt in das von Ihnen erstellte Layout eingefügt werden. Hier ist eine kurze Einführung in die Funktionsweise des Bootstrap-Rastersystems:

DW6-Kodierungsimplementierung

Okay, fangen wir an, Code zu schreiben. Schauen wir uns zunächst das Bild des von mir verwendeten Editors an. Ich habe dieses Tool häufig verwendet, als ich in der Schule HTML+CSS lernte.

Erstellen Sie anschließend ein neues HTML-Dokument und wählen Sie den Typ HTML5

Speichern Sie es nach der Erstellung im selben Verzeichnis wie die js- und css-Ordner im vorherigen Abschnitt.

layout.html ist die Datei, die ich gerade erstellt habe. Bootstrap.html ist auch die erste HTML-Seite, die im vorherigen Abschnitt erstellt wurde.

Jetzt können Sie den gesamten Code in Bootstrap.html auf die Seite layout.html kopieren.

Fügen Sie dann den folgenden Code unter dem Body-Tag hinzu

Diese Bezeichnungen sollten für jeden verständlich sein, denn sie sind die grundlegendsten und einfachsten.

Nach dem Hinzufügen lauten alle Codes der Seite layout.html wie folgt

Der Effekt ist natürlich sehr simpel, ich habe die Screenshots trotzdem hier reingestellt, damit ihr vergleichen könnt.

Optimierung 1: Sie können feststellen, dass der Seiteneffekt im obigen Bild den gesamten Bildschirm ausfüllt. Wir können die Bootstrap-Stilklasse verwenden, um den Inhalt oben zu zentrieren.

Die Wirkung ist wie folgt

Sie sehen, dass die Containerklasse die Breite vorgibt und die Anzeige des Inhalts in der Seitenmitte ermöglicht.

Optimierung 2: Die drei Bereiche werden in einer Zeile dargestellt und gleichmäßig auf die drei Spalten aufgeteilt.

Fügen Sie zunächst einen Container für die drei Bereiche hinzu. Sie können div verwenden und dem div eine Klasse <div > hinzufügen.

Dann fügen wir für jeden kleinen Bereich ein Container-Div hinzu und fügen dem Div eine Klasse <div > hinzu

Der einfache Code lautet wie folgt

Die Wirkung ist wie folgt

Es ist zwar in einer Zeile angeordnet und dann in drei Spalten unterteilt. Kombinieren wir es mit den sechs Prinzipien des oben genannten Rastersystems. Verstehst du jetzt ein bisschen? Ich jedenfalls verstehe viel. Auf die gleiche Weise können Sie komplexere Rasterlayoutseiten erstellen. Fügen Sie einfach die entsprechende Rasterlayoutklasse zum vom Layout verwendeten Container hinzu. Wenn der Inhalt beispielsweise 6 Raster einnimmt, fügen Sie eine Klasse col-xs-6 hinzu, wenn er 4 Raster einnimmt, fügen Sie eine Klasse col-xs-4 hinzu und verwenden Sie dann Container mit Zeilenklassen um dieselbe Zeile herum.

Zusammenfassen

In diesem Abschnitt wird hauptsächlich das Layout (Rastersystem) untersucht und anhand einfacher Beispiele die Funktionsweise erläutert.

Die verwendeten Klassen sind:

1..container: Verwenden Sie .container, um den Inhalt auf der Seite umzubrechen und eine zentrierte Ausrichtung zu erreichen. Die maximale Breite des Containers wird in verschiedenen Medienabfragen oder Wertebereichen festgelegt, um sie an das Rastersystem anzupassen.

2..col-xs-4: Diese Klasse ist durch "-" in drei Teile unterteilt. Die Zahl im dritten Teil ist ein allgemeiner Begriff und ihr Bereich reicht von 1 bis 12. Das heißt, Sie können einen Bereich in 12 Spalten unterteilen. Dies sollte in Verbindung mit der Zeilenklasse verwendet werden.

Tatsächlich ist dieses Layout dem Tabellenlayout mit TR-Zeilen und TD-Spalten in HTML sehr ähnlich.

Das ist für den Moment alles. Sie können den Code einfach kopieren und einfügen, um den Effekt zu sehen. Natürlich müssen Sie zuerst die CSS- und JS-Dateien vorbereiten.