- 001. Klasa container w Bootstrap - jak działa?
- Ustawia szerokość strony:
Klasa container w Bootstrapie tworzy pojemnik o określonej szerokości, który dostosowuje się do różnych rozmiarów ekranu,
zapewniając odpowiednią przestrzeń dla elementów wewnętrznych.
- Automatycznie centrowanie:
Domyślnie container ustawia marginesy, aby zawartość była wyśrodkowana na stronie.
Dzięki temu nie musisz ręcznie ustawiać marginesów ani szerokości dla głównej zawartości strony.
- Responsywność:
container automatycznie dostosowuje szerokość w zależności od rozmiaru ekranu.
W Bootstrapie masz dostęp do dwóch typów pojemników: container vs container-fluid
[!]
Wykorzystanie klasy container w połączeniu z systemem siatki Bootstrap umożliwia stworzenie responsywnych układów, które
automatycznie dostosowują się do rozmiaru ekranu.
002. System siatki w Bootstrap - jak działa Grid?
Bootstrap wykorzystuje system siatki oparty na Flexboxie (CSS Grid w nowszych wersjach), który pozwala tworzyć responsywne układy stron.
System ten dzieli stronę na 12 kolumn, które można dowolnie łączyć i dostosowywać do różnych ekranów.
Struktura opiera się na trzech głównych elementach:
* container – kontener dla całej siatki
* row – wiersz, w którym umieszczane są kolumny
* col – kolumna, która może mieć różne szerokości
Siatka opiera się na podziale na 12 kolumn – szerokość elementu określa się jako część z tych 12.
Jest responsywna – dostosowuje się automatycznie do szerokości ekranu.
Obsługuje różne punkty przerwań (breakpoints) dla różnych rozdzielczości.
Więcej:
- Struktura podstawowej siatki
- Kontenery w siatce (container, container-fluid)
- Określanie szerokości kolumn
- Punkty przerwań (Breakpoints) – responsywność
- Wyrównywanie kolumn (w pionie i poziomie), kolumny o równej wysokości
- Gaps – odstępy między kolumnami