- 7podaj dalej
- Udostępnij1
- Twitter0
- Comments6
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
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
- 7podaj dalej
- Udostępnij1
- Twitter0
- Comments6
Przeczytaj też...
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
No proszę. Autor plus 5.
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.