Zusammenfassung der Bootstrap-Lernerfahrung - Austausch von Designs im CSS-Stil

 

Haben Sie irgendwelche Probleme festgestellt? Warum ist die obige Zahl nicht gleichmäßig verteilt 8?
 Grund: Werfen wir einen Blick auf die Debug-Konsole
 Wir haben festgestellt, dass padding-left und padding-right beide 15px betragen. Dies liegt daran, dass das Padding zwischen den Spalten betroffen ist. Warum gibt es also keine Auswirkungen auf das zweite Div? Lassen Sie uns das Prinzip des Zaungitters erkunden.


1: Eine Zeile muss in einem Container (feste Breite) oder Container-Fluid (100 % Breite) enthalten sein, um die richtige Ausrichtung und Polsterung zu gewährleisten.

2: Erstellen Sie Spaltenabstände zwischen den Spalten, indem Sie die Polsterungseigenschaft für die Spalte festlegen. Durch Festlegen eines negativen Rands für das .row-Element wird die für das .container-Element festgelegte Polsterung verschoben.
 Dadurch wird indirekt die Polsterung für die in der „Zeile“ enthaltene „Spalte“ ausgeglichen.
 Hinweis: An dieser Stelle hat die Zeile die Polsterung der Spalte verschoben, es gibt also keinen Polsterungswert.
4: Spaltensortierung

Hauptsächlich wird col-xs-push-* col-xs-pull-* verwendet (* steht für die Zahlen 0-11). Wie sind diese beiden Klassen zu verstehen? Push bedeutet schieben, und Pull bedeutet ziehen.
XML/HTML-CodeInhalt in die Zwischenablage kopieren
 < div   Klasse = "Zeile" >             
                     < div   Klasse = "col-xs-4" > 21 </ div >   
                     < div   Klasse = "col-xs-8" > 24 </ div >             
      </div>​​   
        < div   Klasse = "Zeile" >   
                
                     < div   Klasse = "col-xs-4 col-xs-push-8" > 21 </ div >   
                     < div   Klasse = "col-xs-4 col-xs-pull-4" > 24 </ div >     
             
      </div>​​   
Das Wirkungsdiagramm sieht wie folgt aus:
 <div class="col-xs-4 col-xs-push-8">21</div>---aufgezeichnet als div1
 <div class="col-xs-8 col-xs-pull-4">24</div>--- wird als div2 gespeichert, was als Vertauschen der Positionen der beiden verstanden werden kann. Div1 muss 8 Spalten nach rechts verschoben werden und div2 muss 4 Spalten nach links gezogen werden.

 Drei: Fließendes Rasterlayout

1: Verwenden Sie Prozentwerte statt Pixel für die Spaltenbreite

2: Ändern Sie die Zeilenklasse in „row-fluid“.

3: Andere grundlegende Funktionen sind dieselben wie beim oben genannten festen Layout und unterstützen Reaktionsfähigkeit.

4: Beim gleichmäßigen Aufteilen einer Spalte sollte die Berechnung gemäß 6 erfolgen, da das Flusslayout Prozentsätze verwendet.
 XML/HTML-CodeInhalt in die Zwischenablage kopieren

//Beachten Sie die folgende Situation: Wenn 8 Spalten gleichmäßig aufgeteilt werden, werden nicht zwei 4er, sondern zwei 6er eingestellt, da das Bootstrap-Raster auf 12 Spalten verteilt ist.
           < div   Klasse = "Zeile" >   
              < div   Klasse = "col-xs-8" >   
                     < div   Klasse = "col-xs-6" > 2 </ div >   
                     < div   Klasse = "col-xs-6" > 2 </ div >   
                   
          </div>​​   
      </div>​​   

Vier: Responsive Design
Einfach ausgedrückt unterstützt es die adaptive Reaktion auf die Auflösungen (960PX, 1366PX, 978PX usw.) verschiedener Geräte (Mobiltelefone, PCs).

XML/HTML-CodeInhalt in die Zwischenablage kopieren


    
< div   Klasse = "Zeile" >      
    
                     
    
                         < div   Klasse = "col-xs-6 col-md-12" > 21 </ div >      
    
                         < div   Klasse = "col-xs-6 col-md-12" > 24 </ div >        
    
                     
    
           </div>​​     



Wenn das Gerät kleiner als 768 Pixel ist, ist der Effekt wie folgt: