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.

Bootstrap 3 - Gotowa Responsywna Strona Internetowa 1

​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

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:

Bootstrap 3 - Gotowa Responsywna Strona Internetowa 1

​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

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).

  • witam, Ogólnie wprowadzenie jest fajne ale jak np. zrobić aby stopka była zawsze na dole ? jest na to jakaś klasa w tym bootstrapie ? albo jak np. ostylować menu dodane z bootstrapu, tworząc swój styl czy zmieniać ten bootstrapowy ? nie ogarniam jeszcze tego i szczerze chyba szybciej zrobił bym od zera ;/ Pozdrawiam

    • Jeśli chcesz żeby stopka była na dole (zawsze, tzn. nawet jak przewijasz ekran), wtedy dodaj do tej stopki klasę np. o nazwie „fixed-bottom” i w stylach css dla TEJ KLASY ustaw takie właściwości:

      position: fixed;
      bottom: 0;

      Co do stylowania menu. Warto zostawić styl Bootstrapowy i dodać swój własny, bo wtedy możesz zaktualizować sobie pliki Bootstrapa kiedy będziesz potrzebował, a Twoje style zostaną. W innym przypadku, gdybyś edytował bezpośrednio Bootstrapa i chciał go zaktualizować – wszystko poszłoby w nicość, po prostu by zniknęło.

      Dokładniej tłumaczę jak to zrobić w pełnej wersji kursu Webmaster Przyszłości 1.0

  • Witam
    Mam problem z menu. Mam menu poziome i na końcu po prawej stornie jest pole do wpisywania tekstu. Jak zrobić aby ono było przysunięte maksymalnie do prawej strony(). Obecnie zawiera margines,padding i nie jest równy z pozostała czescia strony

  • Witam,

    a jak usunąć responzywność z Bootstrapa? Czy jest to możliwe? Jakie spowoduje zmiany w szkielecie strony?

    Dziękuję za odpowiedzi

    • Cześć,
      tutaj jest wszystko opisane w 4 punktach: https://getbootstrap.com/getting-started/#disable-responsive

      Ale osobiście i tak bardziej polecam dopasować responsywność strony niż całkowicie ją wyrzucać.
      Nawet ta najbardziej podstawowa (działająca) może być lepsza niż przeglądanie strony w domyślnej formie na urządzeniach mobilnych.

      Zmiany będą takie, że strona na telefonie wyświetli się w identycznej formie (pomniejszonej), jak na komputerze. Czyli przeglądanie nie będzie zbyt wygodne.

  • >