Bootstrap 3 – Gotowa Responsywna Strona Internetowa

Chcę Ci przedstawić Bootstrap 3, czyli krótko mówiąc framework CSS, gotową stronę WWW, którą pobierasz za darmo i możesz dopasować do swoich potrzeb.

Nie ważne czy jesteś już web developerem, czy dopiero będziesz zaczynać swoją przygodę z tworzeniem stron – bardzo ważne w naszej pracy jest wykorzystywanie gotowych elementów.

Pobierz framework Bootstrap 3.

Programowanie jest na tyle wymagającą dziedziną, że warto sobie na każdym kroku to wszystko ułatwiać i upraszczać. Możesz albo stworzyć sobie jakieś narzędzie od podstaw, własnoręcznie – by idealnie pasowało do wykonywanego projektu, albo po prostu wykorzystaj gotowca, którego wystarczy lekko przerobić, dostosować do swoich potrzeb.

W przypadku Front End Developerów z pomocą przychodzi Bootstrap 3 – to zbiór gotowych klas CSS, dzięki którym stworzysz przyciski, menu, slider, pojawiające się okienko i masę innych rzeczy.

​Chcesz ​nauczyć ​się ​czegoś ​nowego?​

​Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron i aplikacji ​- kursy dla początkujących i zaawansowanych

​PRZEJDŹ DO KURSÓW WIDEO »

Oczywiście, przy mniejszych, prostszych stronach czasem nawet szybciej jest stworzyć coś od zera, jednak w niektórych przypadkach ten framework również może pomóc – wystarczy skorzystać z narzędzia Customize, by nie pobierać całej paczki, wszystkich elementów, ale raczej zbudować sobie ją samemu – i wybrać tylko najpotrzebniejsze rzeczy.

W każdym przypadku Bootstrap użyty poprawnie może zaoszczędzić Ci czas liczony w godzinach, a nawet w dniach!

Bootstrap, czyli responsywne strony WWW

Na oficjalnej stronie możemy przeczytać, że Bootstrap to najpopularniejszy framework (czyli zbiór gotowych elementów) HTML, CSS i JavaScript w służący do budowania nowoczesnych, responsywnych stron WWW, a dodatkowo automatycznie dbający o wersję mobilną naszej strony.

I słusznie, bo w momencie, kiedy się pojawił, dość mocno wpłynął na całą branżę.

W Bootstrapie tworzymy stronę 1 raz, a ona wygląda świetnie na każdym urządzeniu – nie ważne czy masz telefon telefon z małym ekranem, tablet, smartphone’a czy normalny komputer.

Jak używać Bootstrapa?

Warto przede wszystkim jak najczęściej korzystać z oficjalnej dokumentacji, która podzielona jest na kilka elementów:

• Getting started – część wyjaśniająca jak zacząć pracę z Bootstrapem zupełnie od zera. Dowiesz się tutaj jak go ściągnąć, używać, znajdziesz przykładowy kod do pliku index.html oraz kilka przykładów od twórców Bootstrapa. Jest też informacja o licencji, o tym jak wyłączyć responsywność oraz jaka jest zgodność z przeglądarkami.
• CSS – zobaczysz jak są ostylowane podstawowe elementy HTML, jakie dodatkowe klasy możesz wykorzystać by Twoja praca z Bootstrapem była szybka i przyjemna, dowiesz się też jak jest zbudowany system siatki (grid), który odpowiada za responsywność. Oczywiście jest też wzmianka o pliku normalize, który często wykorzystuje się w projektach na całym świecie oraz o pracy z plikami Less.
• Components – gotowe komponenty, które możesz wykorzystać, by np. stworzyć rozwijane menu, grupy przycisków czy grupy pól formularza, menu nawigacyjne czy paski postępu. Możesz nawet wstawić ikonki z serii Glyphicons, za które normalnie trzeba zapłacić, jednak ich twórcy udostępnili je za darmo dla wszystkich, którzy używają Bootstrapa.
• JavaScript – wykorzystaj pluginy jQuery, by jeszcze bardziej urozmaicić swoją stronę. Dostępne są np. wyskakujące okienko (modal), ładnie wyglądające zakładki (tabs) czy też slider – lub „karuzela”.
• Customize – możesz stworzyć swoją własną paczkę z Bootstrapem, czyli wyrzucić niepotrzebne komponenty i skrypty JavaScript oraz ustawić odpowiednie kolory, tła, kroje czcionek i wiele innych wartości, które w normalny sposób trzeba edytować za pomocą stylów Less. Po prostu z wielkiego pliku ze wszystkimi stylami możesz zbudować swoją własną paczkę ważącą np. 20 kB.

Co więc zyskujesz używając Bootstrap 3?

Przede wszystkim ogromną ilość czasu i od razu dobrze wyglądającą stronę, która będzie responsywna. Udostępniam również wersję wideo tego artykułu, w której poznasz narzędzie DivShot i edytor Brackets:

​Chcesz ​nauczyć ​się ​czegoś ​nowego?​

​Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron i aplikacji ​- kursy dla początkujących i zaawansowanych

​PRZEJDŹ DO KURSÓW WIDEO »

Przeczytaj też...

Jak wyglądał świat Front Endu w 2017 roku?

Jak nauczyć się programować? HTML, CSS, JavaScript, jQuery

Kurs JavaScript 7/10 – Zdarzenia

Jakub Jurkian

Pracuję jako Front End Developer w Londynie. Od ponad 11 lat jestem programistą-pasjonatem, a strony (i wszystko co z nimi związane) tworzę od 6 lat. Jestem też autorem kursów wideo - od 2013 roku prowadzę kanał na YouTube i tego bloga. Zaczynałem od pisania artykułów dla jednego z czołowych polskich portali IT - benchmark.pl. Prywatnie od 10 lat jestem związany z kulturą hip-hop (głównie taniec breakdance).