DoCałkiem niedawno pojawił się Bootstrap 4 w wersji beta, który zastąpił starszą wersję 3. Zobaczmy co się zmieniło, co warto zapamiętać oraz czy/jak dokonać uaktualnienia strony wykonanej w Bootstrapie 3.
Według bloga Bootstrapa jego twórcy zdecydowali się, m. in. na następujące zmiany:
- Css bootstrapa 4 jest kompilowany przy pomocy Sass, a nie jak poprzednio Less
- siatka, na której opiera się układ strony, została całkowicie zmieniona przy wykorzystaniu flexbox i tym samym cały system siatki (grid system) został zmieniony i ulepszony
- z Bootstrapa 4 usunięto takie komponenty jak: wells, thumbnails i panels i zastąpiono je kartami. System kart zadomowił się całkowicie w projektach stron www, jest funkcjonalny i wygodny. Funkcje, które do tej pory wykonywały wells, thumbnails i panels, umieszczono w jednym elemencie karty, co znacznie upraszcza pracę z bootstrapem.
- wersja 4 nie używa pixeli jako jednostek miary i zostały one zastąpione przez rems i ems. W praktyce oznacza to brak wsparcia dla starszych przegladarek jak np. IE8 i IE9.
- formularze: aby stworzyć horyzontalny formularz nie używa się już klasy .form-horizontal. Zmieniły się również klasy dla chceckbox i radio buttons oraz klasy zwiększania i zmniejszania wielkości pól input
- style dla buttons zostały zmienione i rozbudowane: pojawiły się klasy
.btn-secondary
,.btn-light
, i.btn-dark
. Dodano klasę .btn-outline-* aby dodać kolor obramowania butonu. Zrezygnowano również z klasy .btn-xs - obrazki: zamiast .img-responsive używa się klasy .img-fluid. Zrezygnowano też z klas pomocniczych, które ustawiały oblewanie obrazka od prawej, lewej lub ustawienie w środku. Zamiast nich można używać innych klas pomocniczych.
- navbar:
- bootstrap 4 pozwala na kontrolowanie koloru menu przez dodanie klas:
.navbar-light
,.navbar-dark
oraz.bg-*
- zrezygnowano z możliwości wyrównania elementów menu do prawej lub lewej, dzięki klasom
.navbar-right
,.navbar-left
, które pozwalały niejako podzielić menu na 2 części. - zmieniły się klasy potrzebne do zaczepienia menu do górnej lub dolnej krawędzi strony. Obecnie są to klasy:
.fixed-top
i.fixed-bottom
- bootstrap 4 pozwala na kontrolowanie koloru menu przez dodanie klas:
- jumbotron – aby ustawić go na pełną szerokość strony wymagana jest klasa .jumbotron-fluid
- zrezygnowano z gliphicons. Zamiast nich można użyć innych ikon. Niestety coraz więcej tego typu opcji jest płatnych, zaś wersje darmowe są mocno okrojone. Przykładem może być https://glyphicons.com/. Można też użyć Octicons, Fontawesome.
- zrezygnowano również z affix
Jeśli chodzi o rozpoczęcie pracy z Bootstrapem 4, wszystko wygląda podobnie jak w poprzedniej wersji. Najprościej jest skorzystać z motywu startowego, zamieszczonego w dokumentacji Bootstrapa lub skorzystać z darmowych templatek, np. https://startbootstrap.com/, które już od jakiegoś czasu zostały ubgradowane do wersji 4.
Bootstrapa można pobrać, najprościej w skompilowanej wersji gotowej do użycia, która zawiera pliki css i js. Innym sposobem podłączenia frameworka jest po prostu wstawienie linków. Js bootstrapa korzysta z biblioteki jquery, która musi być umieszczona przed plikiem bootstrap.min.js. Bootstrap 4 korzysta również z biblioteki tether.j
Niektóre zmiany były oczekiwane, a inne na prawda ciekawe 🙂
Widzę serię artykułów o boostratpie – a ja się dopiero uczę. Poczytam… 🙂
Ja również, przydałby się jakiś poradnik do Bootstrapa 😛
Fajny artykuł. Jednak brakuje informacji o wielu ciekawych rozwiązaniach zastosowanych w Bootrapie v4.