Bootstrap – co to jest? SPRAWDŹ

Spis treści

Czytasz teraz:

Bootstrap – co to jest? SPRAWDŹ

• Bootstrap – co to?
• Główne zalety Bootstrapa
• Jak skorzystać z Bootstrapa?
• Podstawowe elementy Bootstrapa
  • Grid – siatka układu elementów
  • Najpopularniejsze klasy pomocnicze
  • Responsive web design – klasy responsywne i breakpointy
• Dokumentacja biblioteki Bootstrap – z czego się składa?
• Wady korzystania z frameworków
• Podsumowanie

Zamknij

Bootstrap to jeden z najpopularniejszych frameworków CSS, który wspomaga pracę nad wizualnymi aspektami stron internetowych lub aplikacji. Dowiedz się, jak możesz wykorzystać go w swojej pracy i dlaczego warto to zrobić. W publikacji zwracamy uwagę także na aspekty, które mogą stanowić przedmiot Twojego niezadowolenia z używania tego darmowego narzędzia.

Bootstrap – co to?

Na dobry początek wyjaśnijmy dokładnie, co to jest Bootstrap. To gotowy szablon pozwalający budować i edytować wygląd stron, w prosty i intuicyjny sposób . Został stworzony przez pracowników Twittera w 2010 roku i początkowo nazywał się Twitter Blueprint. 

Ze względu na wiele udogodnień i bogactwo możliwości, już w 2012 roku stał się topowym narzędziem wśród webdeveloperów. Niedawno biblioteka Bootstrap doczekała się 5 oficjalnej wersji, ujmującej zmiany trendów związanych z oczekiwaniami użytkowników. Historycznie furorę zrobiły choćby technika RWD (Responsive Web Design) i mobile-first, dopasowujące stron do każdej szerokości ekranu – od małych urządzeń (smartfony) po średnie (tablety) i duże (monitory). Obecnie (sierpień 2022) najbardziej aktualną wersją Bootstrapa jest v5.2.

Ciekawostka…

(Dalszą część artykułu znajdziesz pod formularzem)

Bootstrap nie jest jedynym frameworkiem CSS, który w ostatnich latach zyskał na popularności. Inne znane webdeveloperom biblioteki to:

• YAML
• Pure
• Zurb Foundation
• Gumpy
• Materialize.

Wymienione biblioteki działają na dość podobnych zasadach, choć każda z nich ma swoją specyfikację, która może ułatwić pracę ukierunkowaną na dany projekt.

>> Verseo CSS – reklama produktowa bez prowizji Google <<

Główne zalety Bootstrapa

Znaczący wpływ na popularność Bootstrapa ma fakt, że od początku został on udostępniony jako darmowy open-source, który można wykorzystywać także w projektach komercyjnych. Dzięki temu od dobrych kilku lat na forach internetowych można znaleźć mnóstwo wątków związanych z jego działaniem i dokumentacją każdej kolejnej wersji.

Poza wymienionymi korzyściami płynącymi z używania Bootstrapa warto wspomnieć także o kilku innych jego zaletach:

• Zapewnia bardzo zbliżony wygląd i funkcjonalność stworzonej strony na wszystkich przeglądarkach.
• Jest prosty w użyciu i wdrożeniu – aby z niego korzystać, nie trzeba być doświadczonym programistą – wystarczy podstawowa wiedza z zakresu tworzenia stron. 
• W łatwy sposób można tworzyć interaktywność witryny, wdrażając m.in. formularze dla użytkownika, galerię zdjęć, przyciski czy tabele.
• Posiada wbudowaną responsywność szablonu dla wszystkich urządzeń.
• Jest kompatybilny ze skryptami popularnego języka programowania JavaScript.
• Posiada pełną i szczegółową dokumentację, która znajduje się na oficjalnej stronie https://getbootstrap.com/.

Jak skorzystać z Bootstrapa?

Wybraliśmy dwie najprostsze metody wdrożenia:

1. Pobierz zestaw plików z oficjalnej strony i umieść go do rozpakowanego folderu w katalogu głównym. Następnie musisz zaaplikować linki CSS i JavaScript w odpowiednim miejscu w pliku HTML.

2. Umieść w kodzie HTML linki z ogólnodostępnego źródła zewnętrznego CDN (Content Delivery Network), który służy do przechowywania plików używanych np. przez deweloperów. 

Pamiętaj, aby link CSS znajdował się tuż przed zamknięciem znacznika “head”, a link JS przed zamknięciem znacznika “body”. Odpowiednio zaktualizowany adres URL znajdujący się na CDN można pobrać bezpośrednio ze strony w sekcji “get started”.

Po uruchomieniu Bootstrapa możesz w łatwy sposób zacząć tworzyć nowy szablon oraz korzystać z przygotowanych porad i wskazówek od autorów.

Podstawowe elementy Bootstrapa

Grid – siatka układu elementów

Jednym z podstawowych pojęć związanych z frameworkiem Bootstrap jest Grid, czyli siatka układu elementów na stronie w postaci kolumn i rzędów.

Warto zauważyć, że klasy poszczególnych wierszy nazywają się “row”, a umieszczone w nich klasy kolumn to “col”. Kod w znacznikach body zawarty jest w kontenerze, czyli “container”, w dodatku za pomocą klasy “text-center” został wyśrodkowany. Wynikiem tego uzyskamy równomierne rozłożenie 5 kolumn zawartych w 2 wierszach. 

Elementy będą ostylowane bez żadnej linijki kodu w pliku CSS, co nie byłoby możliwe bez wykorzystania Bootstrapa.

Gdy chcemy zagospodarować nierównomierną szerokość kolumn, dobrym przykładem będzie poniższe rozwiązanie:

W tej wersji kolumny ułożone są w jednym rzędzie i zajmują tyle procent szerokości na stronie, ile wynosi procent ich liczby w odniesieniu do 12 (tak domyślnie Grid dzieli stronę). Zatem poszczególne kolumny z napisem „Hello World” będą miały:

• „col-2” – ok. 16.6%,
• „col-4” – ok. 33,3%, 
• „col-3” –  2 x 25%  dostępnej szerokości strony.

>> 7 recept na sprzedaż w czasach kryzysu <<

Najpopularniejsze klasy pomocnicze

Dzięki klasom pomocniczym biblioteki Bootstrap można stylować i modyfikować elementy HTML bez konieczności pisania kodu CSS. Są to m.in.:

• margin, padding – odstępy wewnątrz komponentów i pomiędzy komponentami;
• colors – kolory tekstu, obramowania, przycisków;

<p class=”text-success”>.text-success</p>

• border – obramowanie komponentów;

<p class=”text-success border-start”>.text-success</p> (przykład – obramowanie z lewej strony)

• opacity – przezroczystość wybranych elementów;

<p class=”text-success border-start opacity-50″>.text-success</p>

• position – przykładem może być “przyklejona” nawigacja górna strony, która podąża za scrollowaniem użytkownika;

<div class=”position-sticky”>…</div> 

• interactions – wszystkie interakcje, które użytkownik może wykonać na stronie…

I wiele innych. Klasy zawarte w znacznikach HTML można dowolnie łączyć w jednym znaczniku HTML.

Responsive web design – klasy responsywne i breakpointy

Jak już wspomnieliśmy, Bootstrap opiera się technice projektowania stron o nazwie mobile-first i RWD. Posiada 6 breakpointów, czyli nazw i wartości, do których odwołuje się w trakcie modyfikacji wyglądu witryny. 

Korzysta z nich w celu jak najlepszego dopasowania kolumn i wierszy do różnej wielkości ekranu. 

Poniżej screen z oficjalnej dokumentacji zawartej na https://getbootstrap.com/docs/5.2/layout/breakpoints/ :

Utworzenie responsywnego designu polega na dodawaniu powyższych klas z odpowiednimi prefiksami do znaczników HTML. Poniżej przykład: 

Układ kolumn na stronie będzie różnił się w zależności od szerokości ekranu urządzenia, na którym przeglądamy stronę:

• przy ekranach zajmujących więcej lub 768 px zobaczymy dwie kolumny w jednym wierszu z podziałem 75% do 25% szerokości;

• przy ekranach zajmujących mniej niż 768 px Bootstrap wygeneruje dwa wiersze po jednej kolumnie zajmującej 100% dostępnej szerokości.

Dokumentacja biblioteki Bootstrap – z czego się składa?

Co charakteryzuje dobry framework? Oczywiście zrozumiała dokumentacja. Zachęcamy do zapoznania się z nią na https://getbootstrap.com/. Jest dość rozbudowana, ale zrozumiała i czytelna. Nie trzeba uczyć się jej na pamięć – wystarczy wiedzieć, gdzie szukać pomocy w razie problemu. Dla ułatwienia opisaliśmy wszystkie sekcje w niej zawarte wraz z krótkim wyjaśnieniem:

• Getting started – podstawowe informacje związane z aktualną wersją i instrukcją podłączenia frameworka.
• Customize – możliwości związane z dostosowaniem szablonu do potrzeb naszego projektu.
• Layout – zasady działania strony związane z przyjętym szablonem – rozkład sekcji, kolumn, porady dotyczące responsywności czy wypozycjonowania wybranego elementu.
• Content – zbiór proponowanych stylów odpowiedzialnych za wygląd takich elementów jak obrazki, tabele, nagłówki
• Forms – informacje dotyczące wdrożenia interaktywnych formularzy dla użytkownika w różnej formie np. logowanie, zapytanie o produkt, kontakt mailowy z obsługą Klienta.
• Components – biblioteka gotowych komponentów takich jak breadcrumb, paginacja, przyciski, karuzela zdjęć, nawigacja.
• Helpers – tutaj można znaleźć tzw. “protipy” dla kolorów, “przyklejonej” nawigacji czy ukrywania lub pokazywania komponentów na własne potrzeby
• Utilities – nazwy klas pomocniczych, dzięki którym szybko można zmienić takie rzeczy jak kolor, tło czy obramowanie dodając jedynie klasę w kodzie HTML

Ciekawostka…

Poza oficjalną dokumentacją Bootstrapa mnóstwo przydatnych informacji i wskazówek dotyczących funkcjonowania frameworków znajdziesz na jednym z najpopularniejszych na świecie forów internetowych dla programistów – https://stackoverflow.com/ 

Wady korzystania z frameworków

Korzystanie z frameworków jest proste i intuicyjne, szczególnie dla osób, które już zaczęły swoją przygodę z front-endem. Do stworzenia profesjonalnie wyglądającej strony wystarczy podstawowa znajomość HTML i CSS. 

Osoby mniej doświadczone, które korzystają jedynie z gotowych rozwiązań w swoich projektach, mogą nie do końca wiedzieć, jak to wszystko działa „od silnika”. 

Kogoś, kto tworzy design stron tylko za pomocą frameworków, nie można nazwać webdeveloperem. Znajomość kodu jest niezwykle ważna dla osób chcących przejść na wyższy level.

Dodatkowo Bootstrap narzuca pewne schematy postępowania, co może utrudnić przygotowanie bardziej rozbudowanego projektu według wymagających wytycznych.

Dobra rada…

Warto tworzyć osobny plik CSS do nadpisywania styli narzuconych przez Bootstrap. Tym sposobem niektóre elementy zostaną zmienione na Twoje potrzeby, a w przypadku chęci wdrożenia zaktualizowanej wersji biblioteki masz pewność, że strona będzie dalej działać.

Wyświetl ten post na Instagramie

Post udostępniony przez Verseo (@verseo.pl)

Podsumowanie

Bootstrap to darmowe narzędzie typu open source, które można wykorzystywać również w projektach komercyjnych. Jest niezastąpione  w szybkim i prostym tworzeniu stron internetowych. Posiada wiele zalet, jak choćby łatwość obsługi i wdrożenia. 

Jedną z większych wad jest narzucanie pewnych schematów, co wpływa na elastyczność wykorzystania w niektórych projektach. 

Jednak w naszej ocenie szala przechyla się zdecydowanie na stronę korzyści. Najlepiej przetestuj to rozwiązanie na własnym biznesie i podejmij decyzję, czy pomaga Ci w nim wzrastać.