wprowadzamy następujący kod:



Zauważmy, że nastąpiła tu istotna zmiana. Przy obu kolumnach pojawiła się wartość 6. Oznacza to, że i jedna, i druga kolumna są w rzeczywistości złożone z sześciu kolumn. Gdybyśmy chcieli, aby pierwsza kolumna była węższa, moglibyśmy określić jej szerokość, np. jako trzy kolumny, a drugiej przypisać wartość 9 (rys. 4):



Rysunek 4. Podział rzędów na dwanaście kolumn, dwie równe kolumny, dwie kolumny o różnej szerokości

Pierwsza siatka jest gotowa. Jeżeli teraz zmniejszymy rozmiar okna przeglądarki, domyślnie kolumny zostaną przeniesione niżej – w pojedynczym wierszu będzie tylko jedna kolumna (rys. 5).

Rysunek 5. Zmiana wyglądu strony przy mniejszej rozdzielczości

W przypadku małych i bardzo małych rozdzielczości jedna kolumna zazwyczaj wystarcza. Jednak przy rozdzielczości tabletowej taki sposób wyświetlania treści jest niezbyt atrakcyjny. Musimy więc dopasować siatkę tak, aby strona miała sens. Ponownie określamy więc szerokość kolumn.

Załóżmy, że pierwszy rząd w rozdzielczości tabletowej (poziomej) zostanie podzielony na dwa rzędy. Wszystkie kolumny mają być jednakowej szerokości. Wystarczy, że dopiszemy właściwą klasę oraz liczbę kolumn. Jeżeli dla każdej kolumny przyjmiemy, że ma mieć szerokość dwóch kolumn, uzyskamy łącznie dwadzieścia cztery kolumny. Zatem automatycznie po dwunastu kolumnach pozostałe zostaną przeniesione do nowego rzędu:



Kolejny rząd był podzielony na dwie kolumny – powtarzamy zapis, zmieniając jedynie prefiks lg na md.



Podobnie postępujemy z ostatnim rzędem (rys. 6).



Rysunek 6. Dostosowanie siatki do rozdzielczości tabletowej

W przedstawiony sposób działa siatka Bootstrapa. Oczywiście, przygotowując projekt, warto narysować wcześniej makietę, która umożliwi dokładne ustalenie, czy elementy, które umieścimy w kolumnach, zmieszczą się w nich, czy należy je rozlokować zupełnie inaczej.

Podział na kolumny co prawda jest już gotowy, jednak, żeby dokładnie było widać, jak przebiega, warto nadać kolumnom różne kolory tła. Dzięki temu zobaczymy, czy faktycznie dane kolumny mają określoną szerokość czy nie. Tworzymy nowy plik i zapisujemy go pod nazwą style.css w podfolderze css. Następnie musimy w pliku index.html odwołać się do pliku zewnętrznego, który właśnie zapisaliśmy. Najwygodniej takie odwołanie prowadzić bezpośrednio pod odwołanie do pliku bootstrap.min.css. Zmieniamy tylko nazwę pliku:



W pliku style.css ustawimy dwa kolory tła. Tyle wystarczy, aby podział na kolumny był bardziej widoczny. Przydadzą się do tego dwie klasy, np. .tlo1 i .tlo2:

.tlo1 {

background: #037EF6;

}

.tlo2 {

background: #A8B71D;

}

Użyjemy teraz klas, dopisując je obok definicji kolumn. Wracamy więc do pliku index.html i wprowadzamy zmianę:



Zapisujemy plik i odświeżamy go w przeglądarce (rys. 7).

Rysunek 7. Dodanie tła do kolumn za pomocą zewnętrznego pliku CSS

Może się zdarzyć, że będziemy chcieli umieścić w projekcie kolumnę, np. o szerokości dwóch kolumn, jednak w taki sposób, aby znajdowała się na środku. Można, oczywiście, utworzyć dwie puste kolumny z lewej i prawej strony oraz kolumnę środkową, którą wypełnimy. Jednak w takiej sytuacji lepiej będzie skorzystać z klasy offset, dzięki której możemy przesunąć kolumnę o określoną liczbę kolumn.

Jeśli zatem kolumna ma szerokość dwóch kolumn, po odjęciu tej liczby od dwunastu kolumn w rzędzie, pozostaje nam dziesięć kolumn. Aby marginesy lewy i prawy były równe, dzielimy pozostałą liczbę kolumn przez dwa, co daje, rzecz jasna, pięć. O tę właśnie wartość przesuniemy kolumnę. Utwórzmy jeszcze jeden rząd, na razie tylko dla dużych ekranów. Najpierw określamy szerokość kolumny, a następnie jej przesunięcie (rys. 8):



Rysunek 8. Wyśrodkowanie kolumny

Kolumny możemy przesuwać nie tylko względem pierwszej, lecz także względem pozostałych. Najważniejsze, aby zgadzała się łączna liczba dwunastu kolumn. Przypuśćmy, że kolejny wiersz ma mieć dwie kolumny, a każdej z nich odpowiada szerokość dwóch kolumn. Mają one być ustawione tak, aby pierwsza znajdowała się z lewej strony projektu, a druga z prawej. Skoro szerokość tych kolumn to dwie kolumny, łącznie użyte będą już cztery kolumny. Między nimi musi być odstęp o szerokości ośmiu kolumn. Przy pierwszej kolumnie określamy tylko jej szerokość, przy drugiej – najpierw szerokość, a następnie wartość przesunięcia (rys. 9):



Rysunek 9. Rozmieszczenie kolumn za pomocą klasy offset

W analogiczny sposób przesuwa się kolumny w pozostałych rozdzielczościach, co zobaczymy dokładniej przy projekcie strony, który będziemy wykonywali później.

System siatkowy umożliwia również zagnieżdżanie kolumn. To bardzo wygodne rozwiązanie, jeżeli chcemy np. podzielić wiersz na dwie kolumny, kolejny na cztery itp. Zagnieżdżenie sprawi, że właściwości wyższego rzędu (rodzica) będą dziedziczone.

Dodajmy do pliku style.css jeszcze dwa kolory tła:

.tlo3 {

background: #E80C78;

}

.tlo4 {

background: #F8FF19;

}

Następnie utworzymy w pliku index.html nowy wiersz złożony z dwóch kolumn, którym nadamy wcześniej wybrane kolory:



Zwróćmy uwagę, co się zmieniło – do tej pory znacznik zamykający