Empfohlene Materialien (Quellcode der Kursunterlagen) für das Bootstrap-Einführungsvideo der Wheat Academy

Bootstrap ist derzeit das beliebteste von Twitter veröffentlichte Front-End-Framework. Bootstrap basiert auf HTML, CSS und JAVASCRIPT. Es ist einfach und flexibel und kapselt gängige CSS-Layouts, häufig verwendete Komponenten und JavaScript-Plug-Ins vollständig und ermöglicht es unerfahrenen Front-End-Ingenieuren und Back-End-Entwicklungsingenieuren Beherrschen und verwenden Sie es erheblich. Es verbessert die Entwicklungseffizienz erheblich und standardisiert bis zu einem gewissen Grad auch das Schreiben von CSS und JavaScript durch das Front-End-Team. Kurz gesagt, das Erlernen von Bootstrap ermöglicht Ihnen die einfache Entwicklung reaktionsfähiger WEB-Projekte. „Wheat Academy Bootstrap-Einführungsvideo-Tutorial“ hilft Ihnen beim einfachen Einstieg in Bootstrap.

Adresse für die Kurswiedergabe: http://www.php.cn/course/324.html

Der Unterrichtsstil des Lehrers:

Die Vorträge des Lehrers sind lebendig, witzig, witzig und berührend. Eine lebendige Metapher ist wie der letzte Schliff, der den Schülern die Tür zur Weisheit öffnet; ein gut platzierter Humor zaubert den Schülern ein wissendes Lächeln, als würde er den Menschen einen Nachgeschmack und Nostalgie verleihen werden von Zeit zu Zeit in die Erzählung eingestreut und regen die Menschen zum Nachdenken und zur Wachsamkeit an.

Der schwierigere Punkt in diesem Video ist das Prinzip des Bootstrap-Grid-Systems:

Bootstrap verfügt über ein integriertes, reaktionsfähiges, mobiles Device-First-Flow-Grid-System Wenn das Bildschirmgerät oder die Größe des Ansichtsfensters zunimmt, teilt das System es automatisch in bis zu 12 Spalten auf.

Ich nenne das Rastersystem in Bootstrap hier ein Layout. Durch eine Reihe von Kombinationen von Zeilen und Spalten wird ein Seitenlayout erstellt. Anschließend können Ihre Inhalte in dem von Ihnen erstellten Layout platziert werden. Das Folgende ist eine kurze Einführung in das Funktionsprinzip des Bootstrap-Grid-Systems:

Das Implementierungsprinzip des Grid-Systems ist sehr einfach, indem einfach die Containergröße definiert und in 12 gleiche Teile geteilt wird (es ist auch möglich). in 24 oder 32 Teile unterteilt werden, am häufigsten sind jedoch 12 Teile), passen Sie dann die inneren und äußeren Ränder an und kombinieren Sie es schließlich mit Medienabfragen, um ein leistungsstarkes, reaktionsfähiges Rastersystem zu erstellen. Das Rastersystem im Bootstrap-Framework unterteilt den Container in 12 gleiche Teile.

Wenn Sie es verwenden, können Sie den LESS- (oder Sass-) Quellcode entsprechend der tatsächlichen Situation neu kompilieren, um den Wert von 12 zu ändern (dh in 24 oder 32 zu ändern). Natürlich können Sie auch teilen es in mehr, aber es wird nicht empfohlen, es auf diese Weise zu verwenden) ).

Bootstrap verfügt über einen integrierten Satz reaktionsfähiger und mobiler Geräte.

1. Die Datenzeile (.row) muss im Container (.Container) enthalten sein, um eine entsprechende Ausrichtung und Auffüllung zu gewährleisten. Beispiel:

<div class="<span style="color: rgb(178, 34, 34);">container</span>">
<span style="white-space: pre;">	
</span><div class="<span style="color: rgb(178, 34, 34);">row</span>"></div>
</div>

2. Spalten (.column) können zu Zeilen (.row) hinzugefügt werden, aber die Summe der Anzahl der Spalten darf die Gesamtzahl der gleichmäßig geteilten Spalten, z. B. 12, nicht überschreiten . Beispiel:

<div class="container">
<div class="row">
  <div class="col-md-<span style="color: rgb(178, 34, 34);">4</span>"></div>
  <div class="col-md-<span style="color: rgb(178, 34, 34);">8</span>"></div>

3. Der spezifische Inhalt sollte im Spaltencontainer (Spalte) platziert werden und nur die Spalte (Spalte) kann verwendet werden als direktes untergeordnetes Element eines Zeilencontainers ( .row)

4. Erstellen Sie den Abstand zwischen den Spalten, indem Sie den Abstand festlegen. Gleichen Sie dann den Effekt des Auffüllens aus, indem Sie negative Ränder für die erste und letzte Spalte festlegen

Das obige ist der detaillierte Inhalt vonEmpfohlene Materialien (Quellcode der Kursunterlagen) für das Bootstrap-Einführungsvideo der Wheat Academy. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!