Als Front-End-Plug-In, das reaktionsschnelles Layout unterstützt, spielt Bootstrap eine wichtige Rolle. Unabhängig davon, ob Sie das Web auf Ihrem Telefon, Tablet oder PC durchsuchen, können Sie gute Ergebnisse erzielen. All dies wird uns von Bootstrap gebracht!
Heute werde ich hauptsächlich über das Layout der Seite sprechen. Dies ist das grundlegendste. Wenn wir eine Website entwerfen, sollten wir eine globale und einheitliche Standardseite dafür entwerfen. Wir nennen diese Art von Seitenlayoutseiten, und was auf der Seite reflektiert wird, sind die Layoutelemente, die natürlich in Bootstrap unverzichtbar sind.
Das Layout von Bootstrap ist ein Rastersystem, das heißt, es besteht aus Zeilen und Spalten. Bei Verwendung muss ein .container -Container für den Seiteninhalt und das Rastersystem einwickeln.
Die A.Container-Klasse wird für Behälter verwendet, die festgelegt sind und reaktionsschnelle Layouts unterstützen.
<div> ... </div> Die .Container-Fluid-Klasse wird für Behälter mit 100% Breite verwendet, die alle Ansichtsfenster besetzt. <div> ... </div>
In Bootstrap werden Zeilen und Spalten durch Zeile und Col dargestellt, und es befinden sich bis zu 12 Spalteneinheiten in einer Reihe. Col-MD-1 repräsentiert die Breite einer Einheit und Col-MD-7 die Breite von sieben Einheiten. Sie werden zu bis zu 12 Einheiten addiert.
<div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> .col-md-1 </div> <div> .col-md-1 </di v> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> < div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> </div> <div> <div> .col-md-8 </div> <div> .col-md-4 </div > </div> <div> <div> .col-md-4 </div> </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> </div>
Die zweite und dritte Linien zeigen ähnliche Effekte
Drei verschachtelte Spalten, es können auch Spalten in der Spalte sein . Wir müssen MD in dieses Verschachteln in SM ändern
<div> <div> Stufe 1: .Col-SM-9 <Div> <div> Level 2: .Col-XS-8 .COL-SM-6 </div> <div> Level 2: .Col-XS-4 .COL-SM-6 </div> </div> </div>
Der Effekt ähnelt diesem
Das obige ist das Grundkenntnis des Bootstrap -Seitenlayouts, das Ihnen vom Editor vorgestellt wurde. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!