Kapitel 5: BootStrap Grid System_Javascript-Kenntnisse-js-Tutorial-php.cn

Kapitel 5: BootStrap Grid System_Javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 15:04:03

Original

1259 Leute haben es durchsucht

Bootstrap von Twitter ist derzeit das beliebteste Frontend-Framework. Bootstrap basiert auf HTML, CSS und JAVASCRIPT. Es ist einfach und flexibel und beschleunigt die Webentwicklung.

Lernpunkte:

1. Mobile Geräte zuerst
2. Layout-Container
3. Gittersystem

In dieser Lektion lernen wir hauptsächlich das Grid-System von Bootstrap kennen, das ein reaktionsfähiges, auf Mobilgeräte ausgerichtetes Fluid-Grid-System bereitstellt.

1. Mobil zuerst

Im HTML5-Projekt haben wir ein mobiles Projekt erstellt. Es verfügt über ein sehr wichtiges Meta, das verwendet wird, um die gleiche Breite wie der Bildschirm und das Gerät festzulegen, ob die Benutzerskalierung ausgeführt werden soll und das Skalierungsverhältnis.

//分别为：屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

Nach dem Login kopieren

2. Layout-Container

Bootstrap erfordert einen .container-Container, um den Seiteninhalt und das Rastersystem zu umschließen. Aufgrund von Attributen wie Padding können diese beiden Containerklassen nicht ineinander verschachtelt werden.

//固定宽度
<div class="container">
...
</div> 
//100%宽度
<div class="container-fluid">
...
</div>

Nach dem Login kopieren

Im Rastersystem weist der Browser automatisch bis zu 12 Spalten zu, wenn die Bildschirmgröße zunimmt oder abnimmt. Erstellen Sie ein Seitenlayout mit einer Reihe von Zeilen und Spalten. So funktioniert es:

1. „Row“ muss in .container (feste Breite) oder .container-fluid (100 % Breite) enthalten sein, um eine angemessene Ausrichtung und Polsterung zu gewährleisten.

2. Erstellen Sie eine Gruppe von „Spalten“ in horizontaler Richtung durch „Zeilen“.

3. Ihr Inhalt sollte in „Spalte“ platziert werden und nur „Spalte“ kann ein direktes untergeordnetes Element von Zeile sein

4. Vordefinierte Klassen wie .row und .col-xs-4 können verwendet werden, um schnell Rasterlayouts zu erstellen.

Im Bootstrap-Quellcode definierte Mixins können auch zum Erstellen semantischer Layouts verwendet werden.

5. Erstellen Sie einen Zwischenraum zwischen den Spalten, indem Sie das Füllattribut für „Spalte“ festlegen. Durch Festlegen eines negativen Werts für das .row-Element

margin gleicht somit den Füllsatz für das .container-Element aus und gleicht indirekt den Füllsatz für die in der „Zeile“ enthaltene „Spalte“ aus.

6. Der negative Wert der Marge ist der Grund, warum das folgende Beispiel nach außen ragt. Inhalte in Rasterspalten werden ausgerichtet.

7. Spalten im Rastersystem stellen den Bereich dar, den sie abdecken, indem sie Werte von 1 bis 12 angeben. Beispielsweise können drei Spalten gleicher Breite mit drei .col-xs-4 erstellt werden.

8. Wenn eine „Zeile“ mehr als 12 „Spalten“ enthält, werden die Elemente der zusätzlichen „Spalten“ als Ganzes in einer anderen Zeile angeordnet.

9. Die Rasterklasse eignet sich für Geräte mit einer Bildschirmbreite, die größer oder gleich der Teilungspunktgröße ist, und die Rasterklasse wird für Geräte mit kleinem Bildschirm überschrieben. Daher funktioniert die Anwendung aller .col-md-*-Rasterklassen auf ein Element für Geräte mit Bildschirmbreiten, die größer oder gleich der Haltepunktgröße sind, und überschreibt die Rasterklasse für Geräte mit kleinem Bildschirm. Daher ist die Anwendung von .col-lg-* auf das Element nicht möglich und wirkt sich auch auf Geräte mit großem Bildschirm aus.

//创建一个响应式行
<div class="container">
<div class="row">
...
</div>
</div> 
//创建最多 12 列的响应式行
<div class="container">
<div class="row">
<div class="col-md-1 a">1</div>
<div class="col-md-1 a">2</div>
<div class="col-md-1 a">3</div>
<div class="col-md-1 a">4</div>
<div class="col-md-1 a">5</div>
<div class="col-md-1 a">6</div>
<div class="col-md-1 a">7</div>
<div class="col-md-1 a">8</div>
<div class="col-md-1 a">9</div>
<div class="col-md-1 a">10</div>
<div class="col-md-1 a">11</div>
<div class="col-md-1 a">12</div>
</div>
</div> 
//为了显示明显的 CSS
.a {
height: 100px;
background-color: #eee;
border: 1px solid #ccc;
} 
//总列数都是 12，每列分配多列
<div class="container">
<div class="row">
<div class="col-md-4 a">1-4</div>
<div class="col-md-4 a">5-8</div>
<div class="col-md-4 a">9-12</div>
</div>
<div class="row">
<div class="col-md-8 a">1-8</div>
<div class="col-md-4 a">9-12</div>
</div>
</div>

Nach dem Login kopieren

Rasterparametertabelle

Wie im Bild oben gezeigt, unterscheidet die äußerste Ebene des Rastersystems vier Browserbreiten: ultrakleiner Bildschirm (<768px), kleiner Bildschirm (>=768px), mittlerer Bildschirm (>=992px) und Großer Bildschirm (>=1200px). Die adaptiven Breiten des inneren .container-Containers sind: automatisch, 750px, 970px und 1170px. Automatisch bedeutet, dass, wenn Sie sich auf dem Bildschirm eines Mobiltelefons befinden, dieser eine Zeile im Display einnimmt.

//四种屏幕分类全部激活
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
</div>
</div> 
//有时我们可以设置列偏移，让中间保持空隙
<div class="container">
<div class="row">
<div class="col-md-8 a">8</div>
<div class="col-md-3 col-md-offset-1 a">3</div>
</div>
</div> 
//也可以嵌套，嵌满也是 12 列
<div class="container">
<div class="row">
<div class="col-md-9 a">
<div class="col-md-8 a">1-8</div>
<div class="col-md-4 a">9-12</div>
</div>
<div class="col-md-3 a">
11-12
</div>
</div>
</div> 
//可以把两个列交换位置，push 向左移动，pull 向右移动
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3 a">9</div>
<div class="col-md-3 col-md-pull-9 a">3</div>
</div>
</div>

Nach dem Login kopieren

Bei den oben genannten Informationen handelt es sich um verwandte Informationen zum BootStrap-Grid-System. Ich hoffe, dass sie für alle hilfreich sind!