Heim > Web-Frontend > Front-End-Fragen und Antworten > Was ist der Unterschied zwischen Bootstrap v4 und v3?

Was ist der Unterschied zwischen Bootstrap v4 und v3?

青灯夜游
Freigeben: 2021-11-05 14:42:14
Original
3395 Leute haben es durchsucht

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.

Was ist der Unterschied zwischen Bootstrap v4 und v3?

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 (<768px)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"
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage