Was ist der Unterschied zwischen Bootstrap v4 und v3?

Unterschiede: 1. Bootstrap v4 ist in der Sprache Sass geschrieben, v3 ist in der Sprache Less geschrieben. 2. v4 hat 5 Rasterklassen, v3 hat 4 Rasterklassen. 3. v3 verwendet px als Einheit und v4 verwendet rem und em die Einheit; 4. v3 verwendet das Float-Layout und v4 verwendet das Flexbox-Layout.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Bootstrap3- und Bootstrap4-Version, DELL G3-Computer.

Unterschiede:

LessGeschrieben in Sass-Sprache 4 Arten von Rastertypen5 Arten von RastertypenVerwenden Sie px als EinheitVerwenden Sie rem und em als Einheiten (mit Ausnahme einiger Ränder und Auffüllungen, die px verwenden)Verwenden Sie Push und Ziehen, um sich nach links und rechts zu bewegenDie Offset-Spalte wird durch die Offset-Klasse festgelegt Verwenden Sie die Float-Layout-Methode Wählen Sie das Flexbox-Modell (Flexbox) aus Extra klein (col-xs -) Geeignet für Mobiltelefone (klein (col-sm-) Geeignet für Tablets (≥768px)

	Die 4 Raster von Bootstrap3:

mittel (col-md-) Geeignet für Computer ( ≥992px)

• groß (col-lg-) angepasst an Breitbildcomputer (≥1200px)

• 5 Gitter von Bootstrap4:

• extra klein (col-) (& lt; 576px)

• Klein (col-sm -) (≥576px)

mittel (col-md-) (≥768px)

• groß (col-lg-) (≥992px)

• extra groß (col- xl-) (≥1200px)
Bootstrap 4-Funktionen
• Die neue Rasterschicht ist an die mobile Seite angepasst;

Umfassende Einführung neuer ES6-Funktionen (Neuschreiben aller JavaScript-Plug-Ins);

css-Dateien um mindestens 40 % reduziert;

• Alle Dokumente werden mit Markdown-Editor neu geschrieben;

• Unterstützung für IE8 aufgeben
Hinweis:

• hidden-xs , sichtbar- in Bootstrap3 kann nicht in der Bootstrap 4 xs-Klasse verwendet werden
• Wenn Sie in Bootstrap 4 unter einer bestimmten Größe ausblenden möchten, sollten Sie sich auf die folgende Tabelle beziehen

Es ist erwähnenswert, dass die Verwendung von „hidden-sm“ in B3 nur zum Ausblenden führt Wenn Sie in B4 einfach „d-sm-none“ angeben, wird das Element in der Größe „sm“ ausgeblendet, die Größe über „sm“ wird jedoch ebenfalls ausgeblendet Dies ist mit einem Aufwärtskompatibilitätsproblem verbunden. Wenn Sie also festlegen, dass das sm-Element ausgeblendet wird, müssen Sie auch die MD-Größenanzeige festlegen, und so weiter , und die Anzeige ist abwärtskompatibel.

Bootstrap3 und Bootstrap4 sind vertikal und horizontal zentriert:

Bootstrap3 Horizontale Zentrierung

// 文本：
class ="text-center"
// 图片居中：
class = "center-block"

bootstrap4 horizontale Zentrierung:

flex: Zum Beispiel p.row

align - items-center kann die internen Elemente vertikal zentrieren justify-content-center kann die internen Elemente horizontal zentrieren

align-self -center Elemente werden zentriert

Bilder werden zentriert: .d-block .mx-auto

Lernempfehlung : „

Tutorial zur Bootstrap-Nutzung

“

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen Bootstrap v4 und v3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!