Bootstrap – wprowadzenie

Bootstrap – frame­work CSS, rozwi­ja­ny przez progra­mi­stów Twitte­ra, wydawa­ny na licen­cji MIT. Zawie­ra zestaw przydat­nych narzę­dzi ułatwia­ją­cych tworze­nie inter­fej­su graficz­ne­go stron oraz aplika­cji inter­ne­to­wych. Bazuje głównie na gotowych rozwią­za­niach HTML oraz CSS (kompi­lo­wa­nych z plików Less) i może być stoso­wa­na m.in. do styli­za­cji takich elemen­tów jak teksty, formu­la­rze, przyci­ski, wykre­sy, nawiga­cje i innych kompo­nen­tów wyświe­tla­nych na stronie. Frame­work korzy­sta także z języka JavaScript.

Mobile First

Bootstrap powstał w założe­niu o filozo­fię Mobile First, co można przetłu­ma­czyć jako budowę layout'u od ekranu komór­ki do monito­ra. Progra­mi­sta i grafik najpierw budują inter­fejs na telefon, potem na tablet, laptop i na końcu monitor kompu­te­ra. Cały czas bazują na tych samych elemen­tach, które w zależ­no­ści od rozdziel­czo­ści mogą: pojawiać się i znikać, przemie­szać lub zmieniać rozmiar.

Telefo­ny (<768px) Table­ty (?768px) Średnie ekrany (?992px) Większe ekrany (?1200px)
długość conta­iner auto 750px 970px 1170px
prefiks klasy .col-xs- .col-sm- .col-md- .col-lg-

Dla własnych potrzeb stworzy­łem jeszcze kolum­nę tn dla ekranów nie szerszych niż 480 pikse­li, czyli takich jak ekran Samsung Galaxy S4. Z kolei jeszcze nie wprowa­dzo­na wersja Boostrap 4 zakła­da już rodziel­czo­ści 4K. Póki co nie ma się co tym przej­mo­wać.

Budowa kontenerowa

Bootstrap oparty jest konte­ne­ry HTML '<div>'. Domyśl­nie jest to 12 jedno­stek. Jeżeli buduje­my prosty układ z częścią na treść i menu boczne 'sidebar', to możemy skorzy­stać z propor­cji 84 lub 93. Jeżeli chcemy zrobić trójko­lum­no­wy schemat jak w gazecie, to ustala­my propor­cje na 4÷4÷4.

Podział dotyczy jedne­go wiersza. Następ­ny może mieć zupeł­nie inny podział.

W zależ­no­ści od szero­ko­ści ekranu możemy zmienić propor­cje. Dla komór­ki podział 4÷4÷4 jest za ciasny dlate­go można zapro­gra­mo­wać 12 – 6/​6. Da to jedną dużą kolum­nę na cały ekran, a pod spodem dwie równe obok siebie. Dla każde­go ekranu układ może być inny.

Podstawa budowy

Układ Bootstra­pa to:

Konte­ner nadrzęd­ny > konte­ner wiersza > kolum­ny /​ bloki.

Na jednej stronie może być wiele konte­ne­rów nadrzęd­nych – osobny dla nagłów­ka, treści, stopki i wielu innych nieza­leż­nych modułów (np.: rekla­ma). W konte­ne­rze nadrzęd­nym może być wiele wierszy, a każdy z nich może mieć inny układ kolumn. Kolum­ny mogą mieć różną szero­kość i ułoże­nie w zależ­no­ści od ekranu wyświe­tle­nia. Domyśl­nie układ kolumn składa się z 12 jedno­stek i tego warto się trzymać. Dodat­ko­wo każda kolum­na może zawie­rać podrzęd­ny układ także składa­ją­cy się z 12 jedno­stek (zagnież­dża­nie).

Cały ekran vs ustalony kontener nadrzędny

Bootstrap przewi­du­je dwie opcje opako­wa­nia całej treści. Możemy przyjąć że nasza treść umiesz­czo­na jest w pojem­ni­ku, które­go szero­kość jest deter­mi­no­wa­na płynnie przez szero­kość ekranu lub nadać mu z góry ustalo­ną szero­kość według powyż­szej tabeli.

W pierw­szym wypad­ku wszyst­ko staje się płynne i nie jeste­śmy w stanie oszaco­wać jaka będzie szero­kość kolumn czy jedno­stek. Na ekranie 4K jednost­ka mająca szero­kość 112 szero­ko­ści monito­ra stanie się niemal samodziel­nym bytem. Kolum­nę płynną warto stoso­wać jako tło do nagłów­ka i stopki. Tam też jednak nie należy zosta­wiać wszyst­kie­go przypad­ko­wi i w płynną kolum­nę warto wstawić kolej­ną, już ustalo­ną. Płynna będzie stano­wić jedno­li­te tło, natomiast ustalo­na będzie łatwiej­sza w kontro­li.

Przesuwanie kolumn

Co więcej kolum­ny mogą zamie­nić się miejsca­mi. Najlep­szym przykła­dem na zasto­so­wa­nie przesu­wa­nia kolumn może być układ 6/​6 gdzie w parzy­stym wierszu tekst jest po lewej a grafi­ka po prawej. W niepa­rzy­stym wierszu grafi­ka po lewej, tekst po prawej. Na ekranie komór­ki należa­ło by zmienić układ na 12 – 12. Powsta­nie problem, bo będzie­my mieli tekst pod tekstem, zdjęcie pod zdjęciem i wszyst­ko straci czytel­ność. Wystar­czy dla parzy­ste­go wiersza zasto­so­wać zamia­nę. Grafi­ka wyświe­tli się nad tekstem i czytel­ność wraca.

Dla układu powyżej dwóch kolumn w rzędzie też można stoso­wać przesu­wa­nie. Należy jednak pamię­tać, że przeglą­dar­ka czyta kod od lewej do prawej. Jeżeli ustali­my, że przy jakiejś rozdziel­czo­ści pierw­sza i druga kolum­na ma znaleźć się za trzecią, to układ będzie taki: 3 > 2 > 1. System przenie­sie najda­lej pierw­szą kolum­nę.

Znikanie i pojawianie się

Elemen­ty bootstra­pa mogą pojawiać się lub znikać. I to nie tylko kolum­ny, ale nawet kawał­ki tekstu. Praktycz­nie do każde­go znacz­ni­ka można dodać kod, który go wyłączy lub włączy w zależ­no­ści czy mamy komór­kę czy ekran kompu­te­ra. To bardzo ważna opcja gdy chcemy ograni­czyć ilość elemen­tów na ekranie komór­ki, albo wyświe­tlić treści tylko dla użytkow­ni­ków table­tów (np.: oferta najnow­sze­go smart­fo­na).

Trzeba też pamię­tać, że jak coś znika, to konstruk­cja konte­ne­rów może się zawalić. Projek­tant musi spraw­dzić czy nie trzeba posze­rzyć pozosta­łe kolum­ny.

Odstępy i rozstępy

Domyśl­ny margi­nes kolum­ny to 15px z lewej i prawej. Kolum­ny skraj­ne nie mają skraj­ne­go margi­ne­su. Odstęp między dwiema kolum­na­mi to 30px. Odstęp można usunąć wstawia­jąc dodat­ko­wy znacz­nik konte­ne­ra wiersza do kolum­ny.

Kolum­ny można też odsunąć od siebie i wyzna­czo­ną ilość jedno­stek. Może być taki układ: 8+1 /​ 3, gdzie pierw­sza kolum­na będzie miała 8 jedno­stek, druga 3, a odstęp między nimi to jedna jednost­ka wyliczo­na dla ekranu. Układ może być taki tylko dla wybra­nych ekranów albo dla wszyst­kich.

Co jeszcze potrafi Bootstrap

Bootstrap to nie tylko schemat strony, ale także przygo­to­wa­ne gotowe elemen­ty takie jak: mobil­ne menu, przyci­ski, pola formu­la­rzy, chmur­ki podpo­wie­dzi, panele, nagłów­ki itd. Całość do przej­rze­nia pod adresem: http://​getbo​ot​strap​.com/​c​o​m​p​o​n​e​n​ts/

Progra­mi­ści Bootspra­pa zadba­li o to, by użytkow­nik nie musiał już oprogra­mo­wy­wać list numerycz­nych i nieupo­rząd­ko­wa­nych.

Stworzo­no klasy, które automa­tycz­nie ustawia­ją elemen­ty w pionie lub pozio­mie; usuwa­ją znacz­ki punkta­to­ra i podsta­wia­ją inne np z czcion­ki graficz­nej FontA­we­so­me. Domyśl­nej czcion­ki Glyphi­cons nie warto stoso­wać.

Stworzo­no kilka klas kolorów dla oznacza­nia stanów: sukces (zielo­ny), ostrze­że­nie (żółty), zagro­że­nie (czerwo­ny), infor­ma­cja (jasno­nie­bie­ski) oraz domyśl­ny (szary) i pierw­szy (grana­to­wy).

Istnie­je cała paleta różnych przyci­sków, od prostych pojedyn­czych do zgrupo­wa­nych, skompli­ko­wa­nych kombi­na­cji. Przycisk może mieć jedną wartość a może być rozwi­ja­ną listą z której wybie­ra się opcje. Stworzo­no osobne grupy dla przyci­sków pagina­cji lub nawiga­cji (np. okrusz­ki mówią­ce na jakim pozio­mie zagnież­dże­nia jeste­śmy). Można też nadać status 'aktyw­ny'. Wtedy przycisk będzie wyglą­dał jak wciśnię­ty. Można wyłączyć przycisk – będzie on wtedy widocz­ny, ale niemoż­li­wy do wciśnię­cia. Domyśl­nie button ma szero­kość tekstu i swoich margi­ne­sów, albo można nadać mu klasę bloku i wtedy zajmie całą szero­kość bloku lub ekranu.

Bootstrap został zbudo­wa­ny przez progra­mi­stę Twitte­ra i jego podsta­wo­wy wygląd kojarzy się z tą aplika­cją. Wszyst­ko jednak można zmienić lub rozbu­do­wać. Trzeba jednak uważać by nie zachwiać szkie­le­tu, bo o ile twórcy spraw­dzi­li swoje dzieło na wszyst­kich przeglą­dar­kach i gwaran­tu­ją jego działa­nie, to zbyt głębo­ka ingeren­cja może przynieść skutki, których sami nie przewi­dzi­my.

1 komentarz do wpisu “Bootstrap – wprowadzenie”

  1. Dzień dobry! Z tej strony Janusz Kamiń­ski. Pracu­ję w Tempa­la­te­Mon­ster. Nie znala­złem innego sposo­bu aby skontak­to­wać się z Panem. Mam do Pana kilka propo­zy­cji o współ­pra­cę. Proszę odpisać na mój mail, który podałem w formu­la­rze. Dzięku­ję z góry! Pozdra­wiam

    Odpowiedz

Dodaj komentarz

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.