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!
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.
Warto przede wszystkim jak najczęściej korzystać z oficjalnej dokumentacji, która podzielona jest na kilka elementów:
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:
Sesja wygasła
Proszę zalogować się ponownie. Strona logowania zostanie otwarte w nowym oknie. Po zalogowaniu można ją zamknąć i wrócić tutaj.
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.