Bootstrap 5 kolumn i system siatki | Wyjaśnione

Bootstrap 5 to najnowsza wersja frameworka Bootstrap, która pozwala użytkownikom tworzyć niesamowite strony z szybkimi arkuszami CSS i ulepszoną reaktywność. Bootstrap działa poprzez budowanie systemu siatki, który dzieli stronę internetową na różne wiersze i kolumny, które są owinięte w pojemniku. W tym poście szczegółowo omawia system siatki w Bootstrap 5 wraz z różnymi komponentami.

System siatki w bootstrap 5

System siatki w Bootstrap 5 dzieli stronę na rzędy i kolumny, przy czym każdy wiersz ma 12 kolumn. Jeśli chcesz, możesz użyć wszystkich 12 kolumn, jeśli nie możesz połączyć kolumn, aby tworzyć szersze kolumny. Musisz użyć kolumn w sposób, w jaki suma przyczyni się do 12 lub mniej niż 12. Na przykład możesz użyć wszystkich 12 kolumn o szerokości 1 lub 2 kolumn o szerokości 6. Bez względu na kombinację, suma powinna wynosić 12 lub mniej.

Ten system siatki składa się z Flexbox, dzięki czemu elementy obecne w reakcji siatki oznacza, że ​​układ zmieni strukturę w zależności od urządzenia, na którym jest wyświetlany. Oto wizualna reprezentacja systemu siatki.

Klasy siatki w Bootstrap 5

W celu wykorzystania systemu siatki dostępnych jest wiele klas, które omówiliśmy poniżej. Wszystkie te klasy można pogrupować razem, aby stworzyć bardziej elastyczne i responsywne struktury.

1. -XS- klasa

Ta klasa służy do tworzenia systemu siatki dla dodatkowych małych urządzeń o szerokości ekranu <576px.

2. -SM- klasa

Ta klasa służy do tworzenia układu siatki dla małych urządzeń o szerokości ekranu> = 576px.

3. -Klasa MD

Ta klasa służy do tworzenia systemu siatki dla średnich urządzeń o szerokości ekranu> = 768px.

4. -klasa LG

Ta klasa służy do tworzenia systemu siatki dla dużych urządzeń o szerokości ekranu> = 992px.

5. -klasa XL

Ta klasa służy do tworzenia systemu siatki dla bardzo dużych urządzeń o szerokości ekranu> = 1200px.

6. -xxl- klasa

Ta klasa służy do tworzenia systemu siatki dla bardzo dużych urządzeń o szerokości ekranu> = 1400px.

Notatka: Powyższe klasy mają zdolność do zwiększenia szerokości, dlatego jeśli chcesz na przykład użyć tej samej szerokości dla średnich i dużych klas, musisz określić szerokość tylko dla średniej klasy.

Komponenty systemu siatki

System siatki działa z trzema komponentami, które są omówione w tym rozdziale.

1. Pojemniki

Pojemnik jest podstawowym elementem systemu siatki, bez którego system nie działa. Owijają całą zawartość witryny w nich. Kontenery owijają zawartość w taki sposób, aby zawierają elementy wiersza i elementy wiersza zawierają elementy kolumny.

2. Wydziwianie

Rzędy w systemie siatki są określane jako pozioma grupa kolumn. Te rzędy można wygenerować za pomocą .wiersz klasa i są owinięte w pojemniku albo za pomocą .pojemnik, Lub .Pojemnik-płyn klasa.

3. Kolumny

System siatki składa się z 12 kolumn, które są owinięte w rzędach. Aby utworzyć te kolumny .przełęcz Klasa jest używana wraz z kombinacją dowolnej klasy wymienionych w poprzedniej sekcji. Na przykład, jeśli tworzysz układ dla dodatkowych małych urządzeń, użyj .Col-xs klasa.

Budowanie podstawowego systemu siatki w bootstrap 5

Tutaj zademonstrujemy, w jaki sposób możesz stworzyć podstawowy system siatki w dwóch różnych scenariuszach.

Scenariusz 1

Gdy chcesz kontrolować szerokość kolumn i określić układ dla różnych typów urządzeń, które go wyświetlą.

W ten sposób możesz zbudować podstawową strukturę systemu siatki, gdy chcesz samodzielnie określić szerokość kolumn dla różnych typów urządzeń. .wiersz Klasa służy na przykład do generowania wierszy, powyższe tworzy dwa wiersze. Pierwszy rząd grupuje trzy kolumny, podczas gdy drugi wiersz ma dwie kolumny.

Podczas generowania kolumn użyj .przełęcz klasa wraz z określeniem typu urządzenia i liczbą, która powinna sumować się do 12 dla każdego wiersza.

Scenariusz 2

Kiedy chcesz automatycznie obsługiwać szerokość kolumn.

Teraz, gdy nie okreścisz rozmiaru urządzenia i żadna z nich, która nie sumuje się do 12, to Bootstrap 5 nie będzie obsługiwać szerokości automatycznie, a układ zmieni jego zachowanie zgodnie z typem urządzenia.

Kilka przykładów

Teraz zbadamy kilka przykładów, aby lepiej zrozumieć system siatki i kolumny w Bootstrap 5.

Przykład 1

Tutaj wygenerujemy cztery kolumny o równej szerokości.

Html

W powyższym kodzie, aby utworzyć cztery kolumny o równej szerokości, którego używamy .Pojemnik-płyn klasa, aby uzyskać kontener pełnej szerokości, który obejmuje całkowitą szerokość rzutni. Następnie generujemy wiersz i kończymy cztery kolumny o równej szerokości w tym rzędzie. Każda kolumna otrzymała określoną wyściółkę za pomocą .P-4 Co więcej, klasa wyściółka i użyteczności, każda kolumna otrzymała kolor tła i kolor tekstu.

Wyjście

Kolumny o równych szerokościach zostały pomyślnie utworzone.

Przykład 2

W powyższym przykładzie widzieliśmy, jak możemy zrobić cztery kolumny o równej szerokości. Teraz sprawdźmy te kolumny.

Html

Sprawia, że ​​kolumny reagują za pomocą .Col-MD-3 klasa, która określa, że ​​kolumny będą się na sobie układać, gdy szerokość ekranu jest mniejsza niż 768px.

Wyjście

Gdy szerokość ekranu jest równa i większa niż 768px.

Gdy szerokość ekranu jest mniejsza niż 768px.

Wygenerowano responsywne kolumny.

Przykład 3

Powyższe kolumny responsywne były równe szerokości. Teraz generujmy responsywne kolumny o nierównej szerokości.

Html

.Col-MD-4, I .Col-MD-8 Zajęcia wykonują dwie responsywne kolumny o nierównej szerokości dla średnich urządzeń.

Wyjście

Gdy szerokość ekranu wynosi> = 768px.

Gdy szerokość ekranu jest <768px.

Wygenerowano dwie responsywne kolumny o nierównej szerokości.

Wniosek

System siatki w Bootstrap 5 działa z trzema komponentami, które są pojemnikiem, wierszami i kolumnami. Zasadniczo dzieli stronę na wiersze i kolumny, przy czym każdy wiersz ma 12 kolumn. Kolumny systemu siatki są wykorzystywane w sposób, w jaki suma sumuje się do 12 lub mniej niż 12. Ponadto wykorzystuje niektóre klasy do budowania responsywnych układów dla różnych typów urządzeń. W tym poście szczegółowo omawia system siatki i kolumny za pomocą odpowiednich przykładów.