Bootstrap 4 – jakie ulepszenia wprowadza?

Od opublikowania pierwszej wersji Bootstrap’a mija ponad pięć lat. Trudno uwierzyć, ale z początku najpopularniejszy, responsywny framework, nawet nie był responsywny. Wiele jednak przez ten czas się zmieniło i nadszedł moment na nadejście czwartej odsłony, która zbliża się wielkimi krokami. Co kryje nowego? Sprawdźmy pliki źródłowe i najnowsze informacje z bloga.

Opisywana w tym artykule wersja frameworka to alpha v6. Warto mieć na uwadzę, że finalna wersja może znacząco się różnić.

Szybki start z Bootstrap 4.0

Do implementacji Bootstrap 4 w naszym projekcie można zastosować CDN umieszczając go w tagu <link> i <script>:

<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<!-- JS -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

Można również pobrać całe repozytorium zamieszczone w serwisie GitHub i samemu przekonać się o zmianach.

# Klonowanie repozytorium
git clone https://github.com/twbs/bootstrap

# Nawigacja do katalogu
cd bootstrap

# Pobieranie gałęzi
git fetch

# Zmiana na wersję developerską
git checkout v4-dev

Kompatybilność

Bootstrap 4.0 porzuca kompatybilność z przeglądarką Internet Explorer 8, która nie radzi sobie z CSS3, przez co hamuje dostęp do nowych technologi. Postanowiono zatem nie wpierać przestarzałej przeglądarki.

Internet Explorer 9 pomimo podobnych problemów posiada jednak częściowe wsparcie.

Całkowicie porzucono również wsparcie dla preprocessora LESS, zastępując go przez SASS (możliwe, że w przyszłości przez Post CSS twitter.com/mdo/status/).

Zmiany w CSS

Wartości

Pozbycie się jednostki px na rzecz rem zwiększa kompatybilność widoku dla każdego wyświetlacza. Wielkości stają się dynamiczne i zmieniają się względem wielkości czcionki w tagu html.

Dla przypomnienia — jednostki rem:

html {
    font-size: 16px; // 1rem = 16px
}
h1 {
    font-size: 2.5rem; // 16 * 2.5 = 50px
}

Struktura flex

Domyślnie w Bootrap 4, flexbox jest używany podczas tworzenia stylów siatki. Pozwala lepiej zarządzać treściami kosztem kompatybilności z przeglądarką Internet Explorer 9 (możliwość wyłączenia).

Dla przypomnienia — przydatność flexbox:

• Automatycznie ustala szerokość kolumn
• Ustala jednakową wysokość dla kolumn
• Pionowe i poziome centrowanie bez użycia dodatkowych reguł (translate, margin)
• Automatyczne marginesy dla łatwiejszego pozycjonowania
• Pozbycie się białych znaków
• Wiele więcej..

Ulepszone reguły media

W nowej odsłonie, Bootstrap opiera się na pięciu regułach media (dodano 'xl’) znacząco usprawniając rozmieszczanie elementów.

$grid-breakpoints: (
      xs: 0,
      sm: 576px,
      md: 768px,
      lg: 992px,
      xl: 1200px
) !default;
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints);

Resetowanie stylu

Poprzednio Bootstrap korzystał jedynie z Normalize.css do resetowania stylów w przeglądarkach. Czwarta odsłona dodaje kilka usprawnień, tworząc tym samym reboot.css.

Porzucenie Glyphicons

Większość osób nie używała w swoich projektach ikon dołączonych do framework’a więc postanowiono nie wpierać tej funkcjonalności.

Zmiany JavaScript

Wsparcie dla ES6

Wszystkie wtyczki napisane są w języki ES6 dla lepszej czytelności i możliwości rozwoju, a następnie kompilowane przez Babel (babeljs.io) do ES5.

UMS i AMD

Rozwiązano problemy związane z UMD (Universal Module Definition) i AMD (Asynchronous Module Definition)

Więcej: AMD Issues, UMD Issues.

Dane atrybutów

Dodano możliwość wyłączenia danych atrybutów znajdujących się w HTML poprzez funkcję off().

$(document).off('.data-api')

API

Wszystkie wtyczki dołączone do Bootstrap działają płynnie z API JavaScript. Metody pozwalają na dodanie opcji w postaci obiektu, łańcucha znaku i pozwalają na łączenie metod.

Konflikty

Używanie Bootstrap’a z innymi frameworkami UI może przysporzyć pewne problemy. W takich okolicznościach można użyć funkcji noConflict().

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

Zdarzenia

Większość zdarzeń pozwala na użycie funkcji preventDefault().

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

jQuery 2.0

Porzucenie wsparcia dla Internet Explorer 8 daje możliwość używania jQuery 2.0 – biblioteka jest mniejsza, szybsza i posiada więcej udogodnień (blog.jquery.com).

Ustawienia

Dodano możliwość zmiany domyślnych ustawień poprzez odwołanie się do obiektu Constructor.DEFAULTS.

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

Rozmiar

Bootstrap 4 zajmuje około 30% mniej miejsca niż poprzednia wersja (~123kb vs. ~88kb). Jest to spora redukcja, nie tracąc przy tym wielu udogodnień.

 

Podsumowanie

Większość wprowadzonych zmian w Bootstrap 4 ma pozytywny odbiór w społeczności front-end. Poprawiona siatka poprawiająca znacząco płynność elementów jest dla mnie największym plusem. Pamiętajmy jednak, że jest to opis wersji alpha więc jeszcze dużo może się zmienić do czasu opublikowania stabilnej wersji.

Przypisy

Blog Bootstrap – http://blog.getbootstrap.com/

Oficjalna strona Bootstrap 4 – https://v4-alpha.getbootstrap.com/

Repozytorium Boostrap – https://github.com/twbs/bootstrap