Kurs Twitter Bootstrap – #2 szkielet witryny

W tej części kursu framework’a Twitter Bootstrap postaram się opisać czym jest oraz jak wygląda scaffolding czyli w wolnym tłumaczeniu szkielet strony. Na początku napiszę, że to właśnie on odpowiada za dostosowanie naszej strony między innymi do wyświetlania jej na telefonach komórkowych.

Pierwszą rzeczą, która zagłębi tajemnicę scaffoldingu będzie grid system.

Czym jest właściwie grid system?

Wspomniany wyżej grid system to nic innego jak podział naszej strony na 12, 16 lub 24 kolumn, jednakże nasz Framework standardowo obsługuję wersję 12-kolumnową. Dzięki takiemu systemowi jesteśmy w stanie stworzyć łatwo i szybko stronę z równo położonymi kolumnami przy czym szerokość strony 12 kolumnowej przy wyłączonym RD (responsive design) będzie stanowić 940px. Po uruchomieniu RD we Frameworku otrzymamy szerokość 724px lub 1170px, wartość ta zależna jest od szerokości okna naszej przeglądarki (najczęściej jest to po prostu rozdzielczość wyświetlanego obrazu na monitorze – przyp. autor).

Prosty grid system.

Użycie tego systemu jest naprawdę banalne o czym przekonacie się za chwilę. Dla przykładu stwórzmy sobie układ 3 kolumn tej samej szerokości (12/3 = 4 – taką szerokość będzie mieć jedna kolumna). Musimy więc utworzyć kontener o klasie row a w nim 3 elementy o klasie span4. Można zauważyć, że wartość po słowie span jest relatywna do szerokości kolumny.

Trzeba zaznaczyć, że każda kolumna w tym trybie ma szerokość określoną poprzez odpowiednią wartość pixeli, a więc nie zmienia się ona przy zmianach szerokości okna przeglądarki.

Nasz kod wygląda więc tak:

Offsety czyli przesunięcie kolumn

Załóżmy, że chcemy zbudować stronę na gridach, jednakże potrzebujemy więcej miejsca między kolumnami niż gwarantuje nam Bootstrap, co więc możemy zrobić ? Wyjścia mamy dwa: utworzyć odpowiedni styl css lub użyć offsetów.

Zasada użycia przesunięć jest taka sama jak gridów czyli aby utworzyć element o szerokości 2 kolumn i przesunięty w prawo o 3 kolumny musimy nadać mu klasę span2 offset3.

Zagnieżdżanie

Grid system oferuje w swojej funkcjonalności możliwość zagnieżdżania kolumn w już istniejących kolumnach. Robimy to tworząc nowy element .row w kolumnie a następnie dodajemy do niego dowolne elementy .span*. Na przykład:

Pływający szkielet czyli Fluid Grid System

Zasada działania pływającego szkieletu nie różni się praktycznie niczym od zwykłego szkieletu. Jedyna rzecz, która różni te dwie rzeczy jest określanie szerokości kolumny. W zwykłym grid system odbywa się to poprzez ustawienie „na sucho” szerokości kolumny w pixelach. Pływający system szkieletów ma to do siebie, że parametr ten jest określany poprzez wartość procentową, a więc dostosowuje się do szerokości okna przeglądarki. Aby „przełączyć” się miedzy tymi systemami należy zmienić klasę row kontenera na row-fluid. Prawda, że proste?

Szablony

Kiedy opakujemy nasze wszystkie „row’y” w nowy element o klasie container spowodujemy, że całość zostanie „zamknięta” w jeden element o stałej szerokości.  Zaletą takiego rozwiązania jest fakt, że żadna kolumna nie rozjedzie się nam poza dozwolony obszar.

Tak jak wiele elementów w Twitter Bootstrap tak i szablony dostosowane są do RD. Aby uczynić nasz główny kontener pływającym należy zmienić jego klasę z container nacontainer-fluid.

Magia Responsive Design w kilku linijkach

Twitter Bootstrap pozwala nam w łatwy i przyjemny sposób spowodować, że nasza strona będzie dostosowana zarówno do tabletów, telefonów komórkowych jak i zwykłych przeglądarek WWW na komputerach. Aby uruchomić te dobrodziejstwo musimy dodać raptem 2 linijki do sekcji head w naszej stronie.

Pierwsza linijka zapewnia, że urządzenie przenośne wyświetli naszą stronę w prawidłowej skali, drugiej już chyba nie musze tłumaczyć.

To nie koniec RD na dziś. Bootstrap bowiem daje nam możliwość ukrywania lub pokazywania różnych elementów strony dla różnych urzadzeń. Odpowiadają za to klasy: visible-phone, visible-tablet, visible-desktop, hidden-phone, hidden-tablet, hidden-desktop.

Więcej dowiecie się na stronie twitter.github.com/bootstrap.