Podobnie jak w wersji 3, bootstrap 4 wymaga umieszczanie elementów wewnątrz kontenera z klasą .container. Są one szczególnie potrzebne, gdy korzysta się z siatki bootstrapa do tworzenia układu strony.
Mamy do wyboru 2 szerokości kontenera:
- kontener o ustalonej szerokości z klasą .container. Jest to responsywny kontener, którego szerokośc zmienia się w momencie przejścia przez punkty wyznaczone przez media query bootstapa – 576px, 768px, 992px i 1200px
- kontener obejmujący całą szerokość strony o klasie .container-fluid
System siatki (grid)
Siatka składa się z kontenera, w którym znajduje się całość, wierszy (row) i kolumn. Wiersze (row) grupują kolumny horyzontalnie. Kolumny powinny znajdować się w wierszach, natomiast treści umieszcza się w kolumnach. Tylko kolumny mogą być bezpośrednimi dziećmi wierszy.
Kolumny posiadają odstępy w poziomie, aby nie przylegały do siebie i aby treść się nie zlewała. Można usunąć te odstępy umieszczając w wierszu (row) klasę .no-gutter. Klasa ta usunie marginesy otaczające kolumny, ale usunie też padding wewnątrz kolumn.
Bootstrap 4 posiada 5 rodzajów kolumn przeznaczonych dla różnych urządzeń (Bootstrap 3 posiadał tylko 4)
- Extra small <576px – .col-
- Small ≥576px – .col-sm-
- Medium ≥768px – .col-md-
- Large ≥992px – .col-lg-
- Extra large ≥1200px – .col-xl-
Klasa .col odpowiada urządzeniu o najmniejszej szerokości ekranu i co za tym idzie pasuje także do szerszych urządzeń.
Liczba kolumn nie może przekraczać 12, ale może być ich mniej. Bootstrap 3 wymagał wpisania szerokości kolumny. W bootstrap 4 wystarczy dodać kolumny z klasą .col i ułożą się one równomiernie tak że będą miały taką samą szerokość. Można tym sposobem stworzyć siatkę złożoną z nieparzystej liczby kolumn, co w bootstrapie 3 było niemożliwe.
Jeśli zachodzi potrzeba aby jedna z kolumn była szersza, można nadać jej klasę z konkretną szerokością (np. .col-5), wtedy pozostałe kolumny rozłożą się równomiernie i będą miały taką samą szerokość, bez względu po której stronie się znajdują.
Jeśli chcemy aby kolumna dostosowywała swoją szerokość do zawartości, można użyć klasy col-{breakpoint}-auto
Nowym rozwiązaniem, dostępnym dla wersji 4, jest możliwość przeniesienia kolumn do nowego wiersza w tym samym wierszu. To znaczy, że jeśli kilka kolumn umieszczonych jest w tym samym row, można dodać między nimi kontenera z klasą .w-100
<div class="w-100"></div>
Wtedy kolejne kolumny ułóżą się równomiernie w nowym wierszu.
Generalnie, jeśli nie ma potrzeby ustawiania określonej szerokości poszczególnych kolumn, wystarczy dodać do każdej kolumny klasę .col i kolumny rozłożą się równomiernie.
Wyrównanie w pionie kolumn
Kolumny w tym samym wierszu można wyrównać w pionie przy użyciu klas dodanych do row. Wówczas wszystkie kolumny wewnątrz row będą wyrównane na tym samym poziomie.
align-items-start
– wyrównanie do góry w pioniealign-items-center
– wyrównanie do środka w pioniealign-items-end
– wyrównanie do dołu w pionie
Można również wyrównać w pionie poszczególne kolumny korzystając z klas umieszczonych wewnątrz col:
<div class="col align-self-start"> </div>
<div class="col align-self-center"> </div>
<div class="col align-self-end"> </div>
Wyrównanie kolumn w poziomie
Uzyskujemy przez dodanie do elementu rodzica czyli .row klasy:
-
justify-content-start
- wyrównanie do lewej -
justify-content-center
- wyrównanie centralnie -
justify-content-end
- wyrównanie do prawej
Istnieją jeszcze dwie klasy justify-content-around i justify-content-between, które rozkładają kolumny równomiernie po obu stronach.
Dodanie tych klas do elementu rodzica powoduje wyrównanie w poziomie wszystkich kolumn tego rodzica. Ma to sens jeśli kolumn jest mniej niż 12 i mają oznaczoną szerokość tak że nie wypełniają całego wiersza.
Kolejność kolumn
Bootstrap 3 pozwalał poprzesuwać kolumny w poziomie przez dodanie klas pull i push. Bootstrap 4 pozwala na ponumerowanie kolumn dzięki klasie .order- z numerem. Klasa ta jest responsywna czyli można ustalic inną kolejność dla różnych urządzeń. To rozwiązanie wydaje się łatwiejsze niż przesuwanie kolumn w lewo lub w prawo.
Offsetting
Offsetting oznacza przesunięcie kolumn w lewo jeśli chcemy aby od lewej została przerwa. W bootstrapie 4 zrezygnowano z tej metody. Została zastąpiona klasą .mr-auto, .ml-auto lub .col-auto.
W dokumentacji w ogóle nie zostało wyjaśnione o co chodzi.
Reasumując, system siatki został znacznie rozbudowany i ułatwiony. De fakto oznaczenia kontenerów, wierszy i kolumn pozostał taki sam. W przypadku migracji strony siatka z bootstrapa 3 będzie funkcjonować poprawnie. Wyjątek stanowią tu offsety i zmian kolejności przy pomocy push i pull. Offest czasami się używa, czyli trzeba będzie go znaleźć i poprawić.
Dodatkowym elementem układu strony są tzw. media object czyli ramka zawierająca miniaturkę i opis ustawione w poziomie. Tego rodzaju elemet jest wielokrotnie używany na stronach www np. jako komentarze na blogach, zajawki wpisów. Zastosowań jest wiele.
Ramki te powstają przy użyciu dwu klas:
- klasa .media stanowi kontener całej ramki, w której umieszcza się zdjęcie i opis
- klasa .media-body stanowi kontener dla opisu
Temat warty uwagi, na pewno informatycy zainteresują się tym postem. Pozdrowienia
Świetny blog. Bardzo lubię blogi o takiej tematyce. Jestem pod ogromnym wrażeniem.
Właśnie przeniosłam się z WP na dedykowany CMS na Bootstrap, świetne narzędzie dla developerów.