Bootstrap 3 vs Bootstrap 4 – przegląd

Bootstrap jest najbardziej zaufanym front-endowym frameworkiem open source do tworzenia responsywnych, mobilnych stron internetowych. Bootstrap to słynny framework, dlaczego??? Ponieważ wystarczy podstawowa znajomość HTML i CSS, a dzięki predefiniowanym klasom bootstrapów, które dbają o responsywność na różnych urządzeniach, możemy zbudować atrakcyjną i funkcjonalną stronę internetową.

Bootstrap 3 został wydany w 2013 roku, a ostatnia stabilna wersja Bootstrap 3.3.7 została wydana w lipcu 2016 roku. W październiku 2014 roku Twitter ogłosił, że Bootstrap 4 jest w fazie rozwoju. Pierwsza wersja alfa programu Bootstrap 4 została wydana w sierpniu 2015 r. A teraz w sierpniu 2017 r. wydano wersję Bootstrap 4.0.0-beta. Możesz zapoznać się z tym szczegółowym samouczkiem Bootstrap, jeśli chcesz rozpocząć naukę od 0 .

W centrum uwagi tego posta będą kluczowe różnice, dodatki i odjęcia od wersji 3 do nowo wydanej wersji 4.0.0-beta.

Co jest inne w wersji 4 :

Teraz możemy zacząć mówić o nowych funkcjach Bootstrap 4. Wraz z szybkim rozwojem technologii opracowywane są nowsze i inteligentniejsze języki, aby znacznie uprościć tworzenie czystych i szybkich stron internetowych. Tak jest w przypadku najnowszego wydania Bootstrapa. Zespół twierdzi, że ta „wersja 4 jest poważnym przepisaniem prawie całego projektu”. Podsumujemy kilka kluczowych zmian tego ulepszonego.

Zmiany globalne:

• Przełączono z Less na Sass dla źródłowych plików CSS.
• Zmieniono z px rem jako podstawową jednostkę CSS Bootstrap, chociaż piksele są nadal używane do zapytań o media i zachowania siatki, ponieważ rozmiar typu nie ma wpływu na widoczne urządzenia.
• Zwiększono globalny rozmiar czcionki z 14px do 16px .
• Dodano nowy poziom siatki dla ~480px i poniżej.

System siatki:

Głównym krokiem Bootstrap 4 w kierunku poprawy jest jego ruch w kierunku przyjęcia Flexbox. W ramach flexbox włączono obsługę klas wyrównania w pionie i poziomie. Bootstrap 4 kładzie duży nacisk na personalizację. Nowy system poziomów siatki pozwala Bootstrapowi 4 cieszyć się obecnością do 5 warstw siatki (przykład 5 warstw: .col-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xl-4). Można śmiało powiedzieć, że Bootstrap 4 zapewnia dostęp do ulepszonego systemu grid.

• Dodano nowy poziom siatki sm poniżej 768px dla bardziej szczegółowej kontroli. Jest teraz xs, sm, md, lg i xl. Oznacza to również, że każdy poziom został podniesiony o jeden poziom (tak więc .col-md-6 w wersji 3 to teraz .col-lg-6 w wersji 4).
• Zmieniono punkty przerwania zapytań o media systemu siatki i szerokości kontenerów, aby uwzględnić nową warstwę siatki i zapewnić, że kolumny są równomiernie podzielne przez 12 przy maksymalnej szerokości.
• Punkty przerwania siatki i szerokości kontenerów są teraz obsługiwane przez mapy Sass ($grid-breakpoints i $container-max-widths) zamiast kilku oddzielnych zmiennych. Zastępują one całkowicie zmienne @screen-* i pozwalają w pełni dostosować poziomy siatki.
• Zapytania mediów również uległy zmianie. Zamiast powtarzać deklaracje zapytania o media z tą samą wartością za każdym razem, jest teraz @include media-breakpoint-up/down/only. Teraz, zamiast pisać @media (min-width: @screen-sm-min) { … }, możesz napisać @include media-breakpoint-up(sm) { … }.

Obsługa przeglądarki:

• Zrezygnowano z obsługi IE8 i iOS 6. v4 to teraz tylko IE9+ i iOS 7+. W przypadku witryn wymagających jednego z nich użyj wersji v3.

Klasy użytkowe:

W Bootstrap 4 dodano nowe klasy użytkowe, nie utrudniając w żaden sposób istniejącej funkcjonalności. Do takich ważnych dodatków należą responsywne klasy wyrównania tekstu, responsywne elementy pływające i responsywne osadzanie. Oprócz oferowania wielu skrótów, pozwalają one odpowiednio na zmianę wyrównania tekstu, pływanie elementów i skalowanie proporcji dowolnych osadzonych mediów. (przykład: .hidden-md-up ukrywa element w średnich, dużych i bardzo dużych rzutniach. Teraz zamiast .hidden-md-up użyj .d-md-none ).

Obrazy:

• Zmieniono nazwę .img-responsive na .img-fluid .
• Zmieniono nazwę .img-rounded na .rounded
• Zmieniono nazwę .img-circle na .rounded-circle

Tabele:

• Responsywne tabele nie wymagają już elementu zawijania. W prostych słowach, w Bootstrap 3, .table-responsive powinna zostać dodana do rodzica <div>. Ale w Bootstrap 4 , .table-responsive zostanie dodana do elementu <table> .
• Dodano nową opcję .table-inverse .
• Dodano modyfikatory nagłówków tabeli: .thead-default i. .thead-inverse
• Zmieniono nazwy klas kontekstowych na .table- . Stąd .active .success , .warning , .danger i .table-info na .table-active , .table-success , .table-warning , .table-danger i .table-info.

Nawigacja:

W Bootstrap 4 komponent Nawigacja został znacznie uproszczony. Wymagane jest utworzenie nowej listy elementów wykorzystującej najnowszą klasę bazową nawigacji. Istnieje również kilka nowych dodatków, takich jak klasa nav-link, klasa nav-item i style paska nawigacyjnego.

• Przepisano komponent za pomocą flexboxa.
• .navbar-default to teraz .navbar-light , chociaż .navbar-dark pozostaje takie samo. Jednak te klasy nie ustawiają już background-color ; zamiast tego zasadniczo wpływają tylko na color .
• .navbar-toggle to teraz .navbar-toggler i ma różne style oraz wewnętrzne znaczniki (nie ma już trzech <span> s).
• Całkowicie porzucono klasę .navbar-form . Nie jest to już konieczne; zamiast tego po prostu użyj .form-inline i zastosuj narzędzia marginesów, jeśli to konieczne.
• Paski nawigacyjne nie zawierają już domyślnie margin-bottom ani border-radius .

Tabela porównawcza Bootstrap w wersji 3 i wersji 4

Jak już powiedzieliśmy, zespół Bootstrap przepisał framework. Powyższe zmiany są więc tylko kluczowymi zmianami, które tutaj pisaliśmy. Aby przeczytać więcej, kliknij link Bootstrap 4.

Czy powinniśmy migrować do Bootstrap 4, czy pozostać na Bootstrap 3?

Rozmawialiśmy o funkcjach, które oferuje Bootstrap 4. Widzimy, że włożono dużo pracy w optymalizację i czyszczenie niepotrzebnych elementów i klas w całym frameworku. Bootstrap 4 obiecuje być znacznie szybszy i usprawniony, aby zapewnić jeszcze większą elastyczność i łatwość tworzenia niesamowitej witryny przyjaznej dla urządzeń mobilnych.

Bootstrap 4, przeniesiony do flexboxa. Można to uznać za jedno z największych i znaczących osiągnięć. Zapewni to następujące korzyści:

• Siatka oparta na Flexbox
• Nowa warstwa siatki XLl
• Najnowsza siatka automatycznego układu
• Opcje dostosowywania paska nawigacyjnego
• Nowe narzędzia do rozmieszczania
• Konfiguracja Sans Glyphicons (strefa wolna od wzdęć)
• Responsywne dobieranie
• Responsywne pływaki
• Marginesy automatyczne
• Centrowanie w pionie

Wniosek

Bootstrap zawsze ułatwiał życie programistom, a dzięki aktualizacji w wersji, Bootstrap ma teraz o wiele więcej nowych funkcji i opcji, aby jeszcze bardziej ułatwić programistom i dlatego ludzie migrują z Bootstrap 3 do Bootstrap 4, ponieważ jest wygodniejszy i bardziej dostępny niż jego poprzedni odpowiednik.