Bootstrap 3 – Gotowa Responsywna Strona Internetowa

Bootstrap 3 - responsywna strona www

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.

 

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.

4 myśli na “Bootstrap 3 – Gotowa Responsywna Strona Internetowa”

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

  2. Witam,
    a jak usunąć responzywność z Bootstrapa? Czy jest to możliwe? Jakie spowoduje zmiany w szkielecie strony?
    Dziękuję za odpowiedzi

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

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Wymagane pola są oznaczone *