Aufgrund der Projektbedürfnisse habe ich vor, das Bootstrap -Framework gut zu lernen. Ich habe zuvor ein wenig gelernt. Der Rahmen ist insgesamt nicht schwierig, aber es gibt immer noch viele Dinge. Wenn Sie es kompetent beherrschen möchten, müssen Sie noch mehr üben.
1. Was ist Bootstrap?
Was ist BS? Das heißt, das standardisierte Rahmenwerkzeug, das von der Front-End-Seite erstellt wurde, wurde im CSS.js-Stil geschrieben und muss nur verwendet werden.
Wie benutzt ich BS? Der Effekt wird hauptsächlich durch die Verwendung verschiedener Klassen erhöht, und jede Klasse hat unterschiedliche entsprechende Funktionen.
BS -Vorteile: Erhöht die Entwicklungseffizienz, macht das Seitendesign schöner und unterstützt reaktionsschnelle Entwicklung. Download -Adresse: https://github.com/foreverjianging/bootstrap
Lerndokumentation: http://v3.bootcss.com/getting-started/
2. Design im CSS -Stil
1. Basierend auf der HTML -Dokumentation
Bootstrap bezieht sich auf einige HTML -Elemente, sodass der Header als unten gezeigte Beispielspalte geschrieben werden muss.
<!DOCTYPE html> ---Contains HTML5 document declaration, all browsers turn on standard mode<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- The above 3 Meta -Tags * müssen * zuerst platziert werden, und jeder andere Inhalt * muss ihnen folgen! Stellen Sie sicher, dass Responsive Layouts unterstützt werden-> <title> Bootstrap </title> [/code] [Code] <!-Neue Bootstrap Core CSS-Datei-> <link rel = "Stylesheet" href = "// cdn.bootcs.com/bootstrap/3.3.5/css/Bootstrap.Min. -> <link rel = "stylesheet" href = "// cdn.bootcs.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"><!- JQuery-Datei. Stellen Sie sicher src = "// cdn.bootcs.com/bootstrap/3.3.5/js/bootstrap.min.js"></script></head><Body><H1> Hello, World! </h1> </body> </html>
2. Layout des Netzsystems
Layoutinhalt durch Einstellen von Zeilen und Spalten. Bootstrap legt die Seite auf 12 Spalten fest. Layout durch Ändern der Anzahl der Spalten, z. B. das Einstellen von drei Spalten der gleichen Breite:
<! DocType html> <html Lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-äquiv = "x-ua-compatible" content = "ie = edge"> <meta name = "adveport" content = "width = toy-widdh, initial-mough, initial-scale = 1" 1 "1"> <; Und jeder andere Inhalt * muss ihnen folgen! -> <titels> </title> <link href = "css/bootstrap.css" rel = "stylesheet"> <link href = "css/bootstrap.min.css" rel = "Stylesheet"> <script "> <script src = "http://cdn.bootcs.com/jquery/1.11.2/jquery.min.js"> </script> <script src = "http://cdn.bootcs.com/bootstrap/3.4/js/bootStrap.min.min.jin.jin.jin.js.js.js.js.js"> </script> </script> </script> </body> <bods Layout-> <div> <!-oder Container-Fluid-> <div>-col-XS-4: Bezieht sich auf ein kleines Gerät von weniger als 768px <div> 11 </div>-col-sm-4: Bezieht sich auf ein Gerät> = 768px <div> 22 </div>-col-md-4: räumen auf ein Gerät. less than 1200px</div> <div>11</div> <div>22</div> <div>33</div> </div> <div>33</div> </div> <div> <div>11</div> <div>22</div> <div>33</div> </div> <div>33</div> </div> <div> <div>11</div> <div>22</div> <div> 33 </div> </div> <div> <div> 11 </div> <div> 22 </div> <div> 33 </div> </div> </div> </body> </html>
Es gibt vier Möglichkeiten, das CSS -Netzwerkformat zu schreiben, das hauptsächlich bei der Auflösung verschiedener Geräte verwendet wird.
2: Übersetzen Sie die Spalte
Verwenden Sie den Offset, um zu schwenken. Das heißt, die Anzahl der übersetzten Spalten
<div><!-- or container-fluid--> <div> <div>11</div> <div>22</div> <div>33</div>---refers to the right of 33 </div> <div>11</div> <div>22</div> <div>33</div>---refers to the right of 33 </div> <div>11</div> <div>22</div> <div> 33 </div> </div> <div> 11 </div> <div> 22 </div> <div> 33 </div> </div> </div> <!-Übersetzende Spalte->
Die Effekte sind wie folgt:
33 Da die beiden Säulen übersetzt wurden, konnte sie seine Anforderung, 4 Säulen zu besetzen, nicht erfüllen, daher wurde es in die nächste Reihe gedrückt und begann 4 Säulen zu besetzen. Einfach ausgedrückt ist es gleichwertig, den gesamten Div -Block nach rechts zu bewegen.
3: verschachtelte Säulen
Das heißt, Nestsäulen in der Gittersäule. Vergleichen wir.
<div><!-- or container-fluid--> <div> <div> <div>11</div> <div>22</div> <div>33</div> </div> </div> <div> <div>11</div> </div> <div>11</div> </div> <div>11</div> <div>22</div> <div>33</div> </div> </div> </div> </div> </div> <div> 11 </div> <div> 22 </div> <div> 33 </div> </div> </div> </div>
Die Effekte sind wie folgt:
Haben Sie Probleme gefunden? Warum gibt es keine gleiche Verteilung von 8 oben?
Grund: Schauen wir uns die Debug -Konsole an
.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-6,. Padding-Links: 15px; Padding-Right: 15px; Position: Relativ;}
Es wurde festgestellt, dass Polsterlinks und Polsterrechte beide 15px sind. Dies liegt daran, dass die Polsterung zwischen Säulen Einfluss verdient. Warum hat der zweite Div keinen Einfluss? Lassen Sie uns das Prinzip des Zaunrasters untersuchen.
1. "Row" muss in .container (feste Breite) oder .container-fluid (100% Breite) enthalten sein, um ihm die entsprechende Ausrichtung und Polsterung zu verleihen.
2. Erstellen Sie eine Rinne zwischen den Spalten, indem Sie die padding für "Spalte" einstellen. Durch padding .container .row margin
Indirekt enthielt die "Spalte" in "Row" padding .
HINWEIS : Zu diesem Zeitpunkt hat die Zeile die Polsterung der Spalte ausgeglichen, sodass es keinen Polsterwert gibt.
4: Spaltensortierung
Hauptsächlich mit col-xs-push-* col-xs-pull-* (* repräsentiert eine Anzahl von 0-11) Wie kann man diese beiden Klassen verstehen? Drücken bedeutet drücken, ziehen bedeutet ziehen.
<div> <div> 21 </div> <div> 24 </div> </div> <div> <div> 21 </div> <div> 24 </div> </div>
Die Renderings sind wie folgt:
<div> 21 </div> --- als div1 <div> 24 </div>-als Div2 aufgezeichnet aufgezeichnet
Es ist zu verstehen, dass es ist, die Positionen beider zu tauschen. Sie müssen Div1 in die rechten 8 Spalten drücken und 4 Spalten nach links ziehen.
3. Streaming Grid Layout
1. Die Spaltenbreite verwendet Prozentsätze, keine Pixel
2. Ändern Sie die Zeilenklasse in Reihenfluid
3. Andere grundlegende Funktionen entsprechen den oben festen Layout und unterstützen die Reaktionsfähigkeit.
4. Beim Teilen einer bestimmten Spalte in einem Halbierende sollte das Streaming -Layout Prozentsätze verwendet werden, sollte sie gemäß 6 berechnet werden.
// Beachten Sie die folgende Situation. Bei bilateraler Teilen von 8 Säulen wird es nicht auf zwei 4S, sondern zwei 6s eingestellt, da es 12 Spalten der Rasterverteilung in Bootstrap gibt. <div> <div> <div> 2 </div> <div> 2 </div> </div> </div> </div> </div>
Schauen wir uns die Anwendung von Streaming -Layouts an und vergleichen Sie sie mit festen Layouts.
<!-- Streaming layout--><div> <div>333</div> <div>444</div></div><div> ---Declare the container-fluid class, indicating that the content is a streaming layout, function: as a containing block, to contain the streaming content<div> <div>333</div> <div>444</div> </div></div><div> ---Declare the Container- und Container-Fluid-Klassen, und dies ist die Breite des Bildschirms <Div> 333 </div> <div> 444 </div> </div>
Wenn der Bildschirm weniger als 768px ist, ist der Effekt wie folgt:
Wenn der Bildschirm größer als 992px ist, ist der Effekt wie folgt: Zu diesem Zeitpunkt ist eine Zeile exklusiv
Die Zeilenfluidklasse (sehr wichtig) bestimmt, ob es sich um ein Flusslayout handelt. Dann ist der Inhaltsblockcode auf die gleiche Weise wie das Gittersystem geschrieben und beginnt immer noch von Col-MD-1 bis col-MD-12, was jeweils unterschiedlichen Prozentsätzen entspricht.
4. Responsive Design
Einfach ausgedrückt, unterstützt es die Auflösungen (960px, 1366px, 978px usw.) verschiedener Geräte (Mobiltelefone, PCs) zur adaptiven Reaktion.
<div> <div> 21 </div> <div> 24 </div> </div>
Wenn das Gerät weniger als 768px ist, ist der Effekt wie folgt:
Wenn Gerät> = 992px. Die Effekte sind wie folgt:
Die Auflösungen der oben genannten zwei Kategorien sind unterschiedlich. Col-MD-12 bedeutet, dass jede Spalte eine Zeile hat, dh 12 Spalten.
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.