Bootstrap 4 w końcu wydany!

Po niezliczenie wielu publikacjach wersji alpha i beta oraz przesuwaniu daty oficjalnej premiery w końcu jest, bootstrap 4 miał wczoraj oficjalną premierę. Jednak dla osób, które korzystały z którejś z ostatnich wersji testowych mam przykrą wiadomość, na premierę twórcy nie przygotowali żadnych większych, znaczących zmian.

 

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

 

Budowa

  • Bootstrap 3 bazował na LESSie, Bootstrap 4 będzie korzystał z SASS ze składnią SCSS
  • Przepisano dużą ilość kodu by unikać selektorów potomków na rzecz samodzielnych klas („.klasa { cecha: wartość }” zamiast „przodek1 przodek2 … potomek { cecha: wartość }”)
  • Tworzenie nieresponsywnych stron za pomocą Bootstrapa nie będzie już wspierane
  • Podstawową jednostką rozmiaru będzie rem zamiast pikseli px
  • Media queries używają teraz em zamiast px
  • Dodano kolejny rozmiar w kolumnach col-xl-* dla rozmiarów ekranów > ~1200px
  • Dodano kolejną klasę kolumn dla ekranów poniżej 480px (col-xs-*)
  • Zrezygnowano z Glyphicons
  • Zrezygnowano z modułu Affix na rzecz position:sticky
  • klasa „karta” (.card) zastąpi panele (.panel), miniaturki zdjęć (.thumbnail) i studnie (.well)

Typografia

  • Wszystkie klasy text-* znajdują się teraz w pliku _utilities.scss
  • Usunięto klasę .page-header
  • Stylowanie znacznika <blockquote> zostało przeniesione do klasy .blockquote oraz blockquote-reversed

Tabele

  • Usunięto praktycznie wszystkie selektory potomków. Teraz tabela automatycznie dziedziczy style od rodzica
  • Responsywne tabele nie muszą już znajdować się w divie z klasą .responsive. Teraz klasę wystarczy dodać do <table>
  • Klasa .table-condensed zmienia nazwę na .table-sm aby trzymać się konsekwencji w nazewnictwie

Formularze

  • Stylowanie pól formularzy przeniesiono do pliku _reboot.scss
  • Klasa .horizontal-form nie jest już potrzebna
  • Klasa .form-group nie zachowuje się już jak .row, więc trzeba używać klasy .row przy budowaniu poziomych formularzy
  • Dodano klasę .form-control-label do pionowego centrowania etykiet formularzy

 

Nowości w Bootstrap 4

 

  • Porzucono wsparcie Internet Explorer 8, dzięki czemu można śmiało używać jQuery 2.0. jQuery 2.0 zawiera więcej funkcjonalności ale przede wszystkim waży mniej i jest szybszy.
  • Plik normalize.css został połączony z autorskimi plikami „resetowania css” bootstrapa w jeden plik nazwany reboot.css
  • Flexbox – Jest to nowy sposób układania elementów na stronie. Planuję zrobić poradnik dotyczący flexboxów, lecz narazie odsyłam do w3schools
  • Karty (.card) – Jak już wspomniałem Bootstrap porzuca takie elementy jak well, panel oraz thumbnail. Karty łączą wszystkie te elementy oraz dodają kilka nowych funkcjonalności jak na przykład grupowanie kilku elementów, „overlay” czyli przykrywanie zdjęcia tekstem czy wyświetlanie kart w stylu „masonry”.
  • Element Collapsible – Jest to element, który umożliwia na przykład stworzenie ukrytego menu uruchamianego za pomocą przycisku. Można go umieścić na górze strony lub w dowolnym jej miejscu.

 

Nie są to jednak wszystkie nowości i zmiany, tych jest naprawdę sporo i wyróżniłem tylko te najważniejsze. Po więcej informacji i nowości odsyłam na oficjalną stronę bootstrapa.

Komentarze do wpisu

bardzo fajny wpis

Dodaj komentarz

*Wypełnij wszystkie pola poprawnie

BYĆ MOŻE TO CIĘ ZAINTERESUJE

Dodane przez Alex Pietrzak | 6 kwietnia 2018
Przygotowanie do egzaminu praktycznego E14/K2 #1 – HTML I CSS
Zgodnie z nową podstawą programową egzaminy E12 i E13 zostają połączone w jedną kwalifikacje - K1, natomiast E14 zostaje przemianowane na kwalifikację K2, o wdzięcznej nazwie "Programowanie, tworzenie i administrowanie...
Dodane przez Alex Pietrzak | 27 stycznia 2018
Kiedy powinienem używać jednostek rem, em, % i pikseli?
Niedawno przeglądając internet znalazłem całkiem interesujące pytanie odnośnie jednostek miar, mianowicie kiedy powinno się używać poszczególnych z nich? Szybki flashback uświadomił mi, że sam miałem ten problem kiedy zaczynałem swoją...
Dodane przez Alex Pietrzak | 30 listopada 2017
Jak odpowiednio dobierać kolory? Teoria kolorów dla początkujących web deweloperów.
Wybór kolorystyki to jedna z pierwszych decyzji podczas projektowania strony. Ważnym jest, aby dobrać ją odpowiednio do charakteru strony (widzieliście kiedyś wnętrze szpitala w odcieniach czerni?) i obranego przez nas...