Bootstrap 5: Grid System

Sisällysluettelo

    Näytä sisällysluettelo

Verkkojärjestelmä

Bootstrapin ruudukkojärjestelmä on rakennettu flexboxin avulla ja mahdollistaa jopa 12 saraketta koko sivulla.

Jos et halua käyttää kaikkia 12 saraketta yksitellen, voit ryhmitellä sarakkeet yhteen luodaksesi leveämpiä sarakkeita:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
 span 4  span 4  span 4
span 4 span 8
span 6 span 6
span 12

Ruudukkojärjestelmä on herkkä, ja sarakkeet järjestyvät automaattisesti uudelleen näytön koon mukaan.

Varmista, että summa on enintään 12 (ei vaadi, että käytät kaikkia 12 käytettävissä olevaa saraketta).

Ruudukkoluokat

Bootstrap 5 -ruudukkojärjestelmässä on kuusi luokkaa:

  • .col- (erittäin pienet laitteet - näytön leveys alle 576 kuvapistettä)

  • .col-sm- (pienet laitteet - näytön leveys 576 kuvapistettä tai suurempi)

  • .col-md- (keskikokoiset laitteet - näytön leveys 768 kuvapistettä tai suurempi)

  • .col-lg- (suuret laitteet - näytön leveys 992 kuvapistettä tai suurempi)

  • .col-xl- (xsuuret laitteet - näytön leveys 1200 kuvapistettä tai suurempi)

  • .col-xxl- (xxsuuret laitteet - näytön leveys 1400 kuvapistettä tai suurempi)

Yllä olevia luokkia voidaan yhdistää dynaamisempien ja joustavampien asettelujen luomiseksi.

Vinkki: Jokainen luokka skaalautuu, joten jos haluat määrittää samat leveydet sm- ja md, sinun tarvitsee vain määrittää sm.

Bootstrap 5 -ruudukon perusrakenne

Seuraava on Bootstrap 5 -ruudukon perusrakenne:

<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Kokeile itse →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid mt-3">
  <h1>Basic Grid Structure</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The first, second and third row will automatically stack on top of each other when the screen is less than 576px wide.</p>
  
  <!-- Control the column width, and how they should appear on different devices -->
  <div class="row">
    <div class="col-sm-6 bg-primary text-white">50%</div>
    <div class="col-sm-6 bg-dark text-white">50%</div>
  </div>
  <br>
    
  <div class="row">
    <div class="col-sm-4 bg-primary text-white">33.33%</div>
    <div class="col-sm-4 bg-dark text-white">33.33%</div>
    <div class="col-sm-4 bg-primary text-white">33.33%</div>
  </div>
  <br>

  <!-- Or let Bootstrap automatically handle the layout -->
  <div class="row">
    <div class="col-sm bg-primary text-white">25%</div>
    <div class="col-sm bg-dark text-white">25%</div>
    <div class="col-sm bg-primary text-white">25%</div>
    <div class="col-sm bg-dark text-white">25%</div>
  </div>
  <br>
    
  <div class="row">
    <div class="col bg-primary text-white">25%</div>
    <div class="col bg-dark text-white">25%</div>
    <div class="col bg-primary text-white">25%</div>
    <div class="col bg-dark text-white">25%</div>
  </div>
</div>

</body>
</html>

Ensimmäinen esimerkki: luo rivi (<div class="row">). Lisää sitten haluamasi määrä sarakkeita (tunnisteet sopivilla .col-*-*-luokilla). Ensimmäinen tähti (*) edustaa reagointikykyä: sm, md, lg, xl tai xxl, kun taas toinen tähti edustaa numeroa, jonka summan tulisi olla 12 jokaisella rivillä.

Toinen esimerkki: sen sijaan, että lisäisit numeron jokaiseen sarakkeeseen, anna bootstrapin käsitellä asettelua, jotta voit luoda yhtä leveitä sarakkeita: kaksi " col" -elementit=50 % leveys jokaiseen sarakkeeseen, kun taas kolme saraketta=33,33 % leveys jokaiseen sarakkeeseen. Neljä saraketta=25 % leveys jne. Voit myös tehdä sarakkeista reagoivia komennolla .col-sm|md|lg|xl|xxl.

Ruudukkoasetukset

Seuraavassa taulukossa on yhteenveto siitä, kuinka Bootstrap 5 -ruudukkojärjestelmä toimii eri näytöissä:

  Extra small (<576px) Small (>=576px) Medium (>=768px) Large (>=992px) Extra Large (>=1200px) XXL (>=1400px)
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Grid behaviour Horizontal at all times Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints
Container width None (auto) 540px 720px 960px 1140px 1320px
Suitable for Portrait phones Landscape phones Tablets Laptops Laptops and Desktops Laptops and Desktops
# of columns 12 12 12 12 12 12
Gutter width 1.5rem (.75rem on each side of a column) 1.5rem (.75rem on each side of a column) 1.5rem (.75rem on each side of a column) 1.5rem (.75rem on each side of a column) 1.5rem (.75rem on each side of a column) 1.5rem (.75rem on each side of a column)
Nestable Yes Yes Yes Yes Yes Yes
Offsets Yes Yes Yes Yes Yes Yes
Column ordering Yes Yes Yes Yes Yes Yes