Home > Blog > Porady i nowości w internecie > Bootstrap 3 – jeszcze używany?

Bootstrap 3 – jeszcze używany?

, Czas czytania: 15:00 min. , Komentarz(y):4

Czy wersja 3 dalej jest dalej w użyciu? Może wersja 4 poprzez szereg zmian i ulepszeń pozwoliła zapomnieć o swoim poprzedniku? W tym wpisie dowiesz się co zmieniła a zaracem co wnosi wersja 4 Bootstrap.

Spis treści:

Krótko o Bootstrap

Bootstrap był przez lata pierwszym 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 elementy – wyró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. Odpowiedź na tytułowe pytanie oczywiście brzmi, tak! Bootstrap 3 dalej jest wykorzystywany i jest on potężnym narzędziem w pracy programisty.

TAGI:

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

4 Komentarz

    1. Zofieńka

      Tak kiedyś było dobrze, był ten Bootstrap 3 i po co to było zmieniać. Po co temu te całe Bootstrap 4 powymyślali. No a poważnie to jednak zmiany są nieuniknione i trzeba się z nimi pogodzić a najlepiej wykorzystać je na własną korzyść.

Dodaj komentarz

Bartek Candyweb

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