Unterschiede zwischen Bootstrap 3 und 4
Beschreibung
Bootstrap ist ein leistungsstarkes und beliebtes mobiles First-Front-End-Framework zum Erstellen reaktionsfähiger mobiler First-Sites im Web mithilfe von HTML-, CSS- und JS-Framework.
Die folgende Tabelle zeigt Unterschiede in Bootstrap 3 und Bootstrap 4 -
S.No. | Komponente | Bootstrap 3 | Bootstrap 4 |
---|---|---|---|
1 | CSS-Quelldateien | WENIGER | SCSS |
2 | Rastersystem | 4-stufiges Rastersystem (xs, sm, md, lg) | 5-stufiges Rastersystem (xs, sm, md, lg, xl) |
3 | CSS-Einheit | px | rem |
4 | Schriftgröße | 14px | 16px |
5 | Dropdown-Struktur | Erstellt mit <ul> und <li> | Erstellt mit <ul> oder <div> |
6 | Spalten versetzen | col-md-offset-4 | offset-md-4 |
7 | Bilder | .img-responsive Klasse | .img-Fluid - Klasse |
8 | Tabellen | Fügen Sie dem übergeordneten <div> -Element .table-responsive Klasse hinzu | Fügen Sie dem Element <table> die Klasse .table-responsive hinzu |
9 | Glyphicons | Unterstützt | Nicht unterstützt |
10 | Medienobjekte | Verwendet Klassen für Medienobjekte wie .media , .media-body , .media-object , .media-Heading , .media-right , .media-left , .media-list und .media-body | Verwendet nur die .media- Klasse für Medienobjekte. |
11 | Dunkle / inverse Tabellen | Nicht unterstützt | Verwendet die Klasse .table-dark , um dunkle / inverse Tabellen zu erstellen |
12 | Kontrollkästchen und Optionsfelder | Zeigt die Kontrollkästchen und Optionsfelder unter Verwendung .radio , .radio-inline , .checkbox oder .checkbox-Inline - Klassen | Zeigt die Kontrollkästchen und Optionsfelder mithilfe der Klassen .form-check , .form-check-label , .form-check-input oder .form-check-inline an |
13 | Formularsteuerungsgröße | Zunahme oder Abnahme Größe einer Eingangssteuerung durch Verwendung .input-LG und .input sm- Klassen | Erhöhen oder verringern Größe einer Eingangssteuerung durch Verwendung .form-control-LG und .form-control-SM - Klassen |
14 | Hilfstext | Zeigen Sie den Hilfetext mithilfe der .help-Block- Klasse an | Zeigen Sie den Hilfetext mithilfe der .form-text- Klasse an |
15 | Stile | Verwendet die Klassen .btn-default und .btn-info für Schaltflächen | Verwendet die Klassen .btn-sekundär , .btn-hell und .btn-dunkel für Schaltflächen und hat die Klasse .btn-default gelöscht . |
16 | Gliederungsschaltflächen | Nicht unterstützt | Gestalten Sie die Schaltflächen mit der Umrissfarbe, indem Sie die Klasse .btn-offset- * verwenden |
17 | Schaltflächengrößen | Die .btn-xs- Klasse ist verfügbar | Nur die Klassen .btn-sm und .btn-lg verfügbar und die Klasse .btn-xs gelöscht |
18 | Menüüberschriften | Verwenden Sie die Klasse .dropdown-header für das li- Tag | Verwenden Sie die .dropdown-Header- Klasse für h1 - h2- Tags |
19 | Teiler | Verwenden Sie die Klasse .divider im Element li | Verwenden Sie die .dropdown-divider- Klasse im div-Element |
20 | Navbars behoben | Befestigen Sie die Navigationsleiste oben oder unten, indem Sie die Klassen .navbar-fixed-top und .navbar-fixed-bottom verwenden | Befestigen Sie die Navigationsleiste oben oder unten, indem Sie die Klassen .fixed-top und .fixed-bottom verwenden |
21 | Pager | Richten Sie die Seiten mithilfe der Klassen .previous und .next aus | Nicht unterstützt |
22 | Jumbotron Volle Breite | Bei Jumbotrons voller Breite wird keine Jumbotron-Fluid- Klasse verwendet | Es verwendet die Jumbotron-Fluid- Klasse für Jumbotrons voller Breite |
23 | Karussellartikel | Verwendet die .item- Klasse für Karussellartikel. | Verwendet die Karussell-Artikelklasse für Karussellartikel. |
24 | Wells, Panels und Thumbnails | Unterstützt | Nicht unterstützt. Verwenden Sie stattdessen Karten |
25 | Inline-Navs | Es enthält keine .nav-Inline- Klasse | Zeigen Sie die Navigationsgeräte mithilfe der .nav-inline- Klasse als Inline an |