System siatki Bootstrap 5 | Wyjaśnione
System siatki
System siatki Bootstrap dzieli stronę na 12 kolumn. Jak w poniższym przykładzie .Klasa col służy do tworzenia kolumn, a cały system siatki zależy od tego .klasa col. Ten system siatki jest najlepszym podejściem do układania zawartości w poziomie i umożliwienia maksymalnego wykorzystania strony.
Kod
.przełęcz
.przełęcz
.przełęcz
.przełęcz
.przełęcz
.przełęcz
.przełęcz
.przełęcz
.przełęcz
.przełęcz
.przełęcz
.przełęcz
Aby wykonać różne układy, których używamy .wiersz I .przełęcz klasa.
Klasa col bez żadnego rozmiaru
Jeśli nie określiłeś rozmiaru kolumn, .przełęcz klasa automatycznie dzieli wiersz jednakowo zgodnie z liczbą Div z .przełęcz Zajęcia w nim.
Kod
.przełęcz
.przełęcz
.przełęcz
W tym przykładzie dodam tylko trzy divy z .przełęcz klasa bez określania liczby kolumn, ale .przełęcz Klasa automatycznie podaje scalanie 4 kolumn do każdego div i obejmuje łącznie 12 kolumn.
Klasa col z rozmiarem
Jeśli określone są rozmiary kolumn, to .Klasa COL dzieli wiersz zgodnie z określonym rozmiarem od 0-12.
Kod
.Col-4
.Col-6
.Kol-2
W tym przykładzie dodam trzy divy z .przełęcz Zajęć i określ liczbę kolumn jako 4, 6 i 2. Teraz te trzy kolumny nadal obejmują 12 kolumn, ale teraz o różnych rozmiarach. Pomaga to użytkownikowi zarządzać treścią na stronie i wykorzystywać ją maksymalnie.
Przykład 2
Ten przykład dotyczy problemu, w którym rozmiar DIV przekracza 12.
Kod
.Col-4
.Col-6
.Col-5
Teraz w tym przykładzie pierwsze 2 divy obejmują już 10 kolumn w wierszu, pozostawiając miejsce dla dwóch kolejnych kolumn, ale trzecia div jest wyposażona w kolumny rozmiar 5, co powoduje przeniesienie trzecie 2 kolumny miejsce w pierwszym rzędzie pustym. Aby uniknąć tego rodzaju problemu, zawsze pamiętaj, aby podzielić kolumny w sposób, który obejmuje łącznie 12 kolumn z rzędu.
Klasa col z punktami przerwania
.przełęcz Klasa jest również używana z różnymi punktami przerwania do kontrolowania widoku treści na różnych ekranach.
- .Col-xxl
- .Col-xl
- .col-lg
- .Col-md
- .Col-sm
Kod
.Col-md
.Col-md
.Col-md
W powyższym przykładzie tworzone są trzy divs za pomocą .Col-md Klasa jest taka jak .przełęcz klasa, ale różnica między prostym .przełęcz klasa i .Col-md Klasa jest taka .przełęcz klasa rozkładaj kolumny w równym stopniu do każdej div, a następnie działaj tak samo na każdym rozmiarze ekranu, ale .Col-md klasa również rozkładaj kolumny jednakowo między każdą div, ale pozostaje taka sama XXL, XL, LG I MD rozmiary ekranu, ale gdy tylko znajduje się poniżej średniego rozmiaru ekranu, wszystkie Divy obejmują całe 12 kolumn, które powodują wykonanie trzech wierszy i układają je w pionie.
Klasa col z punktami przerwania i rozmiarami
.przełęcz Klasa jest również używana z różnymi punktami przerwania w celu kontrolowania widoku treści na różnych ekranach, ale aby zobaczyć te klasy w akcji.
- .przełęcz-*
- .Col-xxl-*
- .Col-xl-*
- .col-lg-*
- .col-md-*
- .col-sm-*
Wymień * liczbą od 0-12.
Kod
.Col-MD-4
.Col-MD-6
.Col-MD-2
W powyższym przykładzie mam zastosowanie .col-md-* Klasa na trzech divach o rozmiarze 4,6,2, ponieważ pokazała, że ta klasa ma zastosowanie na podwójnym dodatkowym (xxl), bardzo dużym (XL), dużym (LG) i średnim (MD) ekranowym rozmiarowi ekranu przechodzi poniżej średniego (MD) Ekran wszystkich divów rozmiaru ich i pokrywają 12 kolumn, które powodują 3 wiersze, a każdy wiersz jest ułożony w pionowo. W ten sposób tworzone są dynamiczne i elastyczne układy.
Wniosek
Do pracy w siatce bootstrap, użyj .wiersz klasa i owinąć .przełęcz klasa Jeśli chcesz przypisać równe kolumny do każdej div, ale jeśli chcesz przypisać różną liczbę kolumn do każdej div, użyj .col- rozmiar (0-12) do Divów jako Twojego wymogu. Jeśli jednak chcesz uczynić bardziej elastycznym i dynamicznym użyciem układu .przełęcz klasa z Punkty przerwania (xxl/xl/lg/md/sm), Plus określ ich rozmiary (0-12) zbyt .col- Breakpoint-rozmiar.