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:

1. Css bootstrapa 4 jest kompilowany przy pomocy Sass, a nie jak poprzednio Less
2. 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
3. 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.
4. 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.
5. 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
6. 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
7. 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.
8. 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
9. jumbotron – aby ustawić go na pełną szerokość strony wymagana jest klasa .jumbotron-fluid
10. 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.
11. 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