Web Design Blog / Web:

Bootstrap – co to jest, czy warto używać?

Data publikacji: 13 maja 2019

Bootstrap to gotowy szkielet (ang framework) do budowania wizualnej części stron internetowych. Jest najpopularniejszą biblioteką tego typu na świecie a jego popularność eksplodowała w czasach 2011 – 2013, kiedy był czesto wykorzystywany by stosunkowo niskim kosztem wdrożyć mechanizm skalowalnych układów stron zgodnych z podejściem responsive web design.

Autorami Bootstrapa są programiści Twittera i jest wydawany na licencji MIT. Oznacza to tyle, że można go wykorzystywać bezpłatnie także w komercyjnych projektach.

Aktualna wersja 4.3, to narzędzie do budowania stron zgodnych nie tylko z responsive web design ale także mobile-first.

Zasada działania

Framework stanowi styl CSS, który można pobrać z tej lokalizacji:

https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css

oraz opcjonalny skrypt JS:

https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js

Który jest uzależniony od dwóch innych bibliotek mianowicie, jQuery:

https://code.jquery.com/jquery-3.3.1.slim.min.js

oraz popper.js:

https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js

Po dodaniu skryptów do strony można korzystać z kompletnego systemu Bootstrapa

Cel stosowania Bootstrapa

Główną motywacją do stosowania tej biblioteki jest nie tylko przyspieszenie pracy i korzystanie z responsywnej siatki CSS, ale także rozwiązanie problemów krzyżowej kompatybilności pomiędzy najpopularniejszymi przeglądarkami.

Przeglądarki różnych producentów posiadają drobne różnice w interpretacji stylów CSS i domyślne wartości niektórych właściwości CSS. Bootstrap niweluje to za pomocą Reboota czyli zestawu instrukcji, które niejako normalizują domyślne ustawienia i wymuszają sytuację, w której kod napisany w ramach frameworka będzie zinterpretowany prawie identycznie. Reboot nadaje stronie domyślny font Segoe UI, oraz zeruje marginesy najpopularniejszych selektorów.

Wiecej informacji i zestawie istrukcji znajdujących się w Reboot można znaleźć w dokumentacji: https://getbootstrap.com/docs/4.3/content/reboot/

Typografia

W Bootstrapie można wykorzystać predefiniowaną skalę typograficzną. Bez jakiegokolwiek stylowania możemy jej użyć w tworzonej od podstaw stronie internetowej.

Oraz styluje zestaw standardowych tagów inline:

Wsparcie dla zdjęć i grafiki

Bootstrap organizuje i ułatwia umieszczanie zdjęć w tym ich wyrównania do krawędzi i dopasowanie (responsywność) do elementu nadrzędnego.

Tabele i zestawy danych

Bootstrap ułatwia jedną z najtrudniejszych rzeczy do wykonania, mianowicie, tabelę HTML, którą będzie można przeglądać także na pionowym i wąskim ekranie urządzenia mobilnego. Responsywna tabela działa tak, że można ją przesuwać w lewo i prawo podczas kiedy strona (zgdnie z podejściem RWD) ma stałą szerokość.

Poza samym mechanizmem elastycznych tabel, Bootstrap oferuje gotowe style, które ułatwiają tworzenie czytelnych i estetycznych interfejsów do danych tabelarycznych, które śmiało można wykorzystać na stronie internetowej lub w panelu administracyjnym:

Dodatkowe komponenty

Poza szkieletem do tworzenia siatek, Bootstrap zawiera wiele przydatnych dodatków, które zwiększają interaktywność i przyspieszają budowanie złożonych systemów takich jak panele klienta i panele administracyjne.

Najciekawsze z nich to:

Zestawy przycisków

Karty

Formularze

Pop-upy czyli okna modalne

Paski postępu

i wiele, wiele innych elementów, które można przeglądać w dokumentacji:
https://getbootstrap.com/docs/4.3/components/alerts/

Zalety stosowania Bootstrapa

Zalety wykorzystywania Bootstrapa to przedewszystkim znaczne przyspieszenie tworzenia użytecznych interfejsów stron i aplikacji internetowych. Bootstrap jest fundamentem wielu systemów projektowych takich jak: Argon, BLK, czy Material Design for Bootstrap 4.

Bootstrap niweluje drobne różnice interpretowania stylów CSS przez przeglądarki różnych dostawców. Ułatwia tym samym tworzenie szeroko-kompatybilnych interfejsów.

Obniża koszty tworzenia dużych aplikacji.

Jego popularność powoduje że ławo uzyskać wsparcie techniczne na licznych forach dla programistów.

Wady stosowania Bootstrapa

Bootstrap jak każdy framework posiada zestaw elementów, których nigdy nie wykorzystamy w stu procentach. Do stron w których wykorzystano Bootstrapa prawie zawsze jest dołączone wiele kodu, który tak naprawdę nie jest wykorzystywany. Optymalizacja i wycinanie nieużywanych instrukcji to dodatkowa praca.

Biorąc pod uwagę, że styl CSS z kodem JS i wymaganym popper.js i jQuery Slim, zajmuje 312KB (i jest możliwa jego dalsza optymalizacja polegająca na wycięciu nieużywanych instrukcji) można tę niedoskonałość w większości przypadków zaakceptować.

Bootstrap jak każda gotowa biblioteka może rozleniwiać osobę która koduje strony stąd nadmierne uzależnienie od niego może powodować, że osoba ta potrafi tylko to co oferuje framework. Z tego typu narzędzi warto korzystać już jako doświadczony front-end developer aby nie zawężać swoich umiejętności do konkretnego frameworka.

Strony i sklepy znanych marek wykorzystujących Bootstrapa

Gotowe szablony Bootstrapa

Na stronie internetowej projektu można znaleźć wiele darmowych przykładów, które pozwalają sprawdzić działanie Bootstrapa w praktyce.

Istnieje market z gotowymi szablonami całych stron internetowych. Koszt templatek to od 39 do 59 dolarów. Stosowanie tych szablonów jako baza do tworzenia stron nie wiąże się z wadami które opisywałem w artykule o wadach i zaletach gotowych szablonów.

Źródła

https://getbootstrap.com/

https://themes.getbootstrap.com/

Podsumowanie

Bootrstrap to biblioteka, którą warto wykorzystywać jeżeli zabieramy się za tworzenie od podstaw Front-Endu dużych i złożonych aplikacji. Korzyść związana z jego wykorzystywaniem będzie do zauważenia zarówno podczas tworzenia Front-Endu oraz jego modyfikacji i rozbudowy w przyszłości.

Bootstrap – co to jest, czy warto używać?
4.7 (93.33%) głosów: 9


Komentarze

Brak komentarzy.

Dodaj swój komentarz