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

autor: Robert

1 września 2015

Kilka dni temu miała premierę czwarta wersja Twitter Bootstrap. Twórcy pokazali dopiero wersję alpha, więc przed nami jest jeszcze minimum kilka tygodni czekania na pełną wersję. Pojawiła się natomiast już częściowa dokumentacja. Docelowo tak jak stworzyłem dla Was opis Bootstrapa w wersji 2 oraz 3 tak też oczywiście przygotuję opis wersji czwartej. Ale póki nie ma wersji „stabilnej” skupię się na opisywaniu różnic pomiędzy Bootstrap 3 a Bootstrap 4 aby przygotować Was do migracji.

Wsparcie dla przeglądarek

• Porzucono wsparcie dla IE8 oraz iOS 6. Bootstrap 4 wspiera IE9+ oraz iOS 7+. Jeśli w specyfikacji waszych projektów macie wymagane porzucone przeglądarki, skorzystajcie z Bootstrap 3
• Dodano oficjalne wsparcie dla przeglądarki oraz WebView w Android 5.0. Dla wcześniejszych wersji Androida pozostaje nieoficjalne wsparcie

 

 Zmiany ogólne

• Jak wiecie Bootstrap 3 bazował na LESSie, Głównym preprocesorem dla Bootstrap 4 będzie SASS ze składnią SCSS
• Główną jednostką „miary” będzie rem zamiast pikseli px
  Tutaj polecam wam 2 opracowania, które pomogą w zrozumieniu em oraz rem
  https://css-tricks.com/confused-rem-em/
  https://css-tricks.com/rems-ems/
• Media queries używają teraz em zamiast px
• Podstawowy rozmiar fonta został zwiększony z 14px do 16px (1rem)
• Dodano kolejny rozmiar w kolumnach col-xl-*, który dotyczy ekranów > ~1200px (teraz col-xs-* dotyczy ekranu < ~480px a nie <768px jak poprzednio)
• Opcjonalny wygląd Bootstrapa (ten z gradientami znany z BS2) jest teraz dostępny jako zmienna w konfiguracji scss ($enable-gradients: true) a nie jako oddzielny plik css

 

Zmiany w komponentach

• Zrezygnowano z paneli (.panel), miniaturek zdjęć (.thumbnail) i studni (.well) na rzecz „kart”(.card), które są połączeniem tych elementów
• Zrezygnowano z Glyphicons
• Zrezygnowano z modułu Affix na rzecz position:sticky (czytaj więcej)
• Przepisano dużą ilość kodu by unikać selektorów potomków na rzecz samodzielnych klas

 

Pozostałe

• Tworzenie nieresponsywnych stron za pomocą Bootstrapa nie będzie już wspierane
• Porzucono konfigurator on-line na rzecz dokładniejszych opisów konfiguracji za pomocą plików .scss w dokumentacji oraz kilku gotowych paczek

 

Zmiany poszczególnych komponentów

Typografia

• Przeniesiono wszystkie klasy text-* do pliku _utilities.scss
• Usunięto klasę .page-header
• Klasa .dl-horizontal będzie wymagała podania szerokości elementu za pomocą jednej z klas np. col-md-* by lepiej panować nad jej szerokością
• Stylowanie znacznika <blockquote> zostało przeniesione do klasy .blockquote oraz blockquote-reversed

Tabele

• Usunięto praktycznie wszystkie selektory potomków. Dzięki temu zagnieżdżona tabela automatycznie dziedziczy style od rodzica co znacznie ułatwia jej stylowanie.
• Responsywne tabele nie muszą być już zamykane w divie z klasą .responsive. Teraz ową klasę wystarczy dodać do <table>
• Klasa .table-condensed zmienia nazwę na .table-sm aby trzymać się konwencji nazw
• Dodano nową klasę .table-inverse

Formularze

• Stylowanie pól formularzy przeniesiono do pliku _reboot.scss
• Zmieniono nazwy klas .input-lg i .input-sm na klasy .form-control-lg i .form-control-sm
• Zrezygnowano z klas .form-group-* na rzecz klas .form-control-*
• Zmiany w poziomym formularzu (.horizontal-form)
  • 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

Rusztowanie szablonu

• Dodano kolejną klasę kolumn dla ekranów poniżej 480px (col-xs-*)

Menu strony (navbar)

• Przepisano dużą ilość kodu by unikać selektorów potomków na rzecz samodzielnych klas
• Dzięki temu zamiast używać styli np. .nav > li > a to mamy oddzielne klasy .nav, .nav-item czy .nav-link co znacząco ułatwia nam ich stylowanie

Paginacja

• Zmieniono nazwy klas .previous i .next na .pager-prev i .pager-next

Panele, miniaturki zdjęć i studnie

• Całkowicie zrezygnowano z w/w elementów na rzecz nowego o nazwie „karta” .card

Karuzela

• Zmieniono nazwę klasy .item na .card-item

 

Ciąg dalszy nastąpi…

---

Post się przydał? Oceń go proszę.

(14 głosów, średnia: 4,93 na 5)

Loading...

---

← Starszy post
Kurs tworzenia motywu dla WordPress już ruszył
Nowszy post →
Nowości w Bootstrap 4

Robert 15 września 2015 o 08:07

Hej,

Będzie tutorial o 4 części Bootstrapa:) Tylko muszę napisać skórkę bloga od nowa pod BS4;) Póki co BS jest w wersji Alpha, więc mam jeszcze troszkę czasu:)

Odpowiedz

Marcin 15 września 2015 o 12:07

Super Robert, naprawdę świetnie to słyszeć (czytać) na pewno będę z niego korzystał garściami :) A teraz wracam to Twojego tutoriala Worpress pod bootstrap :)

Odpowiedz

Marcin 1 października 2015 o 00:57

Robercie, jeśli możesz to powiedz proszę w jaki sposób mam ustawić domyślną jednostkę „1rem” dla dokumentu HTML, którym chcę określać wysokość div’ów poprzez tą właśnie jednostkę (nie chodzi mi o wielkości czcionkę, a wysokości div’ów, aby ich wysokość była uzależniona np od wysokości okna przeglądarki). Czytałem o wielkości czcionki w stosunku do bazowego określenia „font-size” dla elementu głównego HTML (np: html {font-size: 15px;} wtedy element p {font-size: 2rem} będzie miał 30px… jeśli dobrze zrozumiałem :) ) Chodzi mi o ustalenie wysokości div’a poprzez „rem”, którą byśmy ustalili dla elementu głównego opartego o wysokość okna przeglądarki… ?? Jak do tego podejść? :) Będę wdzięczny za podpowiedź.

Odpowiedz

Marcin 1 października 2015 o 01:06

czy wgl jest taka możliwość wykorzystania tej wartości „rem”? Czy może musi być ona sztywno określona w „pixelach” w elemencie głównym? Bo może źle zrozumiałem idee „rem”? :)

Odpowiedz

Robert 1 października 2015 o 08:38

rem jest to wielkość fonta przypisana dla roota dokumentu HTMLowego czyli dla znacznika <html>. Dlatego jeśli ustawimy html {font-size: 16px;} to ustawienie stylu np. dla paragrafu p {font-size: 1rem;} spowoduje, że ten będzie miał wielkość 16px. Jest też fajny trik dzięki któremu np. 1.7rem = 17px, 2.4rem = 24px, więc nie trzeba się martwić przeliczaniem. Można o nim przeczytać tutaj -> http://blog.end3r.com/125/css3-manipulacja-wielkoscia-czcionki-przy-uzyciu-rem/ Oczywiście remów można używać także do marginesów, wypełnień, ramek itp, wtedy wystarczy napisać przykładowo margin-left: 0.5rem.

Co do ustalania wysokości/szerokości diva na podstawie rozmiarów ekranu. Są dwie fajne jednostki vh oraz vw. Przykładowo 1vh to 1/100 wysokości ekranu czyli 100vh wyświetli diva, który będzie miał wysokość całego ekranu niezależnie od tego czy wyświetlimy go na smartfonie czy monitorze.Analogicznie dla 100vw

Marcin 2 października 2015 o 14:12

Dzięki Robert za wyjaśnienie sprawy – już wszystko jasne :) Pozdrawiam!

Odpowiedz

Robert 11 stycznia 2016 o 08:06

Dziękuję za dobre słowa:) Kurs będzie oczywiście rozwijany, pracuję nad tutorialem dla Bootstrap 4:)

Odpowiedz