Was sind die Vor- und Nachteile von Bootstrap?

Was sind die Vor- und Nachteile von Bootstrap?
Bootstrap ist ein Front-End-Framework für die schnelle Entwicklung von Webanwendungen und Websites, basierend auf HTML, CSS und Javascript.
Vorteile sind: Mobilgeräte zuerst, unterstützt Mainstream-Browser, einfach zu bedienen, responsives Design
Nachteile: IE6 wird nicht unterstützt, starke Verwendung von Klassen, die nicht semantisch genug sind, und mit Bootstrap entwickelte Websites sind stark homogenisiert.

[Verwandte Videoempfehlungen: Bootstrap-Tutorial]

Bootstrap bietet ein reaktionsfähiges, mobiles, flüssiges Rastersystem entsprechend der Bildschirm- oder Ansichtsfenstergröße steigt, teilt das System diese automatisch in bis zu 12 Spalten auf.

Mobile-First-Strategie

• Inhalt

• Bestimmen Sie, was am wichtigsten ist.

• Layout

• Priorisieren Sie kleinere Breiten.

• Basic CSS ist „Mobile First“ und Medienabfragen sind für Tablets und Desktop-Computer.

• Progressive Verbesserung

• Fügen Sie Elemente hinzu, wenn die Bildschirmgröße zunimmt.

Responsives Rastersystem Wenn der Bildschirm oder das Ansichtsfenster größer wird, unterteilt das System ihn automatisch in bis zu 12 Spalten.

So funktioniert das Bootstrap Grid System

Das Grid System erstellt Seitenlayouts durch eine Reihe von Zeilen und Spalten, die Inhalte enthalten. So funktioniert das Bootstrap-Rastersystem: Die Zeile

• muss innerhalb der Klasse .container platziert werden, um die richtige Ausrichtung und Inhaltsränder (Auffüllung) zu erhalten.

• Verwenden Sie Zeilen, um horizontale Spaltengruppen zu erstellen.

• Inhalte sollten in Spalten platziert werden und nur Spalten können direkte untergeordnete Elemente von Zeilen sein.

• Vordefinierte Rasterklassen wie .row und .col-xs-4 können zum schnellen Erstellen von Rasterlayouts verwendet werden. WENIGER Mixin-Klassen können für semantischere Layouts verwendet werden.

• Spalten verwenden Auffüllungen, um Lücken zwischen den Spalteninhalten zu schaffen. Die Auffüllung wird erhalten, indem der negative Rand von .rows verwendet wird, der den Zeilenversatz der ersten und letzten Spalte darstellt.

• Das Rastersystem wird durch Angabe der zwölf verfügbaren Spalten erstellt, die Sie überspannen möchten. Um beispielsweise drei gleiche Spalten zu erstellen, verwenden Sie drei .col-xs-4.

• Medienabfragen

  Medienabfragen sind sehr ausgefallene „bedingte CSS-Regeln“. Es funktioniert nur mit einigen CSS basierend auf bestimmten festgelegten Bedingungen. Wenn diese Bedingungen erfüllt sind, wird der entsprechende Stil angewendet.

  Mit Medienabfragen in Bootstrap können Sie Inhalte basierend auf der Größe des Ansichtsfensters verschieben, anzeigen und ausblenden. Die folgende Medienabfrage wird in der LESS-Datei verwendet, um wichtige Haltepunktschwellenwerte im Bootstrap-Grid-System zu erstellen.

  /* 超小设备（手机，小于 768px） */
  /* Bootstrap 中默认情况下没有媒体查询 */
  
  /* 小型设备（平板电脑，768px 起） */@media (min-width: @screen-sm-min) { ... }
  
  /* 中型设备（台式电脑，992px 起） */@media (min-width: @screen-md-min) { ... }
  
  /* 大型设备（大台式电脑，1200px 起） */@media (min-width: @screen-lg-min) { ... }

  Nach dem Login kopieren

• Manchmal nehmen wir auch max-width in den Medienabfragecode auf, um die Auswirkungen von CSS auf einen kleineren Bereich von Bildschirmgrößen zu beschränken.

  @media (max-width: @screen-xs-max) { ... }
  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
  @media (min-width: @screen-lg-min) { ... }

  Nach dem Login kopieren

• Eine Medienabfrage besteht aus zwei Teilen, zunächst einer Gerätespezifikation und dann einer Größenregel. Im obigen Fall werden die folgenden Regeln festgelegt:

  Schauen wir uns die folgende Codezeile an:

  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

  Nach dem Login kopieren

• Grundlegende Rasterstruktur

  Das Folgende ist die Grundstruktur des Bootstrap-Rasters:

  <div class="container">
     <div class="row">
        <div class="col-*-*"></div>
        <div class="col-*-*"></div>      
     </div>
     <div class="row">...</div></div><div class="container">....

  Nach dem Login kopieren

Bitte geben Sie mir einen Rat, wenn Sie es nicht zum ersten Mal finden

Das obige ist der detaillierte Inhalt vonWas sind die Vor- und Nachteile von Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!