Bootstrap 4. O co w nim chodzi i co nowego?

Bootstrap 4 to tzw. framework CSS (nie do końca precyzyjne stwierdzenie) w najnowszej odsłonie. Dowiedz się jak działa i jakie są zmiany w aktualnej wersji.

Co znajdziesz w tym wpisie?

Jeżeli znasz już Bootstrapa i interesują Cię jedynie różnice w najnowszej wersji możesz spokojnie przejść do DALSZEJ części artykułu. Jeśli natomiast jest to dla Ciebie coś nowego to przeczytaj kilka kolejnych akapitów bo z pewnością pozwolą Ci na lepsze zrozumienie tematu.

Czym jest Bootstrap?

Bootstrap jest czasem nazywany frameworkiem CSS bo niesamowicie ułatwia stylowanie elementów w projekcie. Jest to prawda jednak to narzędzie zdecydowanie wykraczają poza sam CSS bo serwuje nam gotowe rozwiązania w HTMLu i JavaScripcie (tego nawet nie musimy dotykać). Po prostu żywcem kopiujemy całe elementy projektu z całą ich strukturą i zachowaniem. Tworzenie Frontu z Bootstrapem to bajka.

Skąd wziął się Bootstrap?

Jest to narzędzie stworzone przez programistów z Twittera. Na początku na wewnętrze potrzeby firmy (systematyzacja kodu) by potem się rozrosnąć do najpopularniejszego open-sourcowego frameworku w branży. Jednym z konkurentów może być np. Foundation. Więcej info na polskiej lub angielskiej wikipedii.

Jak rozpocząć pracę z Bootstrapem?

Całość dokumentacji jest dostępna na oficjalnej stronie. Jest ona dość przejrzysta postaram się jednak opisać to po krótce aby ułatwić zrozumienie tematu.

https://getbootstrap.com/docs/3.3/

Jeśli chcesz go używać w stosunkowo prostym projekcie wystarczy podpiąć plik ze stylami CSS i skryptami JS do naszego pliku .html. Można to zrobić dwojako:

Umieszczasz linki zewnętrzne najpierw w headzie pliku .html:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Następnie przed domknięciem </body> umieść link do skryptów:

<script src=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>

Drugim sposobem jest ściągnięcie plików ze strony i podlinkowanie analogicznych plików do tych wskazanych powyżej.

https://getbootstrap.com/docs/3.3/getting-started/

To Ci w zupełności wystarczy na początek więc jeśli chcesz to akapity z Gulpem i Webpackiem narazie pomiń.

Konfiguracja z Gulpem.

Jeśli używałeś wcześniej Gulpa to możesz chcieć podpiąć też Bootstrapa. Całość jest fajnie opisana w tutorialu poniżej:

Konfiguracja z Webpackiem.

Jeśli chcesz dodać tą bibliotekę do swojego projektu możesz zainstalować go przy pomocy npm podobnie jak inne moduły przy pracy z webpackiem. Więcej info poniżej:

https://getbootstrap.com/docs/4.0/getting-started/webpack/

Ciekawym jest, że nie znalazłem oficjalnej dokumentacji nt. użycia starszych wersji Bootstrapa razem z Webpackiem… Może coś przeoczyłem? Tak czy inaczej można znaleść kilka angielsko-języcznych tutoriali na ten temat np. ten:

Co Ci da Bootstrap?

Możesz bardzo niskim nakładem pracy zbudować siatkę (grida) dla stron responsywnych czyli RWD.

Możesz tworzyć np. ostylowane buttony, galerie, jumotrony, nawigację i wiele innych elementów  poprzez skpiowanie gotowego kodu. Potem tylko dostosować do naszych potrzeb.

Jak biblioteka jest prawidłowo podpięta cała sztuka już tylko w nadaniu selektorowi w pliku .html klasy o określonej nazwie. Na tej podstawie elementy są automatycznie stylowane. W praktyce kopiujemy wszystko z oficjalnej strony. Listę wspieranych elementów wraz dynamicznymi przykładami oferuje nam dokumentacja (klikaj w elementy w menu po prawej):

https://getbootstrap.com/docs/3.3/components/

https://getbootstrap.com/docs/3.3/javascript/

Jeśli chcesz dowiedzieć się więcej na temat grida RWD czyli jak szybko tworzyć strony responsywne to info jest poniżej:

https://getbootstrap.com/docs/3.3/css/#grid

Na początku wygląda to trochę skomplikowanie jednak w rzeczywistości jest bardzo proste. Lecą przykłady.

Przykłady użycia Bootstrapa.

Teraz stworzę kilka elementów z użyciem tej biblioteki. Mam tylko jakiś problem z CodePenem bo nie chce mi czytać pliku .js z Bootstrapa… Dziwne… ale jak podepniecie go prawidłowo to powinien działać w Waszym projekcie.

Button

See the Pen RjZGVJ by Bart (@bedekodzic) on CodePen.

Alert

See the Pen GOvjdP by Bart (@bedekodzic) on CodePen.

Karuzela

See the Pen Ebvgpv by Bart (@bedekodzic) on CodePen.

Akordeon

See the Pen MOvbam by Bart (@bedekodzic) on CodePen.

Wszystko co musiałem zrobić to skopiować kod HTML ze strony i podpiąć bibliotekę (gdyby tylko plik .js działał w CodePenie…). Nieźle, co?

Więcej Informacji.

Jeśli chcesz dowiedzieć się więcej na temat samego Bootstrapa to w necie jest masa materiałów. Możesz zacząć np. od tego samouczka na Youtube:

Lub darmowego kursu na Udemy:

https://www.udemy.com/bootstrap-4-tutorials/

Komentarz do Bootstrapa.

Opanowanie tej biblioteki jest jednym pierwszych kroków na ścieżce Front-End Developera umożliwia ona szybsze budowanie projektów nawet przy bardziej zaawansowanych zastosowaniach np. razem z Angularem. Jeśli jesteś na początku swojej drogi i uważasz, że Bootstrap załatwia wiele problemów za Ciebie bo możesz łatwo budować niezłe stronki to strzeż się!

Nie wprawione oko nie rozróżni Bootstrapa od rzemieślniczej dłubaniny jednak kunszt developera objawia się tym, że wie kiedy użyć odpowiednich narzędzi a kiedy dołożyć cząstkę swego intelektu aby stworzyć wspaniałą aplikację… A szablony żywcem zerżnię.e z Bootstrapa raczej do wspaniałych nie należą 🙂

Używaj Bootstrapa jako opcji a nie jako bazy.

Bootstrap 4 – co nowego?

W listopadzie 2017 dalej nie ma wersji produkcyjnej (choć pierwsza wersja wyszła już 2 lata temu). Mamy za to kompletną wersję beta z możliwymi bugami.

Różnice nie są kolosalne i generalnie nie będę się w tej kwestii powtarzał bo już sporo osób o tym pisało. Jeśli chcecie o tym poczytać to więcej szczegółów można znaleść np. tutaj:

http://adamczuk.net.pl/2015/10/04/10-funkcji-w-bootstrap-4/

https://kursbootstrap.pl/nowosci-w-bootstrap-4/

No i oczywiście oficjalna dokumentacja:

https://getbootstrap.com/docs/4.0/migration/

Podsumowanie.

Jeśli jeszcze nie znasz Bootstrapa to się go naucz 🙂 Bo warto.


Bartek Cis

Piszę dla was tego bloga bo lubię aplikacje internetowe. Mogę je projektować, kodować a potem o nich pisać czując dreszczyk ekscytacji za każdym razem gdy trafię na coś nowego. Bo uczymy się całe życie. Prawda?