Bootstrap – wprowadzenie

Bootstrap – framework CSS, rozwijany przez programistów Twittera, wydawany na licencji MIT. Zawiera zestaw przydatnych narzędzi ułatwiających tworzenie interfejsu graficznego stron oraz aplikacji internetowych. Bazuje głównie na gotowych rozwiązaniach HTML oraz CSS (kompilowanych z plików Less) i może być stosowana m.in. do stylizacji takich elementów jak teksty, formularze, przyciski, wykresy, nawigacje i innych komponentów wyświetlanych na stronie. Framework korzysta także z języka JavaScript.

Mobile First

Bootstrap powstał w założeniu o filozofię Mobile First, co można przetłumaczyć jako budowę layout’u od ekranu komórki do monitora. Programista i grafik najpierw budują interfejs na telefon, potem na tablet, laptop i na końcu monitor komputera. Cały czas bazują na tych samych elementach, które w zależności od rozdzielczości mogą: pojawiać się i znikać, przemieszać lub zmieniać rozmiar.

Telefony (<768px) Tablety (?768px) Średnie ekrany (?992px) Większe ekrany (?1200px)
długość container auto 750px 970px 1170px
prefiks klasy .col-xs- .col-sm- .col-md- .col-lg-

Dla własnych potrzeb stworzyłem jeszcze kolumnę tn dla ekranów nie szerszych niż 480 pikseli, czyli takich jak ekran Samsung Galaxy S4. Z kolei jeszcze nie wprowadzona wersja Boostrap 4 zakłada już rodzielczości 4K. Póki co nie ma się co tym przejmować.

Budowa kontenerowa

Bootstrap oparty jest kontenery HTML ‚<div>’. Domyślnie jest to 12 jednostek. Jeżeli budujemy prosty układ z częścią na treść i menu boczne ‚sidebar’, to możemy skorzystać z proporcji 8/4 lub 9/3. Jeżeli chcemy zrobić trójkolumnowy schemat jak w gazecie, to ustalamy proporcje na 4/4/4.

Podział dotyczy jednego wiersza. Następny może mieć zupełnie inny podział.

W zależności od szerokości ekranu możemy zmienić proporcje. Dla komórki podział 4/4/4 jest za ciasny dlatego można zaprogramować 12 – 6/6. Da to jedną dużą kolumnę na cały ekran, a pod spodem dwie równe obok siebie. Dla każdego ekranu układ może być inny.

Podstawa budowy

Układ Bootstrapa to:

Kontener nadrzędny > kontener wiersza > kolumny / bloki.

Na jednej stronie może być wiele kontenerów nadrzędnych – osobny dla nagłówka, treści, stopki i wielu innych niezależnych modułów (np.: reklama). W kontenerze nadrzędnym może być wiele wierszy, a każdy z nich może mieć inny układ kolumn. Kolumny mogą mieć różną szerokość i ułożenie w zależności od ekranu wyświetlenia. Domyślnie układ kolumn składa się z 12 jednostek i tego warto się trzymać. Dodatkowo każda kolumna może zawierać podrzędny układ także składający się z 12 jednostek (zagnieżdżanie).

Cały ekran vs ustalony kontener nadrzędny

Bootstrap przewiduje dwie opcje opakowania całej treści. Możemy przyjąć że nasza treść umieszczona jest w pojemniku, którego szerokość jest determinowana płynnie przez szerokość ekranu lub nadać mu z góry ustaloną szerokość według powyższej tabeli.

W pierwszym wypadku wszystko staje się płynne i nie jesteśmy w stanie oszacować jaka będzie szerokość kolumn czy jednostek. Na ekranie 4K jednostka mająca szerokość 1/12 szerokości monitora stanie się niemal samodzielnym bytem. Kolumnę płynną warto stosować jako tło do nagłówka i stopki. Tam też jednak nie należy zostawiać wszystkiego przypadkowi i w płynną kolumnę warto wstawić kolejną, już ustaloną. Płynna będzie stanowić jednolite tło, natomiast ustalona będzie łatwiejsza w kontroli.

Przesuwanie kolumn

Co więcej kolumny mogą zamienić się miejscami. Najlepszym przykładem na zastosowanie przesuwania kolumn może być układ 6/6 gdzie w parzystym wierszu tekst jest po lewej a grafika po prawej. W nieparzystym wierszu grafika po lewej, tekst po prawej. Na ekranie komórki należało by zmienić układ na 12 – 12. Powstanie problem, bo będziemy mieli tekst pod tekstem, zdjęcie pod zdjęciem i wszystko straci czytelność. Wystarczy dla parzystego wiersza zastosować zamianę. Grafika wyświetli się nad tekstem i czytelność wraca.

Dla układu powyżej dwóch kolumn w rzędzie też można stosować przesuwanie. Należy jednak pamiętać, że przeglądarka czyta kod od lewej do prawej. Jeżeli ustalimy, że przy jakiejś rozdzielczości pierwsza i druga kolumna ma znaleźć się za trzecią, to układ będzie taki: 3 > 2 > 1. System przeniesie najdalej pierwszą kolumnę.

Znikanie i pojawianie się

Elementy bootstrapa mogą pojawiać się lub znikać. I to nie tylko kolumny, ale nawet kawałki tekstu. Praktycznie do każdego znacznika można dodać kod, który go wyłączy lub włączy w zależności czy mamy komórkę czy ekran komputera. To bardzo ważna opcja gdy chcemy ograniczyć ilość elementów na ekranie komórki, albo wyświetlić treści tylko dla użytkowników tabletów (np.: oferta najnowszego smartfona).

Trzeba też pamiętać, że jak coś znika, to konstrukcja kontenerów może się zawalić. Projektant musi sprawdzić czy nie trzeba poszerzyć pozostałe kolumny.

Odstępy i rozstępy

Domyślny margines kolumny to 15px z lewej i prawej. Kolumny skrajne nie mają skrajnego marginesu. Odstęp między dwiema kolumnami to 30px. Odstęp można usunąć wstawiając dodatkowy znacznik kontenera wiersza do kolumny.

Kolumny można też odsunąć od siebie i wyznaczoną ilość jednostek. Może być taki układ: 8+1 / 3, gdzie pierwsza kolumna będzie miała 8 jednostek, druga 3, a odstęp między nimi to jedna jednostka wyliczona dla ekranu. Układ może być taki tylko dla wybranych ekranów albo dla wszystkich.

Co jeszcze potrafi Bootstrap

Bootstrap to nie tylko schemat strony, ale także przygotowane gotowe elementy takie jak: mobilne menu, przyciski, pola formularzy, chmurki podpowiedzi, panele, nagłówki itd. Całość do przejrzenia pod adresem: http://getbootstrap.com/components/

Programiści Bootsprapa zadbali o to, by użytkownik nie musiał już oprogramowywać list numerycznych i nieuporządkowanych.

Stworzono klasy, które automatycznie ustawiają elementy w pionie lub poziomie; usuwają znaczki punktatora i podstawiają inne np z czcionki graficznej FontAwesome. Domyślnej czcionki Glyphicons nie warto stosować.

Stworzono kilka klas kolorów dla oznaczania stanów: sukces (zielony), ostrzeżenie (żółty), zagrożenie (czerwony), informacja (jasnoniebieski) oraz domyślny (szary) i pierwszy (granatowy).

Istnieje cała paleta różnych przycisków, od prostych pojedynczych do zgrupowanych, skomplikowanych kombinacji. Przycisk może mieć jedną wartość a może być rozwijaną listą z której wybiera się opcje. Stworzono osobne grupy dla przycisków paginacji lub nawigacji (np. okruszki mówiące na jakim poziomie zagnieżdżenia jesteśmy). Można też nadać status ‚aktywny’. Wtedy przycisk będzie wyglądał jak wciśnięty. Można wyłączyć przycisk – będzie on wtedy widoczny, ale niemożliwy do wciśnięcia. Domyślnie button ma szerokość tekstu i swoich marginesów, albo można nadać mu klasę bloku i wtedy zajmie całą szerokość bloku lub ekranu.

Bootstrap został zbudowany przez programistę Twittera i jego podstawowy wygląd kojarzy się z tą aplikacją. Wszystko jednak można zmienić lub rozbudować. Trzeba jednak uważać by nie zachwiać szkieletu, bo o ile twórcy sprawdzili swoje dzieło na wszystkich przeglądarkach i gwarantują jego działanie, to zbyt głęboka ingerencja może przynieść skutki, których sami nie przewidzimy.

1 komentarz do wpisu “Bootstrap – wprowadzenie

  1. Dzień dobry! Z tej strony Janusz Kamiński. Pracuję w TempalateMonster. Nie znalazłem innego sposobu aby skontaktować się z Panem. Mam do Pana kilka propozycji o współpracę. Proszę odpisać na mój mail, który podałem w formularze. Dziękuję z góry! Pozdrawiam

Dodaj komentarz

Privacy Preference Center

Treść banner z cookies

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam.

google analitycs

Close your account?

Your account will be closed and all data will be permanently deleted and cannot be recovered. Are you sure?