Bootstrap 4 - co się zmieniło

Bootstrap 4 - co się zmieniło

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

 

 

 

template monster


Profesjonalny Hosting


4 Comments
  1. Fajny artykuł. Jednak brakuje informacji o wielu ciekawych rozwiązaniach zastosowanych w Bootrapie v4.

Leave a reply

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

This site uses Akismet to reduce spam. Learn how your comment data is processed.