„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ę.

(54 głosów, średnia: 4,87 na 5)

Loading...

---

← Starszy post
Wprowadzenie do Bootstrap
Nowszy post →
Przestawianie kolumn / Offsetting columns

Robert 26 sierpnia 2014 o 08:08

A co konkretnie nie działa? Z tego co widzę w dokumentacji BS to IE11 powinna działać bez problemu. Istnieje mała poprawka dla IE10, spróbuj ją zastosować: http://getbootstrap.com/getting-started/#support-ie10-width

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

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

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 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

Robert 11 października 2016 o 07:22

Korzystałem z pliku https://getbootstrap.com/assets/css/docs.min.css który służy do pisania dokumentacji i na przykład koloruje kolumny itp.

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

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

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

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

Robert 20 stycznia 2017 o 10:42

Musisz wtedy modyfikować szerokość kontenera np:
@media (min-width: 1200px) {
.container {
width: 1600px;
}

Odpowiedz