Stylizowanie stron z biblioteką Bootstrap

Dzisiaj chciałbym wam przedstawić bibliotekę stosowaną przez deweloperów FrontendBootstrap. Na czym polega, kiedy i jak ją stosować, czy w ogóle warto, a na koniec praktyczna prezentacja. Mam nadzieję, że ten wpis przyda się osobą, które nie miały nigdy wcześniej do czynienia z Bootstrap’em lub rozważają jego wdrożenie.

Co to jest Bootstrap?

Po kilku słowach wstępu przejdźmy do tematu. Czym jest tak naprawdę biblioteka Bootstrap i w jakich sytuacjach warto ją stosować. Otóż Bootstrap do zbiór klas CSS, które pozwalają nam zbudować na ich podstawie układ naszej strony. Możemy zastosować tutaj kolumny, widok kart, flexbox (czyli kontenery przylegające do lewej lub prawej strony, wsuwające się w dół wraz z zmniejszaniem rozdzielczości ekranu), przylegający nagłówek lub stopkę, nawigację lub okna modalne. Bootstrap pozostawia nam jeszcze mniejsze klasy pozwalające doprecyzować wygląd pojedynczych kontenerów mimo, że mają już domyślne właściwości. Do nich należą marginesy zewnętrzne i wewnętrzne, cień, wielkość tekstu, obramowanie i wiele innych. Tych klas jest całkiem sporo w związku z tym nie będę ich tutaj wszystkich wymieniać.

Przykładowe klasy biblioteki Boostrap w wersji 3
Przykładowe klasy biblioteki Boostrap w wersji 3

Kolejnym ważnym, chodź opcjonalnym elementem biblioteki Boostrap’a są skrypty. Zawiera między innymi popularnego jQuery. Dzięki niemu nasze elementy uzyskają dodatkowe efekty wizualne i będziemy mogli korzystać z rozsuwanych kontenerów zakrywających treść strony. Celowo określiłem je jako opcjonalne, ponieważ ich obecność nie skreśla zastosowania biblioteki Bootstrap. Fakt wiele elementów nie będzie prawidłowo funkcjonować, ale jeśli potrzebujemy tylko te podstawowe to skrypty jak najbardziej są tutaj zbędne. Osobiście stosowałem taki przypadek dla stron, gdzie będą obsługiwane przez słabsze komputery. Dzięki temu udało mi się zredukować obciążenie procesora.

Czy biblioteka Bootstrap to „must have” w świecie Frontendu?

Ogólnie rzecz biorąc Bootstrap nie jest biblioteką godną polecenia w każdej sytuacji. Mało tego, w przypadku niektórych projektów wręcz zbędna. Specjaliści od Frontendu zalecają, aby Bootstrap’a w swoich projektach unikać i też jestem tego samego zdania, ale są wyjątki kiedy gotowe style są najlepszym wyjściem. Bootstrap ma za zadanie przyspieszyć budowanie stron. Dzięki szerokiemu wyborowi klas możemy jednym słowem zamienić przycisk w bardziej rozbudowany pod względem wyglądu, a układ na pływający bez przeliczania i bawienia się w pozycjonowanie. Dla projektów gdzie liczy się szybkość kodowania i ładny wygląd jest to niezastąpione narzędzie.

Specjalny kreator przygotowany przez deweloperów bootstrapa pozwalający dostosować arkusze do naszych potrzeb zmniejszając tym samym ilość zbędnych klas do minimum
Specjalny kreator przygotowany przez deweloperów bootstrapa pozwalający dostosować arkusze do naszych potrzeb zmniejszając tym samym ilość zbędnych klas do minimum

Jest jednak też druga strona medalu. Bootstrap to masa klas CSS i skryptów, których prawdopodobnie nigdy nie wykorzystamy. Za każdym razem wczytując stronę przeglądarka pobiera cały arkusz styli wpływając ostatecznie na czas ładowania strony. Również samo kodowanie w gąszczu nazw często można się pogubić przynajmniej na początku. Wymagana jest poniekąd praktyka, aby sprawnie dobierać style. Twórcy Bootstrap’a świadomi tego problemu stworzyli w związku z tym narzędzia, które pozwala dostosować arkusze do własnych preferencji. Specjalny kreator online wyrzuca zbędne klasy i zostawia tylko te, które są nam naprawdę potrzebne.

Instalacja lokalna lub hosting zdalny

Twórcy Bootstrap’a oprócz klasycznego podejścia oferują również możliwość zdalnego podpięcia bibliotek pod naszą stronę. Nie musimy w tym celu zapisywać je lokalnie obciążając w ten sposób nasze połączenie. Usługa zwana BootstrapCDN polega na umieszczeniu w kodzie naszej strony linku do arkuszy CSS i skryptów JS. Podczas ładowania strony pliki pobierane są z serwerów utrzymywanych przez twórców Bootstrap’a.

Takie podejście to oczywiście zasługa samej technologii CSS, która pozwala na pobieranie stylów z zupełnie innego niezależnego serwera. Jednak rzadko który twórca gotowych bibliotek oferuje takie podejście, dostarczając własną infrastrukturę serwującą zewnętrzne arkusze stylów. Zapewne taka zaleta znacznie podwyższa argumentację za wyborem tej biblioteki.

Instalacja Bootstrap’a we własnym projekcie

W tej części zaprezentuje praktyczne podejście, czyli zaczniemy od implementacji biblioteki Boostrap w naszym projekcie. W przypadku użytkowników Visual Studio biblioteki Boostrap możemy pobrać za pomocą menedżera pakietów Nuget. NuGet pobierze wszystkie pliki za nas i dołączy je do projektu.

Instalacja bibliotek Boostrap przez menedżera pakietów Nuget
Instalacja bibliotek Boostrap przez menedżera pakietów Nuget

W przypadku tradycyjnego podejścia wchodzimy na stronę producenta biblioteki Boostrap – https://getbootstrap.com.

Strona główna Bootstrap
Strona główna Bootstrap

Na stronie głównej mamy przycisk Download. Poniżej możemy wybrać BoostrapCDN, czyli wersję z zewnętrznego serwera. W tym celu wystarczy do naszej głównej strony wzorcowej lub strony HTML dodać następujące tagi:

Pliki JS możemy oczywiście pominąć. Wszystko zależy od naszych preferencji. W taki sposób mamy już dostęp do Boostrap i możemy korzystać z klas. Jednakże jeśli interesuje Cię tradycyjna metoda to klikamy na Download, a następnie pod nagłówkiem Compiled CSS and JSS ponownie na Download.

Pobieranie gotowych plików CSS i JavaSciript
Pobieranie gotowych plików CSS i JavaSciript

Paczka zawiera wszystkie pliki potrzebne do odpalenia naszego Bootstrap’a. Kiedy je wypakowujemy wrzucamy do katalogu, a następnie podpinamy do strony. Pod sekcją HEAD, czyli w nagłówku strony umieszczamy:

A na dole strony przed znacznikiem BODY:

Od tego momentu style powinny zostać załadowane. Aby to sprawdzić wstaw na stronie przykładowy element:

Powinien się wyświetlić alert na niebieskim tle tak jak poniżej.

Jeśli tak jest to oznacza, że wszystko zostało zainstalowane. Teraz możemy używać naszych bibliotek Boostrap.

Przykładowe układy

Na koniec pokaże wam jeszcze kilka przykładowych klas jakie z pewnością będzie wykorzystywać na co dzień i z których sam osobiście korzystam. Zacznijmy od prostego układu kolumnowego:

Powyższy przykład dzieli kontener na dwie kolumny. Wraz z zmniejszaniem strony ostatnia przejdzie na sam dół. Kolumny możemy dokładać dodając kolejne znaczniki DIV z klasą col.

Zbyt duża liczba kolumn spowoduje, że będą one przechodzić na dół lub się rozjeżdżać. Kolejny przykład.

Klasa d-flex powoduje, że wszystkie elementy DIV znajdujące się wewnątrz tego znacznika o takiej klasie będą wyrównywane do lewej, oprócz ostatniego elementu. Ostatni element ma przypisaną klasę ml-auto pozycjonującą go do prawej strony. Klasa pr-2 dodaje dodatkowy margines wewnętrzny po prawej stronie. Klasa flex-wrap powoduje, że gdy mamy do czynienia z mniejszą rozdzielczością, elementy będą pozycjonowane na dół.