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ł często wykorzystywany, aby 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 5.2 (lato 2022), to narzędzie do budowania stron zgodnych nie tylko z responsive web design ale także mobile-first. Dla wersji piątej stworzyłem kurs dla początkujących: Kurs Bootstrap 5
Zasada działania
Framework stanowi styl CSS, który można pobrać z tej lokalizacji:
https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
oraz opcjonalny skrypt JS:
https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js
Skrypt JS jest opcjonalny i odpowiada za niektóre interakcje w tym animacje np. rozwijalne harmonijki, zakładki i pop-upy.
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.
Więcej informacji o zestawie instrukcji 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/5.2/components/accordion/
Skrypty i rozszerzenia społeczności
Tak jak w przypadku jQuery, popularność Bootstrapa spowodowała, że istnieją do niego liczne skrypty i narzędzia rozszerzające jego funkcjonalność. Jednym z nich może być chociaż opisywana przeze mnie galeria (a właściwie Lighbox), który wykorzystując standardowy element modal efektywnie rozszerza stronę o tę funkcjonalność.
Istnieją całe serwisy poświęcone przekładom, gotowym kawałkom, które możemy za darmo wykorzystać w swoich projektach:
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 5 & 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. Istnienie wielu obszernych portali pozwala wykorzystać napisane przez kogoś gotowe kawałki kodu, które można wykorzystać we własnych projektach.
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, zajmuje 268KB (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.
Znane serwisy a także 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.
Bootstrap Studio czyli kreator szablonów dla profesjonalistów
Po opanowaniu podstaw i realizacji kolejnych projektów można próbować automatyzować i przyspieszać pracę za pomocą Bootstrap Studio.
Dzięki temu narzędziu stworzymy czyste szablony metodą „przeciągnij i upuść”. Kontrolki kreatora wspomagają poznawanie i praktyczne wykorzystywanie nawet najbardziej szczegółowych opcji. Stworzone szablony można automatycznie publikować lub eksportować do profesjonalnego kodu HTML/CSS/JS. Kod HTML tworzonych elementów można podglądać i edytować co czyni to narzędzie bardzo elastycznym i możliwym do wykorzystania na wiele sposobów.
Źródła
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.
Odpowiedz lub skomentuj