Bootstrap 5 ruudukko: pienet laitteet

Pienet laitteet verkkosivuston esimerkki

XSmall Small Medium Large Extra Large XXL
Luokan etuliite .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Näyttöleveys <576px >=576px >=768px >=992px >=1200px >=1400px

Oletetaan, että meillä on yksinkertainen kaksi-sarakkeinen asettelu. Pienissä laitteissa haluamme jakaa sarakkeet 25% / 75%.

Pienet laitteet määritellään näyttöleveydellä576 pikselistä 767 pikseliin。

Pienissä laitteissa käytämme .col-sm-* Luokka.

Lisäämme seuraavat luokat kahteen sarakkeeseen:

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

Seuraava esimerkki tuottaa 25% / 75% erottelun pienissä (sekä keskisuurissa, suurissa, erittäin suurissa ja ekstremisuurissa) laitteissa. Supersuurissa laitteessa se asettuu automaattisesti riveihin (100%):

Esimerkki

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 bg-primary">
      <p>Maailman luonnonsuojeluliitto (WWF), joka perustettiin 29. huhtikuuta 1961, tunnetaan suosituimmasta logoistaan, suojelukoira ...</p>
    </div>
    <div class="col-sm-9 bg-dark">
      <p>1980-luvulla WWF tuli virallisesti Kiinaan, ja se kutsuttiin Kiinan hallituksen pyynnöstä aloittamaan suojelutyön suorittaminen suojelukoira ja sen elinympäristö ...</p>
    </div>
  </div>
</div>

Kokeile itse

Huomioitavaa:Varmista, että summa on tai pienempi kuin 12 (ei tarvitse käyttää kaikkia 12 saatavilla olevaa saraketta):

33.3% / 66.6% erottelussa sinun tulisi käyttää .col-sm-4 ja .col-sm-8（50% / 50% erottelussa sinun tulisi käyttää .col-sm-6 ja .col-sm-6)：

Esimerkki

33.3/66.6% erottelu: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4 bg-primary">
      <p>Maailman luonnonsuojeluliitto (WWF), joka perustettiin 29. huhtikuuta 1961, tunnetaan suosituimmasta logoistaan, suojelukoira ...</p>
    </div>
    <div class="col-sm-8 bg-dark">
      <p>1980-luvulla WWF tuli virallisesti Kiinaan, ja se kutsuttiin Kiinan hallituksen pyynnöstä aloittamaan suojelutyön suorittaminen suojelukoira ja sen elinympäristö ...</p>
    </div>
  </div>
</div>
<!-- 50%/50% jakautuminen: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>Maailman luonnonsuojeluliitto (WWF), joka perustettiin 29. huhtikuuta 1961, tunnetaan suosituimmasta logoistaan, suojelukoira ...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>1980-luvulla WWF tuli virallisesti Kiinaan, ja se kutsuttiin Kiinan hallituksen pyynnöstä aloittamaan suojelutyön suorittaminen suojelukoira ja sen elinympäristö ...</p>
    </div>
  </div>
</div>

Kokeile itse

automaattinen asettelu sarjoille

Bootstrap 5:ssä on yksinkertainen tapa luoda yhtä leveitä sarjoja kaikille laitteille: vain .col-sm-* poistetaan numero ja käytetään vain col-elementtikäytetään .col-sm luokassa. Bootstrap tunnistaa montako sarjaa ja jokainen sarja saa saman leveyden.

jos näyttökokoaalle 576px列itään horisontaalisesti:

<!-- Kaksi sarjaa: 50% leveys kaikilla näytöillä, paitsi erittäin pienillä laitteilla (100% leveys) -->
<div class="row">
  <div class="col-sm">1 of 2</div>
  <div class="col-sm">2 of 2</div>
</div>
<!-- Neljä sarjaa: 25% leveys kaikilla näytöillä, paitsi erittäin pienillä laitteilla (100% leveys) -->
<div class="row">
  <div class="col-sm">1 of 4</div>
  <div class="col-sm">2 of 4</div>
  <div class="col-sm">3 of 4</div>
  <div class="col-sm">4 of 4</div>
</div>

Kokeile itse

Seuraavassa luvussa näytetään, miten erilaisia jakoperäkertoimia lisätään keskikokoisiin laitteisiin.