TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak korzystać z układów siatki Bootstrap 5?

11

Bootstrap 5 oferuje potężny system układu siatki, który pomaga łatwo tworzyć układy przyjazne dla urządzeń mobilnych. Istnieje sześć responsywnych punktów przerwania dla różnych rozmiarów urządzeń w systemie układu siatki Bootstrap. W każdej jest 12 kolumn, a mieszając i dopasowując, możesz tworzyć różne układy, które chcesz. System siatki oparty jest na flex boxie i jest w pełni responsywny.

Samouczek dotyczący układu siatki Bootstrap 5

Ten samouczek zawiera następujące tematy:

  1. Podstawy układu siatki
  2. System siatki poziomu 5
  3. Prosta siatka o równej szerokości
  4. Szerokość jednej kolumny i zmiana rozmiaru innych kolumn
  5. Zawartość o zmiennej szerokości
  6. Siatka o równej szerokości w wielu rzędach
  7. Ułożona siatka pozioma
  8. Wyrównanie w pionie
  9. Wyrównanie w poziomie
  10. Siatka bez rynien
  11. Zawinięta siatka kolumn
  12. Zmiana kolejności zawartości kolumny w siatce
  13. Odsunięcie kolumny
  14. Zagnieżdżanie w siatce

1 Podstawy systemu Bootstrap Grid

System siatki wykorzystuje trzy główne klasy CSS do stworzenia potrzebnego układu – .container, .row i .col. Kontener obejmuje cały układ, a następnie wiersze, a następnie kolumny.

  • Użyj klasy .container, aby wyśrodkować zawartość ze stałą szerokością i .container-fluid, aby uzyskać responsywny układ o pełnej szerokości.
  • Możesz użyć klasy .row, aby uwzględnić wszystkie poziome kolumny podzielone na 12 równych szerokości.
  • Umieść rzeczywistą zawartość wewnątrz kolumn, używając klas .col lub .col-*. Na przykład wiersz może zawierać dwie kolumny, takie jak .col-8 + .col-4. Kolumna powinna być bezpośrednim dzieckiem klasy wiersza.
  • Wszystkie kolumny używają flexbox, co oznacza, że ​​proste użycie klasy .col podzieli wiersz na kolumny o równej szerokości. Na przykład, jeśli użyjesz dwóch klas .col w rzędzie, automatycznie zostaną one podzielone na dwa obszary 50%.
  • Możesz jawnie zdefiniować szerokość kolumny, np. .col-sm-8, która zajmie 3/4 (75%) szerokości wiersza.
  • Domyślnie kolumny i wiersze mają dopełnienie i margines dla lepszej widoczności. Możesz usunąć margines i dopełnienie, dodając dodatkową klasę „.noglutter" z „.row”.
  • Bootstrap 5 oferuje sześć punktów przerwania – bardzo mały (xs), mały (sm), średni (md), duży (lg), bardzo duży (xl) i bardzo duży (xxl).
  • Wszystkie warstwy punktów przerwania domyślnie używają klasy .col. Wszelkie inne użyte klasy zostaną zastosowane do wszystkich urządzeń wyższego poziomu. Na przykład .col-sm-4 (mały) zostanie zastosowany do małych, średnich, dużych i bardzo dużych urządzeń.

System siatki 2 poziomu 6

Poniższa tabela przedstawia sześć poziomów punktów przerwania oferowanych w Bootstrap 5:

Siatka Bardzo mały Mały Średni Duży Bardzo duży Extra Extra Large
Punkt przerwania <576 pikseli ≥576 pikseli ≥768px ≥992px ≥1200px ≥1400 pikseli
Klasa CSS .z- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Maksymalna szerokość kontenera Brak (automatycznie) 540px 720px 960px 1140px 1320px
  • Kolumny — każdy wiersz jest podzielony na 12 kolumn o równej szerokości.
  • Gutter Width – 15 pikseli z każdej strony kolumny, łącznie 30px.
  • Zagnieżdżanie — tak, kolumny można zagnieżdżać w innej kolumnie.
  • Kolejność kolumn — tak, można zmienić kolejność zawartości w dowolnej kolumnie w wierszu.

Pokażmy różne przykłady, aby lepiej zrozumieć siatki:

3 Prosta siatka o równej szerokości

Utwórz prostą siatkę z równymi kolumnami, używając tylko klas „.col”. W przypadku używania klas „.col” wiersz zostanie automatycznie podzielony na kolumny o równej szerokości. Na przykład, jeśli użyjesz dwóch klas „.col”, wiersz zostanie podzielony na dwie 1/2+1/2 kolumny. Poniżej znajduje się przykładowy kod tworzenia kolumn 1/2+1/2 i 1/3+1/3+1/3 przy użyciu prostych klas „.col”.

<div class="container"> <div class="row"> <div class="col"> .col </div> <div class="col"> .col </div> </div> <div class="row"> <div class="col"> .col </div> <div class="col"> .col </div> <div class="col"> .col </div> </div> </div>

Równe kolumny zostaną pokazane w przeglądarce, jak poniżej:

Jak korzystać z układów siatki Bootstrap 5?

4 Szerokość jednej kolumny i zmiana rozmiaru innych kolumn

System siatki Bootstrap pozwala zdefiniować szerokość jednej kolumny, a pozostałe kolumny w tym samym wierszu zostaną automatycznie dopasowane. Na przykład, jeśli zdefiniujesz „col + col-6 + col” w wierszu, zostanie on automatycznie podzielony jak kolumny „1/3+1/6+1/3″. Poniżej znajdują się dwa przykłady definiowania jednej kolumny, a pozostałe dwie pozostałe kolumny zostaną odpowiednio dostosowane.

Jak korzystać z układów siatki Bootstrap 5?

Poniżej znajduje się kod do dostosowywania kolumn otaczających kolumnę o zdefiniowanej szerokości:

<div class="container"> <div class="row"> <div class="col"> .col </div> <div class="col-6"> .col-6 </div> <div class="col"> .col </div> </div> <div class="row"> <div class="col"> .col </div> <div class="col-5"> .col-5 </div> <div class="col"> .col </div> </div> </div>

5 Zmienna Szerokość Zawartość

Szerokość kolumn można ograniczyć do rzeczywistej zawartości za pomocą klasy „.col-{punkt przerwania}-auto”, na przykład „.col-md-auto”.

Jak korzystać z układów siatki Bootstrap 5?

Środkowe kolumny w powyższym przykładzie są automatycznie dostosowywane do szerokości treści. Poniżej znajduje się kod dla powyższego układu siatki:

<div class="container"> <div class="row justify-content-md-center"> <div class="col col-lg-2"> .col .col-lg-2 </div> <div class="col-md-auto"> .col-md-auto (variable width) </div> <div class="col col-lg-2"> .col .col-lg-2 </div> </div> <div class="row"> <div class="col"> .col </div> <div class="col-md-auto"> .col-md-auto (variable width) </div> <div class="col col-lg-2"> .col .col-lg-2 </div> </div> </div>

6 Siatka o równej szerokości w wielu rzędach

Po prostu utwórz układ wielu kolumn w wierszu, stale używając klas „.col”. Wystarczy wstawić klasę „.w-100″, w której wymagany jest punkt przerwania.

Jak korzystać z układów siatki Bootstrap 5?

Poniżej znajduje się kod do tworzenia wielu wierszy o równej szerokości przy użyciu jednej klasy „row”.

<div class="row"> <div class="col">.col</div> <div class="col">.col</div> <div class="w-100"></div> <div class="col">.col</div> <div class="col">.col</div> <div class="w-100"></div> <div class="col">.col</div> <div class="col">.col</div> </div>

7 Ułożona siatka pozioma

Możesz utworzyć układ siatki piętrowej, używając klas „.col-sm-“, które zostaną rozwinięte do siatki poziomej na komputerze.

Jak korzystać z układów siatki Bootstrap 5?

Poniżej znajduje się kod do tworzenia piętrowego układu siatki poziomej, jak pokazano powyżej.

<div class="row"> <div class="col-sm-8">.col-sm-8</div> <div class="col-sm-4">.col-sm-4</div> </div> <div class="row"> <div class="col-sm">.col-sm</div> <div class="col-sm">.col-sm</div> <div class="col-sm">.col-sm</div> </div>

8 Wyrównanie w pionie

Pionowe wyrównanie treści wewnątrz kolumny można dostosować, dodając jedną z trzech następujących klas z klasą „.row”, jak poniżej:

<div class="row align-items-start"> - Align content vertical top <div class="row align-items-center"> - Align content vertical middle <div class="row align-items-end"> - Align content vertical bottom

9 Wyrównanie w poziomie

Podobnie jak w przypadku wyrównania w pionie, możesz również dostosować wyrównanie w poziomie kolumn, jak poniżej:

<div class="container"> <div class="row justify-content-start"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-center"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-end"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-around"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-between"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> </div>

Spowoduje to w przeglądarce następujący wynik:

Jak korzystać z układów siatki Bootstrap 5?

Siatka 10 bez rynien

Domyślnie kolumny będą miały poziome dopełnienie, a wiersze będą miały ujemne marginesy poziome dla lepszego wyrównania. Możesz usunąć te marginesy i dopełnienia, używając klasy „bez rynien” z „wierszem”, jak pokazano poniżej.

<div class="row no-gutters"> <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div> <div class="col-6 col-md-4">.col-6 .col-md-4</div> </div>

Da to następujący wynik:

Jak korzystać z układów siatki Bootstrap 5?

11 Zawinięta siatka kolumn

Jeśli masz więcej niż 12 kolumn w rzędzie, kolumny zostaną automatycznie zawinięte do następnego wiersza. Na przykład z poniższymi dwiema kolumnami zmieszczą się w pierwszym wierszu (9+2=11), podczas gdy trzecia i czwarta kolumna zostaną zawinięte do nowej linii.

<div class="row"> <div class="col-9">.col-9 (Row 1)</div> <div class="col-2">.col-2 (Row 1)</div> <div class="col-4">.col-4 (Row 1)</div> <div class="col-5">.col-5 (Row 1)</div> </div>

Zawinięte kolumny będą wyglądać jak poniżej:

Jak korzystać z układów siatki Bootstrap 5?

Zmiana kolejności zawartości 12 kolumn w siatce

Bootstrap pozwala na zmianę kolejności zawartości kolumny niezależnie od pozycji w rzędzie. Na przykład w poniższym układzie siatki używane są trzy kolumny.

<div class="container"> <div class="row"> <div class="col"> First .col No order </div> <div class="col order-12"> Second .col .order-12 moved to last </div> <div class="col order-1"> Third .col .order-1 moved to first </div> </div> </div>

Wynik wygląda jak poniżej, bez uporządkowanej kolumny, która będzie miała pierwszeństwo przed wszystkimi innymi uporządkowanymi kolumnami i zostanie pokazana w pierwszej kolumnie. Treść wewnątrz kolumny korzystająca z klasy „order-12″ zostanie przeniesiona na ostatnią pozycję. A treść w kolumnie za pomocą „kolejności-1″ zostanie przeniesiona na środkową (pierwszą) pozycję.

Jak korzystać z układów siatki Bootstrap 5?

13 Przesunięcie kolumny

Z Bootstrap 4 porzucili funkcję przesunięcia kolumn ze względu na użycie układu siatki flexbox. Ale nadal możesz odsunąć kolumny, używając klas narzędzi do marż, takich jak „ml-auto”, „mr-auto” itp.

<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div> </div> <div class="row"> <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div> <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div> </div> <div class="row"> <div class="col-auto mr-auto">.col-auto .mr-auto</div> <div class="col-auto">.col-auto</div> </div>

Poniżej znajduje się wynik przesunięcia kolumny przy użyciu klas depozytów:

Jak korzystać z układów siatki Bootstrap 5?

14 Zagnieżdżanie w siatce

Możesz także zagnieździć kolumny w innych kolumnach, jak pokazano poniżej:

<div class="row"> <div class="col-sm-9"> Level 1: .col-sm-9 <div class="row"> <div class="col-8 col-sm-6"> Level 2: .col-8 .col-sm-6 </div> <div class="col-4 col-sm-6"> Level 2: .col-4 .col-sm-6 </div> </div> </div> </div>

Da to następujący wynik:

Jak korzystać z układów siatki Bootstrap 5?

Wniosek

Jak widać, istnieje wiele domyślnych układów, które można utworzyć za pomocą systemu układu siatki Bootstrap 5. Możliwe jest również tworzenie niestandardowego CSS w celu tworzenia niestandardowych układów lub modyfikowania jednego z domyślnych układów. Solidny układ siatki Flexbox i komponenty wielokrotnego użytku sprawiają, że Bootstrap 5 jest mocniejszy niż poprzednia wersja.


Dowiedz się o Bootstrapie 5 (Indeks )


Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów