Bootstrap tutorial logo

„Rusztowanie” szablonu / Grid system

autor: Robert

26 czerwca 2013

W tym poście opiszę budowę rusztowania szablonu czyli elementów, które tworzą szkielet strony i wewnątrz których będziemy zamieszczać inne elementy.

Kontener

Jak pewnie zauważyliście, większość stron w Internecie nie jest całej szerokości okna przeglądarki a posiada puste miejsca po bokach. Rozwiązanie takie zwiększa czytelność strony i jest standardową praktyką przy tworzeniu stron.

Bootstrap oferuje klasę .container, która tworzy nam kontener o danej szerokości i automatycznie ustawia po lewej i prawej stronie marginesy by zawartość zawsze była wycentrowana

Dla urządzeń o rozdzielczości <768px kontener ma automatyczną szerokość.

Dla urządzeń o rozdzielczości >768px kontener ma 750px szerokości.

Dla urządzen o rozdzielczości >992px kontener ma 950px szerokości.

Dla urządzen o rozdzielczości >1200px kontener ma 1170px szerokości.

Tak więc tworzenie szablonu rozpoczniemy od stworzenia diva z klasą .container

Gdy jednak chcemy by nasza strona miała szerokość całego okna przeglądarki musimy stworzyć diva z klasą container-fluid

Rząd

Skoro mamy już kontener w którym będziemy umieszczać elementy to teraz przydał by się rząd elementów.

Zastosujemy zatem diva z klasą .row, który będzie mieścił jeden rząd elementów.

Kolumna

Jak pewnie zauważyliście stworzenie szablonu przypomina trochę tworzenie tabeli. Kontener jest tabelą, rząd jest rzędem tabeli. Brakuje nam jedynie kolumn, wewnątrz których będziemy zamieszczać „komórki” tabeli czyli różne elementy strony.

Wewnątrz rzędu możemy umieścić do 12 kolumn! Jeśli przekroczymy tą ilość kolejna kolumna przejdzie do następnej linii.

Wracając do 12 kolumn – Chodzi o to, że dla poszczególnych wielkości ekranu możemy umieścić 12 kolumn „o szerokości 1″* albo 6 kolumn „o szerokości 2″* albo 4 kolumny „o szerokości 3″* albo 2 kolumny „o szerokości 2″* i jedną kolumnę „o szerokości 8″* itd… Ważne by suma wynosiła 12

* – szerokości te są określone dla różnych rozdzielczości ale żeby nie mieszać w tym temacie ustalny, że chodzi o 12 „jednostek”

Rodzaje kolumn

Bootstrap oferuje 4 rodzaje kolumn, kolumny dla rozdzielczości >1200px, dla rozdzielczości >992px, dla rozdzielczości >768px i dla rozdzielczości <768px.

Kolumny dla rozdzielczości >=1200px (Monitory i laptopy)

Zaczniemy od kolumn dla rozdzielczości powyżej 1200px czy znakomitej większości współczesnych komputerów

Aby stworzyć kolumnę używamy klasy col-lg-* gdzie * może mieć wartości 1-12

Kolumny te mają zadaną szerokość jedynie do rozdzielczości 1200px, poniżej niej każda kolumna niezależnie od jej rozmiaru zajmuje całą szerokość kontenera i ustawiają się jedna pod drugą.

Kolumny dla rozdzielczości >=992px (Netbooki)

Aby stworzyć kolumnę używamy klasy col-md-* gdzie * może mieć wartości 1-12

Są to kolumny, które zachowują swoje szerokości do rozdzielczości ekranu 992px, poniżej niej każda kolumna niezależnie od jej rozmiaru zajmuje całą szerokość kontenera i ustawiają się jedna pod drugą.

WAŻNE – gdy nie zastosujemy w divie klasy col-lg-* a jedynie col-md-*, będzie ona działała również dla rozdzielczości >1200px.

Dzięki temu nie musimy za każdym razem tworzyć 2 klas w divie, wystarczy klasa col-md-*, która obsłuzy rozdzielczości >=992px i >1200px

Kolumny dla rozdzielczości >=768px (Tablety)

Aby stworzyć kolumnę używamy klasy col-sm-* gdzie * może mieć wartości 1-12

Są to kolumny, które zachowują swoje szerokości do rozdzielczości ekranu 768px, poniżej niej każda kolumna niezależnie od jej rozmiaru zajmuje całą szerokość kontenera i ustawiają się jedna pod drugą.

Kolumny dla rozdzielczości <768px (Urządzenia mobilne)

Aby stworzyć kolumnę używamy klasy col-xs-* gdzie * może mieć wartości 1-12

Są to kolumny, których rozmiar zmienia się płynnie w miarę zmniejszania się rozdzielczości.

Nie wiem czy wystarczająco jasno wyjaśniłem ideę kolumn, więc może krótkie podsumowanie.

Jeśli tworzymy wygląd strony tylko dla komputerów użyjemy klasy .col-md-12(bo jak pamiętamy nie musimy korzystać z klasy .col-lg-*), następnym elementem w responsywnych stronach internetowych jest widok dla netbooków, korzystamy zatem z klasy .col-md-*. Kolejnym elementem, który musimy obsłużyć są tablety i klasa .col-sm-*. Ostatni element to urządzenia mobilne i klasa .col-xs-*

Oczywiście nie będziemy tworzyli kilku wersji strony a nadamy temu samemu divowi różne wielkości w zależności od rozdzielczości.

Dostosowywanie wielkości kolumn

Jak napisałem powyżej możliwe jest by jedna kolumna na komputerze miała rozmiar 12 jednostek, na netbooku 6, na tablecie 8 a na komórce 4.

Zastosowanie? Wyobraźmy sobie, że na komputerze mamy 4 zdjęcia obok siebie, na tablecie 4 zdjęcia są już za małe i niewidoczne więc ustawimy je w układzie 2×2, dla komórek natomiast już 2 zdjęcia są nieczytelne więc dobrze by było zrobić układ 1×4. Oto przykład jak to rozwiązać

Jak widzicie na powyższym przykładzie mamy 4 divy z obrazkami. Każdy z nich ma klasę .col-md-3, 4*3=12 więc zajmujemy cały rząd(row). Kolejną klasą jest .col-sm-6, 4*6=24 ale jak pamiętamy, jeśli przekroczymy 12 to kolumna przejdzie niżej, dzięki temu mamy 2×2 zdjęcia. Trzecia klasa to .col-xs-12 jak się pewnie domyślacie ma ona szerokość 12 więc divy ułożą się pod sobą. Dzięki jednej linijce tworzyliśmy tak na prawdę 3 galerie 4×1, 2×2 i 1×4 zdjęcia.

Przykład jest dostępny tu:

Strona z przykładami


Post się przydał? Oceń go proszę.
1 Gwiazdka2 Gwiazdki3 Gwiazdki4 Gwiazdki5 Gwiazdek (41 głosów, średnia: 4,88 na 5)
Loading...

Komentarze: 22 komentarze

Robert 22 sierpnia 2014 o 21:45

Witam.
Gratuluje udanego projektu.
Mam pytanie co do Twoich kodow. Uzywajac przegladarki IE 11 (win 7) wydaje sie ze bootstrap jest nie obslugiwany, za Operze, Mozillii wszystko jest ok. Powienienem cos dodac do kodu?

Odpowiedz
Presta 1 października 2014 o 16:09

Bardzo fajnie wszystko jest opisane za co chwała autorowi.
Przydałoby się trochę opisów w postaci struktury, wizualizacji pewnych elementów.

Odpowiedz
    Robert 2 października 2014 o 07:51

    Dziękuję za dobre słowa:) Co do wizualizacji elementów to większość wpisów posiada na dole link do strony z przykładem, bądź elementy te są użyte we wpisie. Dla rusztowania szablonu przykład jak to wygląda znajduje się pod adresem: http://kursbootstrap.pl/examples/bootstrap3-grid.html

    Odpowiedz
MB 17 października 2014 o 14:42

hej,
czegoś tu nie rozumiem.

piszesz o col-md-4, a w innej dokumentacji czytam, że kolumny się tworzy przez np. span4.

to kwestia wersji bootstrapa czy są dwie metody?

Odpowiedz
    Robert 17 października 2014 o 15:28

    W Bootstrapie w wersji 2.x używało się właśnie span*. Bootstrap 3 wprowadził cztery rodzaje kolumn zależne od rozdzielczości, stąd stosowanie col-md-* zamiast span*. Dokumentacja w której przeczytałeś o span* jest przestarzała i dotyczy poprzedniej wersji. Nawet w oficjalnej dokumentacji masz już col-md-* -> http://getbootstrap.com/css/#grid-options

    Odpowiedz
Skoczek 5 listopada 2014 o 12:25

Artykuł bardzo mi pomógł szybko zrozumieć na czym polega tworzenie strony responsywnej w bootstrap. Tekst zwięzły, zrozumiały i konkretny. Dziękuję!

Odpowiedz
Dariusz 10 stycznia 2015 o 20:56

a jak zrobić np. żeby stopka była zawsze na dole strony w tym bootstrapie ? jest na to jakaś klasa czy jak ? do tego jak np. ostylować po swojemu przykładowo menu wykorzystane z bootstrapa ? tworząc swój styl do niego i dopisać klasę czy może edytować styl bostrap. Nie bardzo to kumam jeszcze ehhh dzieki pozdrawima

Odpowiedz
    Robert 12 stycznia 2015 o 08:59

    Jeśli chcesz użyć bootstrapowego menu przyklejonego do dołu strony to masz ten sposób opisany we wpisie -> http://kursbootstrap.pl/opcje-wyswietlania-menu/
    Gdy chcesz stworzyć własną przyklejoną stopkę to poszukaj w Google hasła „Sticky footer” istnieje bardzo wiele rozwiązań i na pewno znajdziesz odpowiednie dla siebie.
    Co do stylowania menu, nie powinno się edytować plików Bootstrapa a jedynie dopisywać swoje. Stwórz sobie plik styles.css, dołącz go do swojego pliku index.html i tam dopisuj własne reguły.

    Odpowiedz
Marcin 30 kwietnia 2015 o 23:58

Witam,
Wspaniały kurs! Mam jednak małą zagwózdkę :( Bootstrap 3.3.4, rozdzielczość 1280×800. Kopiuję powyższe przykłady, a i tak wszystkie kolumny mam jedna pod drugą – pominę fakt, że bez obramowania i koloru tła :( Robię coś nie tak?

Odpowiedz
    Marcin 1 maja 2015 o 00:07

    Pozwolę sam sobie odpowiedzieć, bo właśnie znalazłem odpowiedź :)
    Zamieniłem mojego bootstrap.min.css tym z CDN i teraz śmiga jak należy :)
    Chyba najlepiej będzie jak wszystko pobiorę z CDN :)

    Odpowiedz
      Robert 4 maja 2015 o 07:51

      No a kolory tła ja dodałem by pokazać jak prezentują się kolumny. Normalnie wypełniasz je sam treścią bądź elementami:)

      Odpowiedz
        Josh 10 października 2016 o 18:13

        A powiedz mi czy zakładałeś nowy dokument css by tam zmienić kolor tej tabelki czy robiłeś to w pliku z serwera cdn (jeżeli tak to jak się do tego pliku dostać)

        Odpowiedz
Rafał 6 maja 2015 o 14:44

Witam, a co zrobić z sytuacją taką jak tu: http://stackoverflow.com/questions/22866109/bootstrap-columns-not-aligning-correctly

Odpowiedz
    Robert 12 maja 2015 o 09:51

    Albo ustawiasz min-height każdej kolumny na wysokość najwyższej z nich albo zamykasz wybraną ilość kolumn w .row

    Odpowiedz
Magda 26 listopada 2015 o 11:55

Mam pytanie – czy jest konieczność stosowania zawsze struktury div „row” a w środku divy „col” – czy można np dać sam div row i ładować do niego treści albo wstawiać same divy col bez „rowa”? Jak zachowa się boostrap w takich przypadkach?

Odpowiedz
    Robert 3 grudnia 2015 o 13:17

    Polecam samemu sprawdzić jak się zachowa Bootstrap na różnych rozdzielczościach;) Twórcy piszą, że struktura ma wyglądać tak: .container > .row > .col-*-* i tego musimy się trzymać jeśli nie chcemy mieć przykrych niespodzianek podczas wyświetlania:) Tutaj masz zalecenia odnośnie struktury -> http://getbootstrap.com/css/#grid-intro

    Odpowiedz
Patryk 9 marca 2016 o 19:12

małe pytanko co do konstrukcji. Tutaj są stosowane różne podziały strony, ale czy jest możliwe zastosowanie kolumn o szerokości 7 i 5 = 12? Stosując taki zapis cały czas wyświetla się 4 i 8. Nie wiem czemu.

Odpowiedz
    Robert 10 marca 2016 o 07:44

    A czy nie stosujesz na przykład zapisu col-lg-4 col-md-5 jako dwie klasy jednego diva? Wtedy na dużych ekranach >1280px będziesz miał 4 kolumny a poniżej 1280 będą cztery.

    Odpowiedz
Przemek 22 lipca 2016 o 11:55

Cześć,

wiesz może czy da się napisać na podstawie bootstrapa newsletter w html?
mam taki jednostronicowy przygotowany, ale w klientach pocztowych – gmail, outlook totalnie się rozjeżdża. (w przeglądarce wygląda pięknie) :)

Odpowiedz
    Robert 22 lipca 2016 o 13:41

    Pisanie mailingów rządzi się swoimi prawami. Na przykład szablon maila musi być napisany z użyciem tabelek (tak jak się dawno temu robiło strony) i style najlepiej jakby były umieszczane liniowo. Ogólnie poczytaj sobie o tym bo to dość obszerna dziedzina i jest bardzo wiele trików aby dopasować się pod różne klienty pocztowe, szczególnie jak doszło projektowanie responsywnych maili.

    Ja do tworzenia szablonów maili korzystam z http://tedgoas.github.io/Cerberus/ albo http://foundation.zurb.com/emails.html

    Odpowiedz