Siatka: duże urządzenia Bootstrap 5

Rekomendacje kursu:

Duży przykład siatki urządzeń XSmall Small Medium Large Extra Large
XXL przedrostek klasy .col- .col-sm- .col-md- .col-lg- .col-xl-
.col-xxl- Szerokość ekranu <576px >=768px >=992px >=1200px >=1400px

W poprzednim rozdziale pokazaliśmy przykład instancji siatki, która zawiera klasy dla małych i średnich urządzeń. Użyliśmy dwóch divów (kolumn) i podziału 25%/75% na małych urządzeniach oraz 50%/50% na średnich urządzeniach:

<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>

Ale na dużych urządzeniach, projekt podziału 33% / 66% może być lepszy.

Duże urządzenia są zdefiniowane jako szerokość ekranuod 992 pikseli do 1199 pikseli.

Dla dużych urządzeń, użyjemy .col-lg-* klasy:

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

Na małych urządzeniach, użyj zawierającej -sm- klas. Na średnich urządzeniach, użyj zawierającej -md- klas. Na dużych urządzeniach, użyj zawierającej -lg- klas.

Poniżej znajduje się przykład, który spowoduje podział na 25%/75% na małych urządzeniach, na 50%/50% na średnich urządzeniach oraz na 33%/66% na dużych, xlarge i xxlarge urządzeniach. Na urządzeniach extra small, automatycznie będzie się układać (100%):

Przykład

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4">
      <p>World Wide Fund for Nature (WWF), założony 29 kwietnia 1961 roku, jego logo to panda ...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8">
      <p>W 1980 roku WWF oficjalnie przyszedł do Chin, został zaproszony przez rząd chiński, aby prowadzić ochronę pandy i jej siedliska ...</p>
    </div>
  </div>
</div>

Spróbuj sam

Uwaga:upewnij się, że suma wynosi lub jest mniejsza niż 12 (nie jest wymagane użycie wszystkich 12 dostępnych kolumn):

używamy Large

w poniższym przykładzie, określamy tylko .col-lg-6 klasy (bez .col-md-* i/lub .col-sm-*）。Oznacza to, że duże, xlarge i xxlarge urządzenia będą dzielić 50%/50%. Jednak dla urządzeń średnich, małych i extra małych będzie układane pionowo (szerokość 100%):

Przykład

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6">
      <p>World Wide Fund for Nature (WWF), założony 29 kwietnia 1961 roku, jego logo to panda ...</p>
    </div>
    <div class="col-lg-6">
      <p>W 1980 roku WWF oficjalnie przyszedł do Chin, został zaproszony przez rząd chiński, aby prowadzić ochronę pandy i jej siedliska ...</p>
    </div>
  </div>
</div>

Spróbuj sam

automatyczne układanie kolumn

w Bootstrap 5 istnieje prosty sposób tworzenia równo szerokich kolumn na wszystkich urządzeniach: wystarczy od .col-lg-* usuń liczby i używaj tylko elementów klasy .col-lg klasa. Bootstrap rozpozna liczbę kolumn i każda z nich będzie miała tę samą szerokość.

jeśli rozmiar ekranumniej niż 992px, kolumny będą układane poziomo:

<!-- Dwie kolumny: na dużych i większych urządzeniach szerokość wynosi 50% -->
<div class="row">
  <div class="col-lg">1 z 2</div>
  <div class="col-lg">2 z 2</div>
</div>
<!-- Cztery kolumny: na dużych i większych urządzeniach szerokość wynosi 25% -->
<div class="row">
  <div class="col-lg">1 z 4</div>
  <div class="col-lg">2 z 4</div>
  <div class="col-lg">3 z 4</div>
  <div class="col-lg">4 z 4</div>
</div>

Spróbuj sam