Bootstrap warum 12 Raster

Einführung in das Grid-System

Bootstrap bietet ein reaktionsfähiges, mobile-first-Fluid-Grid. Das System, als Wenn die Bildschirm- oder Ansichtsfenstergröße zunimmt, wird sie automatisch in bis zu 12 Spalten unterteilt. Es enthält benutzerfreundliche vordefinierte Klassen sowie leistungsstarke Mixins zum Generieren semantischerer Layouts.

Das Rastersystem erstellt das Layout der Seite durch eine Reihe von Kombinationen von Zeilen und Spalten, und der festgelegte Inhalt kann im erstellten Layout platziert werden.

Das Implementierungsprinzip des Rastersystems

Das Implementierungsprinzip des Rastersystems ist sehr einfach, indem einfach die Größe des Containers definiert wird , unterteilt in 12 Passen Sie dann die inneren und äußeren Ränder an und kombinieren Sie sie schließlich mit Medienabfragen, um ein leistungsstarkes, reaktionsfähiges Rastersystem zu erstellen.

Das Hauptarbeitsprinzip des Rastersystems:

➣ Eine Datenzeile (Zeile) muss in .container (feste Breite) enthalten sein ) oder .container -fluid (100 % Breite), um eine ordnungsgemäße Ausrichtung und Polsterung zu gewährleisten.

➣ Erstellen Sie eine Reihe von „Spalten“ in horizontaler Richtung durch „Zeilen“.

➣ Ihr spezifischer Inhalt sollte in „Spalte“ platziert werden, und nur „Spalte“ kann ein direktes untergeordnetes Element von Zeile sein

➣ Davon gibt es viele Integrierte Stile, und Sie können Stile (d. h. vordefinierte Klassen) wie .row und .col-xs-4 (vier Spalten breit) verwenden, um schnell ein Rasterlayout im Bootstrap-Quellcode zu erstellen. Das definierte Mixin kann ebenfalls verwendet werden um semantische Layouts zu erstellen, indem das Padding-Attribut für „column“ festgelegt wird, um Lücken zwischen Spalten zu erstellen. Das .row-Element legt einen negativen Rand fest, um den Padding-Satz für das .container-Element zu versetzen, der indirekt den Padding für die darin enthaltene „column“ versetzt die „Zeile“

➣ Spalten in einem Rastersystem werden durch den Bereich dargestellt, den sie umfassen, indem ein Wert von 1 bis 12 angegeben wird. Beispielsweise können drei Spalten gleicher Breite mit drei erstellt werden. col-xs-4.
➣ Wenn die in einer „Zeile“ enthaltene „Spalte“ größer als 12 ist, werden die Elemente in der zusätzlichen „Spalte“ als Ganzes in einer anderen Zeile angeordnet

➣ Rasterklassen sind für Geräte mit Bildschirmbreiten größer oder gleich der Haltepunktgröße verfügbar und werden für Geräte mit kleinen Bildschirmen überschrieben. Daher gelten alle auf ein Element angewendeten .col-md-*-Rasterklassen Geräte, deren Bildschirmbreite größer oder gleich der Haltepunktgröße ist, und das Überschreiben der Rasterklasse für Geräte mit kleinem Bildschirm ist nicht vorhanden und betrifft daher Geräte mit großem Bildschirm

Bootstrap muss einen .container-Container für den Seiteninhalt und das Rastersystem umschließen. Beachten Sie, dass wir zu diesem Zweck zwei Klassen bereitstellen. Aufgrund von Auffüllungen und anderen Attributen können diese beiden Containerklassen nicht ineinander verschachtelt werden. Die Klasse

.container wird für Container mit fester Breite verwendet und unterstützt ein responsives Layout.

<div class="container">
  ...
</div>

.container wird für Container mit 100 % Breite verwendet, die das gesamte Format einnehmen Ansichtsfenster

<div class="container-fluid">
  ...
</div>

Verwendung des Rastersystems

Die Verwendung des Rastersystems ist eigentlich Verschiedene Kombinationen von Spalten Es gibt vier grundlegende Funktionen, nämlich Spaltenkombination, Spaltenversatz, Da verschiedene Bildschirmgrößen unterschiedliche Stile verwenden, verwenden wir als Beispiel den mittleren Bildschirm (md). Die Verwendung anderer Bildschirme ist ähnlich 🎜>

Bei der Spaltenkombination werden Spalten durch Ändern der Zahlen zusammengeführt, ähnlich wie bei Colspan in der Tabelle. Die Implementierung der Spaltenkombination ist einfach und umfasst nur zwei CSS-Eigenschaften: Left Float und Percentage.

Hinweis: Denken Sie bei der Verwendung des Rastersystems daran, dass die Gesamtzahl der Zellen in jeder Zeile 12 beträgt und Sie diese entsprechend dem tatsächlichen Projekt frei kombinieren können.

        <div class="container">
            <div class="row">
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
            </div>
            <div class="row">
                <div class="col-md-8">.col-md-8</div>
                <div class="col-md-4">.col-md-4</div>
            </div>
            <div class="row">
                <div class="col-md-4">.col-md-4</div>
                <div class="col-md-4">.col-md-4</div>
                <div class="col-md-4">.col-md-4</div>
            </div>
            <div class="row">
                <div class="col-md-6">.col-md-6</div>
                <div class="col-md-6">.col-md-6</div>
            </div>
        </div>

Verwandte Empfehlungen: „
Bootstrap-Einführungs-Tutorial

“

2. Spaltenversatz

Manchmal Wir möchten nicht, dass zwei benachbarte Spalten nebeneinander liegen. In diesem Fall können wir die Spaltenversatzfunktion des Rastersystems verwenden, um dies zu erreichen, ohne einen Randwert definieren zu müssen. Bei mittelgroßen Bildschirmen können Sie Stile der Form .col-md-offset-* verwenden, um Spalten nach rechts zu versetzen.

Zum Beispiel bedeutet .col-md-offset-2, das Element zwei Spaltenbreiten nach rechts zu verschieben.

　　　 <!--列偏移-->
　　　　<div class="container">
            <div class="row">
                <div class="col-md-4">.col-md-4</div>
                <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
            </div>
            <div class="row">
                <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
                <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
            </div>
　　　　</div>

3. Spaltenverschachtelung

栅格系统也支持列嵌套，即在一个列里再声明一个或多个行（row），但是要注意，内部所嵌套的 row 的宽度为 100% 时，就是当前外部列的宽度。被嵌套的行（row）所包含的列（column）的个数不能超过12。

        <!--列嵌套-->
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    Level 1：col-md-8
                    <!--在第一行里又添加一行-->
                    <div class="row">
                        <div class="col-md-6">Level 2：col-md-6</div>
                        <div class="col-md-6">Level 2：col-md-6</div>
                    </div>
                    <!--在第一行里又添加一行-->
                    <div class="row">
                        <div class="col-md-3"> Level 3：col-md-3 </div>
                        <div class="col-md-6"> Level 3：col-md-6 </div>
                    </div>
                </div>
                <div class="col-md-4">Level 1：col-md-4</div>
            </div>
        </div>

说明：可以看到，在第一个列(col-md-8)里面，嵌套了一个新行(row)，然后在新行里，又放置了两个等宽的(col-md-6)列，并且两个 col-md-6 加起来是12，但是总宽度和外面的 col-md-8 列的宽度一样，也就是说在  row 里的列宽度是按照百分比分配的。在任何一个嵌套列里，不管宽度是多少，都可以再进行 12 等分，并可以进一步组合。

4、列排序

列排序就是改变列的方向，也就是改变左右浮动，并设置浮动的距离。在栅格系统里，可以通过 .col-md-push-* 和 .col-md-pull-* 来实现这一目的。

　　　　　<!--列排序-->
        <div class="container">
            <div class="row">
            　　<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
            　　<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
        　　</div>
        </div>

说明：默认情况下，col-md-9 在左边，col-md-3 在右边，如果要互换位置，需要将 col-md-9 列向右移动三个列的距离，也就是推三个列的 offset，样式用 col-md-push-3；而 col-md-3 需要向左移动，也就是拉九个 offset，样式用 col-md-pull-9。

响应式栅格

我们都知道，Bootstrap 可以制作响应式页面。它能为不同屏幕尺寸提供不同栅格样式。在前面的例子中，我们一直都在使用中等屏幕(md)，既然是响应式页面，当然还应该包括超小屏幕(xs)、小型屏幕(sm)、大屏幕(lg)等。

Bootstrap 栅格参数

说明：通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

Das obige ist der detaillierte Inhalt vonBootstrap warum 12 Raster. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!