HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Bootstrap 4 Przykłady siatki

❮ Poprzedni Następny ❯

Poniżej zebraliśmy kilka przykładów układów siatki Bootstrap 4.

Trzy równe kolumny

Użyj .colklasy na określonej liczbie elementów, a Bootstrap rozpozna, ile jest elementów (i utworzy kolumny o równej szerokości). W poniższym przykładzie używamy trzech elementów col, z których każdy otrzymuje szerokość 33,33%.

przełęcz
przełęcz
przełęcz

Przykład

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

Trzy równe kolumny używające liczb

Możesz także użyć liczb do kontrolowania szerokości kolumny. Upewnij się tylko, że suma wynosi 12 lub mniej (nie jest wymagane użycie wszystkich 12 dostępnych kolumn):

kol-4
kol-4
kol-4

Przykład

<div class="row">
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
</div>

Trzy nierówne kolumny

Aby utworzyć nierówne kolumny, musisz użyć liczb. Poniższy przykład utworzy podział 25%/50%/25%:

kol-3
kol-6
kol-3

Przykład

<div class="row">
  <div class="col-3">col-3</div>
  <div class="col-6">col-6</div>
  <div class="col-3">col-3</div>
</div>

Ustawianie szerokości jednej kolumny

Jednak wystarczy ustawić tylko szerokość jednej kolumny i automatycznie zmienić rozmiar kolumn rodzeństwa wokół niej. Poniższy przykład utworzy podział 25%/50%/25%:

przełęcz
kol-6
przełęcz

Przykład

<div class="row">
  <div class="col">col</div>
  <div class="col-6">col-6</div>
  <div class="col">col</div>
</div>

Więcej równych kolumn

1 z 2
2 z 2
1 z 4
2 z 4
3 z 4
4 z 4
1 z 6
2 z 6
3 z 6
4 z 6
5 z 6
6 z 6

Przykład

<!-- Two equal columns -->
<div class="row">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

<!-- Four equal columns -->
<div class="row">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

<!-- Six equal columns -->
<div class="row">
  <div class="col">1 of 6</div>
  <div class="col">2 of 6</div>
  <div class="col">3 of 6</div>
  <div class="col">4 of 6</div>  
  <div class="col">5 of 6</div>
  <div class="col">6 of 6</div>
</div>

Kolumny wierszy

Możesz także kontrolować, ile kolumn, które powinny pojawić się obok siebie (niezależnie od liczby kolumn), za pomocą .row-cols-*klas:

1 z 2
2 z 2
1 z 4
2 z 4
3 z 4
4 z 4
1 z 6
2 z 6
3 z 6
4 z 6
5 z 6
6 z 6

Przykład

<div class="row row-cols-1">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

<div class="row row-cols-2">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

<div class="row row-cols-3">
  <div class="col">1 of 6</div>
  <div class="col">2 of 6</div>
  <div class="col">3 of 6</div>
  <div class="col">4 of 6</div>  
  <div class="col">5 of 6</div>
  <div class="col">6 of 6</div>
</div>

Więcej nierównych kolumn

1 z 2
2 z 2
1 z 4
2 z 4
3 z 4
4 z 4
1 z 4
2 z 4
3 z 4
4 z 4

Przykład

<!-- Two Unequal Columns -->
<div class="row">
  <div class="col-8">1 of 2</div>
  <div class="col-4">2 of 2</div>
</div>

<!-- Four Unequal Columns -->
<div class="row">
  <div class="col-2">1 of 4</div>
  <div class="col-2">2 of 4</div>
  <div class="col-2">3 of 4</div>
  <div class="col-6">4 of 4</div>
</div>

<!-- Setting two column widths -->
<div class="row">
  <div class="col-4">1 of 4</div>
  <div class="col-6">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

Równa wysokość

Jeśli jedna z kolumn jest wyższa od drugiej (ze względu na wysokość tekstu lub CSS), reszta będzie następować:

Bardzo ważny jest duży ból, nie ma różnicy w jedzeniu i zmysłach. I ból, który mogę dostać w ten weekend. Żaden zły iriure tego nie odbiera, a zril flats czy coś w tym stylu dotowało jednego z nas, który widział piłkę nożną. Żaden nasz ból nie ma być odczytany przeze mnie, powinien zrobić z niego śluz Platon.
przełęcz
przełęcz

Przykład

<div class="row">
  <div class="col">Lorem ipsum...</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Zagnieżdżone kolumny

col-8
kol-6
kol-6
kol-4

Poniższy przykład pokazuje, jak utworzyć układ dwukolumnowy, z kolejnymi dwiema kolumnami wewnątrz jednej z kolumn:

Przykład

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

Klasy responsywne

System siatki Bootstrap 4 ma pięć klas:

  • .col-(ekstra małe urządzenia - szerokość ekranu poniżej 576px)
  • .col-sm-(małe urządzenia - szerokość ekranu równa lub większa niż 576px)
  • .col-md-(urządzenia średnie - szerokość ekranu równa lub większa niż 768px)
  • .col-lg-(duże urządzenia - szerokość ekranu równa lub większa niż 992px)
  • .col-xl-(urządzenia bardzo duże - szerokość ekranu równa lub większa niż 1200px)

Powyższe klasy można łączyć, aby tworzyć bardziej dynamiczne i elastyczne układy.

Wskazówka: Każda klasa skaluje się w górę, więc jeśli chcesz ustawić te same szerokości dla smi md, musisz tylko określić sm.

Ułożone w poziomie

kol-sm-9
col-sm-3
kol-sm
kol-sm
kol-sm

Poniższy przykład pokazuje, jak utworzyć układ kolumn, który zaczyna się ułożony w stos na bardzo małych urządzeniach, zanim stanie się poziomy na większych urządzeniach (sm, md, lg i xl):

Przykład

<div class="row">
  <div class="col-sm-9">col-sm-9</div>
  <div class="col-sm-3">col-sm-3</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>

Mieszać i łączyć

col-6 col-sm-9
col-6 col-sm-3
kol-7 kol-lg-8
kol-5 kol-lg-4
col-sm-3 col-md-6 col-lg-4
col-sm-9 col-md-6 col-lg-8

Przykład

<!-- 50%/50% split on extra small devices and 75%/25% split on larger devices -->
<div class="row">
  <div class="col-6 col-sm-9">col-6 col-sm-9</div>
  <div class="col-6 col-sm-3">col-6 col-sm-3</div>
</div>

<!-- 58%/42% split on extra small, small and medium devices and 66.3%/33.3% split on large and xlarge devices -->
<div class="row">
  <div class="col-7 col-lg-8">col-7 col-lg-8</div>
  <div class="col-5 col-lg-4">col-5 col-lg-4</div>
</div>

<!-- 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large and xlarge devices. On extra small devices, it will automatically stack (100%) -->
<div class="row">
  <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div>
  <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div>
</div>

Brak rynien

Dodaj .no-guttersklasę do .rowkontenera, aby usunąć rynny (dodatkowe miejsce):

Ból sam w sobie jest ważny, ale ból jest wzmacniany przez proces adipisacyjny, ale daję mu czas na jego zmniejszenie, aby wykonać świetną pracę i ból.
Aby w większości przypadków każdy z nas zaczął wykonywać jakąkolwiek pracę, z wyjątkiem czerpania korzyści z jej celów.
Ale abyście mogli zrozumieć, skąd każdy zrodzony błąd jest przyjemnością oskarżania i chwalenia bólu, otworzę całą sprawę i wyjaśnię to, co powiedział ten wynalazca prawdy i jakby architekt błogosławione życie.

Przykład

<div class="row no-gutters">

❮ Poprzedni Następny ❯