Bootstrap Grid: Beherrschen der nützlichsten Flexbox -Eigenschaften

In diesem Artikel wird das Grid -System von Bootstrap, das auf Flexbox basiert, zum Erstellen reaktionsschneller Layouts untersucht. Wir werden Schlüsselklassen und Flexbox -Konzepte abdecken, um effiziente und anpassbare Designs zu erstellen.

Schlüsselkonzepte:

• Bootstrap 4 nutzt Flexbox für sein Netz und vereinfacht die Layout -Erstellung für verschiedene Bildschirmgrößen.
• Kernklassen: .container, .row und .col-*-* bilden die Grundlage von reaktionsschnellen Gittern.
• Flexbox, in integriert in Bootstrap integriert, erzeugt leicht gleiche oder gleiche Breitenspalten, wodurch die Notwendigkeit von CSS-Hacks beseitigt wird.
• Bootstraps Flex -Dienstprogrammklassen (z. B. .d-flex, .flex-row, .flex-column) bieten eine granulare Kontrolle über Flex -Behälter und Elementverhalten.

FlexBox verstehen:

Flexbox (Flexible Box) ist ein modernes CSS -Layout -System, das ideal für dynamische Bildschirmgrößen ist. Ein Flex -Behälter passt die Größen seiner Kinder an verschiedene Ansichtsfenster an. Bootstrap vereinfacht die Verwendung von Flexbox mit Wrapper -Klassen.

Das Bootstrap -Gittersystem:

Gittersysteme sind für komplexe Layouts von entscheidender Bedeutung. Das Grid von Bootstrap bietet einen xl -Brektpunkt für extra-große Bildschirme und verwendet Flexbox anstelle von Floats.

Schlüsselgitterklassen:

• .container: äußere Wrapper; Verwenden Sie .container für feste Breite, .container-fluid für die volle Breite.
• .row: Logischer Container für Spalten.
• .col-*-*: Definiert die Spaltenbreite (z. B. .col-md-6 für eine mittelschwere 6-Spal-Breite). Verwenden Sie den kleinsten Breakpoint, der benötigt wird; .col-sm-6 gilt für sm, md, lg und xl Breakpoints.

Bootstrap -Gitter mit Flexbox vs. Floats:

Flexbox vereinfacht Aufgaben wie das Erstellen von Spalten mit gleichem hohen Spalten und erfordert bisher CSS-Hacks (wie Floats und ClearFix). Das Flexbox-basierte Gitter von Bootstrap 4 führt zu realistischeren, tabellähnlichen Spalten mit gleichen Höhen innerhalb einer Zeile. Die Spalten der gleichen Breite werden erreicht, indem einfach .col-* Klassen ohne Angabe von Breiten verwendet werden. Der verfügbare Speicherplatz ist automatisch geteilt.

Beispiel: Spalten der gleichen Breite

<code class="language-html"><div class="row">
  <div class="col-sm" style="min-height:200px;">.col</div>
  <div class="col-sm">.col</div>
  <div class="col-sm">.col</div>
  <div class="col-sm">.col</div>
</div></code>

Dies schafft vier 25% breite Spalten aus dem kleinen Breakpoint nach oben.

Flexbox und automatische Margen:

Die Kombination von Flexbox mit automatischen Margen ermöglicht eine erweiterte Positionierung. .mr-auto (Margin-Right: Auto) drückt ein Element nach rechts, während .ml-auto (Margin-Links: Auto) es nach links drückt. Eine ähnliche vertikale Ausrichtung wird mit .mb-auto und .mt-auto mit flex-direction: column und geeigneten align-items Klassen erreicht.

Essentielle Flexbox -Konzepte für Bootstrap Flex -Dienstprogramme:

• Flexbehälter: Erstellt mit display: flex (oder .d-flex in Bootstrap).
• Flex -Elemente: Direkte Kinder eines Flex -Behälters.
• flex-direction: steuert die Element -Richtung (row, row-reverse, column, column-reverse). Bootstrap verwendet Klassen wie .flex-row und .flex-column.
• order: Steuerelement -Elementreihenfolge (Bootstrap verwendet order-* Klassen).
• justify-content: Ausrichtungselemente auf der Hauptachse (Bootstrap verwendet justify-content-* Klassen).
• align-items: Ausrichtungselemente auf der Kreuzachse (Bootstrap verwendet align-items-* Klassen).

Schlussfolgerung:

Das Flexbox-basierte Grid von Bootstrap von

bietet einen leistungsstarken und flexiblen Ansatz für reaktionsschnelles Layout-Design. Mastering Flexbox -Konzepte verbessert Ihre Fähigkeit, die Versorgungsklassen von Bootstrap effektiv zu nutzen. Eine weitere Untersuchung der Dokumentation und Praxis von Bootstrap wird Ihr Verständnis festigen.

Das obige ist der detaillierte Inhalt vonBootstrap Grid: Beherrschen der nützlichsten Flexbox -Eigenschaften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!