Bootstrap 3 ist mobile First, in diesem Sinne startet der Codestrap-Code mit kleinen Bildschirmgeräten (wie Mobilgeräten, Tablets) und erweitert dann auf Komponenten und Gitter auf großen Bildschirmgeräten (wie Laptops, Desktops).
1. Prioritätsstrategie für mobile Geräte
1. Inhalt: Entscheidung, was das Wichtigste ist.
2. Layout
Bevorzugter Design kleinerer Breiten.
Basic CSS wird für mobile Geräte bevorzugt, und die Medienabfragen richten sich an Tablets und Desktop -Computer.
3. Nach und nach verbessert
Fügen Sie Elemente hinzu, wenn die Bildschirmgröße zunimmt.
Mit zunehmender Bildschirm- oder Ansichtsfenstergröße wird das System automatisch in bis zu 12 Spalten unterteilt. Wie in der Abbildung unten gezeigt:
2. Arbeitsprinzip des Bootstrap -Gittersystems (Grid System)
Das Netzsystem erstellt Seitenlayouts über eine Reihe von Zeilen und Spalten, die Inhalte enthalten. Hier ist eine Liste der Funktionsweise des Bootstrap -Netzsystems:
1. Die Zeilen müssen in der .Container -Klasse platziert werden, um eine angemessene Ausrichtung und Polsterung zu erhalten.
2. Erstellen Sie Zeilen, um horizontale Gruppen von Spalten zu erstellen.
3. Der Inhalt sollte in der Spalte platziert werden, und nur die Spalte kann ein direktes untergeordnetes Element der Zeile sein.
4. Vordefinierte Gitterklassen wie .Row und .Col-XS-4 können verwendet werden, um schnell Gitterlayouts zu erstellen. Für mehr semantische Layouts können weniger Hybridklassen verwendet werden.
5. Spalten erstellen Lücken zwischen den Spalteninhalten durch Polsterung. Dieser innere Rand ist durch den Rand der ROWS negativ und zeigt den Zeilenversatz der 6., ersten Spalte und der letzten Spalte an.
7. Das Netzsystem wird erstellt, indem die zwölf verfügbaren Spalten angeben, die Sie überspannen möchten. Verwenden Sie beispielsweise drei gleiche Spalten, um drei. Col-XS-4 zu verwenden.
1. Medienanfrage
Medienabfragen sind sehr schicke "bedingte CSS -Regeln". Es gilt nur für einige CSS, die auf bestimmten vorgeschriebenen Bedingungen basieren. Wenn diese Bedingungen erfüllt sind, wird der entsprechende Stil angewendet.
Mit Medienabfragen in Bootstrap können Sie Inhalte basierend auf der Ansichtsfenstergröße verschieben, anzeigen und ausblenden. Die folgende Medienabfrage wird in der weniger Datei verwendet, um kritische Breakpoint -Schwellenwerte im Bootstrap Grid -System zu erstellen.
/* Ultra-small device (mobile phone, less than 768px) *//* No media query by default in Bootstrap*/ /* Small device (tablet, starting from 768px) */@media (min-width: @screen-sm-min) { ... } /* Medium device (desktop, starting from 992px) */@media (min-width: @screen-md-min) { ... } /* Large Gerät (großer Desktop ab 1200px) */ @media (min-width: @screen-lg-min) {...}Wir haben manchmal maximale Breiten in unserem Medienabfragecode aufgenommen und die Auswirkungen von CSS auf einen kleineren Bereich von Bildschirmgrößen einschränken.
@media (max-Width: @screen-xs-max) {...} @media (min-width: @screen-sm-min) und (max-width: @screen-sm-max) {...} @media (min-width: @screen-md-min) und (max-width: @screen-md-md-{@media @media @media (@media) @ @{...} {...} {... @Min) (|Es gibt zwei Teile für Medienabfragen, zuerst eine Gerätespezifikation und dann eine Größenregel. Im obigen Fall werden die folgenden Regeln festgelegt:
Schauen wir uns die folgende Codezeile an:
@media (min-Width: @screen-sm-min) und (max-Width: @screen-sm-max) {...}
Für alle Geräte mit Min-Width: @Screen-SM-Min wird eine gewisse Verarbeitung erfolgt, wenn die Bildschirmbreite kleiner als @screen-sm-max ist.
4. Grid -Optionen
In der folgenden Tabelle wird zusammengefasst, wie das Bootstrap -Netzsystem auf mehreren Geräten funktioniert:
5. Grundnetzstruktur
Hier ist die Grundstruktur des Bootstrap -Gitters:
<div> <div> <div> </div> <div> </div> </div> <div> ... </div> </div> <div> ....
Hier ist ein bestimmtes Code -Beispiel:
<div> <h1> Hallo, Welt! style="background: #4cff00">5</div> <div style="background: #0ff">6</div> <div style="background: #0094ff">7</div> <div style="background: #0094ff">7</div> <div style="background: #b200ff">8</div> <div style="background: #ff00dc">9</div> <div style = "Hintergrund: #ff006e"> 10 </div> <div style = "Hintergrund: #AC5050"> 11 </div> <div style = "Hintergrund: #54bd4f"> 12 </div> </div> <div> <!-kleines Geräte-Tablet (≥768px)-> <div. styledy = "Hintergrund: #B2B0B0B0B0B0B0B0B0B0B0B0B0B0." #ffd800 "> 1 </div> <div style =" Hintergrund: #AC5050 "> 1 </div> </div> <div> <!-mittelgroße Desktop-Computer (≥992px)-> <div-style =" Hintergrund: #AC5050 "> 1 </div> <div-style =" Hintergrund: #54bd4f "> 1 </Divd. (≥1200px) -> <div style = "Hintergrund: #AC5050"> 1 </div> <div style = "Hintergrund: #54bd4f"> 1 </div> </div> </div> </div>
6. Spalte Offset
Offset ist eine nützliche Funktion für professionelle Layouts. Sie können verwendet werden, um mehr Platz für die Spalte zu schaffen. Zum Beispiel unterstützen die .col-XS =* -Klasse keine Offsets, aber sie können dies einfach mit einer leeren Zelle erreichen.
Verwenden Sie die COL-MD-Offset-* -Klasse, um Offsets auf großen Bildschirmmonitoren zu verwenden. Diese Klassen erhöhen den linken Rand einer Spalte nach * Spalte, wobei der Bereich von 1 bis 11 liegt.
Im folgenden Beispiel haben wir <div> .. </div>, und wir werden .Col-MD-Offset-3-Klasse verwenden, um diese Div zu zentrieren.
<div> <div> <div style="background-color: #dedef8;"> <p> Test offset column---3 columns are offset to the right here</p> </div> </div> <div> <div style="background: #f00">1</div> <div style="background: #b2b0b0">2</div> <div style="background: #ff6a00">3</div> <div style="background: #ffd800">4</div> <div style="background: #4cff00">5</div> <div style="background: #0ff">6</div> <div style="background: #0094ff">7</div> <div style="background: #b200ff">8</div> <div style="background: #ff00dc">9</div> <div style = "Hintergrund: #ff006e"> 10 </div> <div style = "Hintergrund: #AC5050"> 11 </div> <div style = "Hintergrund: #54bd4f"> 12 </div> </div> </div> </div>
Anzeigeffekt:
7. verschachtelte Säulen
Um das Standardgitter im Inhalt zu nisten, fügen Sie ein neues .row hinzu und fügen Sie einen Satz von .col-MD-* -Spalten in eine vorhandene Spalte .col-md-* hinzu. Die verschachtelten Zeilen sollten eine Reihe von Spalten enthalten, und die Anzahl der Spalten in diesem Satz von Spalten darf 12 nicht überschreiten (tatsächlich gibt es keine Anforderung, dass Sie 12 Spalten belegen müssen).
Im folgenden Beispiel hat das Layout zwei Spalten, und die zweite Spalte ist in zwei Zeilen und vier Kästchen unterteilt.
<Div> <div> <div style = "Hintergrund: #B2B0B0"> Erste Spalte < /div> <div style = "Hintergrund: #Dedef8"> Die zweite Spalte-Es gibt vier Divs, die darin verschachtelt sind. </div> <div> <div style = "Hintergrund: #ff00dc"> Ich bin inhalt
Anzeigeffekt:
8. Säulensortierung
Eine weitere perfekte Funktion des Bootstrap -Mesh -Systems besteht darin, dass Sie auf einfache Weise Spalten in einer Reihenfolge schreiben und sie dann in einer anderen anzeigen können.
Sie können die Reihenfolge der integrierten Gittersäulen problemlos mit .col-md-push-* und .col-md-pull-* -Klasen ändern, wobei* von 1 bis 11 reicht.
Im folgenden Beispiel haben wir zwei Säulenlayouts, die linke Säule ist schmal als Seitenleiste. Wir werden die .col-md-push-* und .col-md-pull-* -Klasse verwenden, um die Reihenfolge der beiden Spalten zu vertauschen.
<div> <div> <div style = "Hintergrund: #ff00dc"> links </div> <div style = "Hintergrund: #ff006e"> rechts </div> </div> </div>
Anzeigeffekt:
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.