Bootstrap 3 – czy jeszcze używany?

, Czas czytania: 15:00 min.

bootstrap 3 czy bootstrap 4

Czy wersja 3 dalej jest używana? Czy może wersja 4 poprzez szereg ulepszeń i zmian pozwoliła zapomnieć o swoim poprzedniku? W poniższym wpisie dowiesz się co wniosła i co zmieniła wersja 4.

Spis treści:

Krótko o Bootstrap

Bootstrap był przez długi czas wiodącym wyborem milionów programistów front-endowych. Ta platforma typu open source umożliwia projektantom witryn internetowych i programistom front-endowym łatwe tworzenie wysoce responsywnych i dobrze wyglądających nowoczesnych witryn internetowych. W roku 2013 uruchomiono Bootstrap 3, a następnie w 2017 roku pojawił się Bootstrap 4.

Różnice pomiędzy Bootstrap 3 a Bootstrap 4

1. Instalacja motywów

W wersji 3 istnieje tylko jedna opcja instalacji poprzez:

  • nuget (PM> Install-Package bootstrap -Version 3.3.7).

Natomiast w wersji 4 istnieją cztery opcje instalacji:

  • instalacja w aplikacjach opartych na Node.js – za pomocą pakietu npm
  • instalacja za pomocą Bundlera i rubbyGems
  • instalacja za pomocą Composera
  • instalacja za pomocą NuGet

2. Zmiana rozmiaru czcionki z px na rem

Bootstrap 4 używa rem co sprawia, że projekt jest łatwiejszy do dostosowania podczas tworzenia, dzięki czemu urządzenie z zawartością jest responsywne. Natomiast podstawą jednostką w Bootstrapie 3 są px.

3. Aktualizacja systemu siatki

W wersji 4 został usunięty najmniejszy punkt przerwania xs. Podczas gdy w Bootstrapie 3 dolny punkt działa z xs (.col-xs), ale teraz w Bootstrap 4 został usunięty i używany tylko (.col-) dla niższego punktu przerwania.

Wielkość kratownicy

Bardzo mały

Mały

Średni

Duży

Bardzo duży

< 576px

≥ 576px

≥ 768px

≥ 992px

≥ 1200px

Maksymalna szerokość pojemnika

Brak

(automatycznie)

540px

720px

960px

1140px

Prefiks klasy

.col-

.col-sm-

.col-md-

.col-lg-

.col-lx-

4. Dodano siatkę na bazie Flexbox

Jest to jedna z kluczowych cech Bootstrapa 4, która odróżnia go od Bootstrapa 3. Szybkie zarządzanie wyrównywaniem układu, zmiana rozmiaru kolumn siatki, nawigacja po komponentach oraz łatwe zarządzanie złożonymi układami.

  • Kierunek

  • Justowanie treści wyrównanie elementu w dowolnym kierunku, takim jak początek, koniec, środek, pomiędzy lub wokół za pomocą .justify-content

bootstrap justowanie treści
  • Wyrównaj elementywyrównaj zawartość w pojemnikach flexbox z .align-items.

bootstrap wyrównaj elementy
  • Align-self

bootstrap Aign-self
  • Automatyczne marginesy

bootstrap Automatyczne marginesy
  • Align-items – (z elementami wyrównującymi)

bootstrap Align-items
  • Zwijanie

bootstrap Zwijanie
  • Klasa offsetu

bootstrap Klasa offsetu

5. Motywy Bootstrapa

W wersji 3 nie było takich szablonów. Boostrap 4 ma lepsze i zaimprowizowane opcje łatwego i szybkiego tworzenia witryny.

6. Responsywne tabele

Wersja 4 jest w pełni responsywna w swojej klasie (table-responsive), umożliwiając w poziomie przewijanie tabel na urządzeniach mobilnych. Możesz zdecydować, kiedy tabela ma mieć pasek przewijania, w zależności od szerokości ekranu.

7. Zmiana nazw klasy dla obrazu

  • .img-responsive został zmieniony na .img-fluid
  • .img-rounded został zmieniony na .rounded
  • .img-circle to round round circle – może być używany do innych elementów (box, icon, button)

8. Paginacja

W Bootstrap 3 komponent paginacji został utworzony przez zastosowanie klasy paginacji do dowolnego elementu ul. Teraz Bootstrap 4 wymaga, aby poprawnie wskazać paginację i elementy łącza za pomocą klasy elementu strony oraz klasy łącza do strony.

9. Wtyczki

Podobnie jak w Bootstrap 3, wtyczki zostały podzielone na dwie kategorie, a mianowicie plik zawierający reguły stylu i plik Javascript. Nie ma też żadnych przejmujących zmian w sposobie kompilowania wtyczek w Bootstrap 4. W najnowszej wersji reguły stylu są tworzone za pomocą SASS. Natomiast wtyczki są dostępne w globalnym obiekcie jQuery, ponieważ plik Javascript zawiera sekcję jQuery.

10. Nawigacja

W Bootstrap 4, komponent nawigacji został znacznie uproszczony. Należy utworzyć nową listę elementów wykorzystujących najnowszą klasę bazową nawigacji. Istnieje kilka ostatnich dodatków, takich jak klasa nav-link, klasa nav-item i style paska nawigacji.

11. Restart

Bootstrap 3 użył Normalize.css do renderowania wszystkich elementów HTML ich spójnego wyglądu. Bootstrap 4 przyjął ulepszoną wersję Normalize.css, tj . Reboot .

12. Kontrola formularza

Bootstrap 4 oferuje lepszą kontrolę nad formularzem. Pozwala radzić sobie z niespójną kontrolą danych wejściowych i jej pojawieniem się w różnych przeglądarkach. Udostępnia również niestandardowe formularze w postaci niestandardowych pól wyboru i wejść radiowych.

13. Obsługa przeglądarek

Bootstrap 3 obsługiwał wersje IE8 i iOS 6, a Bootstrap 4 obsługuje teraz tylko IE9 + i iOS 7+, – pomijając poprzednie wersje.

Na koniec o Bootstrap 3 i  Bootstrap 4

W powyższej sekcji został zaprezentowany szereg ulepszeń, które wprowadziła nowsza wersja Bootstrapa. To tylko niektóre z funkcji, które można wykorzystać w odróżnienia od poprzednika. Bootstrap w wersji 3 był przede wszystkim frameworkiem zaprojektowanym z myślą o prezentowaniu tego co najlepsze. Z wielu powodów został uznany za wieczne dziedzictwo dla responsywnych projektów. Bootstrap 4 zawęził perspektywę, oferując jednocześnie najlepsze dostosowanie oraz wiele korzyści.

TAGI:

Zostaw komentarz do artykułu: Bootstrap 3 – czy jeszcze używany?

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Bartek Candyweb

Programuje, śpiewa i gra - istny człowiek orkiestra:)

Ostatnie artykuły

Zainteresowała Cię oferta?

Kompleksowa oferta

Kliknij po bezpłatną wycenę

Wyceń projekt