Różnice między Bootstrap 3 i 4
Opis
Bootstrap to potężna i popularna platforma front-end na urządzenia mobilne, służąca do tworzenia responsywnych witryn internetowych w wersji mobilnej przy użyciu ram HTML, CSS i JS.
Poniższa tabela przedstawia różnice w Bootstrap 3 i Bootstrap 4 -
| S.No. | Składnik | Bootstrap 3 | Bootstrap 4 |
|---|---|---|---|
| 1 | Pliki źródłowe CSS | MNIEJ | SCSS |
| 2 | System siatki | 4-warstwowy system siatki (xs, sm, md, lg) | 5-warstwowy system siatki (xs, sm, md, lg, xl) |
| 3 | Jednostka CSS | px | rem |
| 4 | Rozmiar czcionki | 14px | 16px |
| 5 | Struktura rozwijana | Utworzono za pomocą <ul> i <li> | Utworzono za pomocą <ul> lub <div> |
| 6 | Odsuwanie kolumn | col-md-offset-4 | offset-md-4 |
| 7 | Zdjęcia | .img-responsive class | .img-fluid klasa |
| 8 | Tabele | Dodaj klasę .table-responsive do elementu nadrzędnego <div> | Dodaj klasę .table-responsive do elementu <table> |
| 9 | Glify | Utrzymany | Niewspierany |
| 10 | Obiekty multimedialne | Używa klas dla obiektów multimedialnych, takich jak .media , .media-body , .media-object , .media- header , .media-right , .media-left , .media-list i .media-body | Używa tylko klasy .media dla obiektów multimedialnych. |
| 11 | Ciemne / odwrotne tabele | Niewspierany | Używa klasy .table-dark do tworzenia ciemnych / odwrotnych tabel |
| 12 | Pola wyboru i przyciski radiowe | Wyświetla pola wyboru i przyciski radiowe przy użyciu .radio , .radio-inline , .checkbox lub .checkbox-inline klas | Wyświetla pola wyboru i przyciski radiowe przy użyciu .form-czek , .form sprawdzić etykietę , .form-Check-wejście lub .form-check-inline klas |
| 13 | Rozmiar kontrolki formularza | Zwiększ lub zmniejsz rozmiar o kontroli wejściowej za pomocą .input-LG i .input-SM klas | Zwiększenia lub zmniejszenia rozmiaru kontroli wejściowej za pomocą .form-control-LG i .form-control-SM klas |
| 14 | Tekst pomocy | Wyświetl tekst pomocy za pomocą klasy .help-block | Wyświetl tekst pomocy za pomocą klasy .form-text |
| 15 | Style | Używa klas .btn-default i .btn-info na przyciskach | Używa klas .btn-secondary , .btn-light i .btn-dark na przyciskach i usuwa klasę .btn-default . |
| 16 | Przyciski konspektu | Niewspierany | Styl przyciski z kolorem konturu przy użyciu .btn-outline- * klasę |
| 17 | Rozmiary przycisków | .Btn xs- klasa jest dostępna | Dostępne tylko klasy .btn-sm i .btn-lg i usunięto klasę .btn-xs |
| 18 | Nagłówki menu | Użyj klasy .dropdown-header w tagu li | Użyj klasy .dropdown-header w tagach h1 - h2 |
| 19 | Dzielniki | Użyj klasy .divider w elemencie li | Użyj klasy .dropdown-divider w elemencie div |
| 20 | Naprawiono paski nawigacyjne | Fix pasek nawigacyjny na górze lub na dole za pomocą .navbar utrwalonych-top i .navbar-czas dolne klas | Fix pasek nawigacyjny na górze lub na dole za pomocą .fixed-top i .fixed dnem klas |
| 21 | Pagery | Wyrównaj strony za pomocą klas .previous i .next | Niewspierany |
| 22 | Jumbotron o pełnej szerokości | Nie używa klasy .jumbotron-fluid na jumbotronach o pełnej szerokości | Używa klasy .jumbotron-fluid dla jumbotronów o pełnej szerokości |
| 23 | Pozycja karuzeli | Używa klasy .item dla elementów karuzeli. | Używa klasy .carousel-item dla elementów karuzeli. |
| 24 | Studnie, panele i miniatury | Utrzymany | Niewspierany. Zamiast tego używaj kart |
| 25 | Inline Navs | Nie obejmuje klasy .nav-inline | Wyświetl nawigacje jako wbudowane, używając klasy .nav-inline |