Bootstrap 5 -verkkorakenteet

Bootstrap 5 -verkostojärjestelmä

Bootstrapin verkkosysteemi rakennetaan flexboxin avulla, ja sivulla on enintään 12 saraketta.

Jos et halua käyttää kaikkia 12 saraketta erikseen, voit yhdistää ne 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

Verkkosysteemi vastaa nopeasti, sarakkeet uudelleenjärjestäytyvät automaattisesti näytön kokoon.

Varmista, että summa on tai pienempi kuin 12 (jos et käytä kaikkia 12 saatavilla olevaa saraketta).

Verkkoluokat

Bootstrap 5 -verkostolla on kuusi luokkaa:

  • .col- (erittäin pienikokoiset laitteet - näyttöleveys on alle 576px)
  • .col-sm- (pienikokoiset laitteet - näyttöleveys on 576px tai suurempi)
  • .col-md- (keskisuuret laitteet - näyttöleveys on 768 pikseliä tai suurempi)
  • .col-lg- (suuret laitteet - näyttöleveys on 992 pikseliä tai suurempi)
  • .col-xl- (xlarge laitteet - näyttöleveys on 1200px tai suurempi)
  • .col-xxl- (xxlarge laitteet - näyttöleveys on 1400px tai suurempi)

Voit yhdistää edellä mainitut luokat luodaksesi dynaamisemman ja joustavamman asettelun.

Vinkki:Jokainen luokka suurenee suhteellisesti, joten jos haluat sm ja md Aseta samat leveys, sinun tarvitsee vain määrittää sm。

Bootstrap 5 -verkoston perusrakenne

Tässä on Bootstrap 5 -verkoston perusrakenne:

/* Kontrolloi sarakkeiden leveyttä ja niiden näyttämistä eri laitteilla */
<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>
/* Tai anna Bootstrap käsitellä asettelua */
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Ensimmäinen esimerkki: luo rivi (<div class="row">). Lisää tarvittava määrä sarakkeita (joka on sopivasti merkitty) .col-*-* luokan merkinnälle). Ensimmäinen tähti (*) edustaa responsiivisuutta: sm, md, lg, xl tai xxl, ja toinen tähti edustaa numeroa, joka on 12 summassa.

Toinen esimerkki: ei anneta jokaiselle col Lisäämällä numeroa, anna bootstrap käsitellä asettelua luodaksesi yhtä leveät sarakkeet: kaksi "col" Elementti = jokainen col on 50% leveä, ja kolme colia = jokainen col on 33.33% leveä. Neljä saraketta = 25% leveä, jne. Voit myös käyttää .col-sm|md|lg|xl|xxl Teemme sarakkeista responsiivisia.

Käsittelemme seuraavaksi joitakin perus Bootstrap 5-verkkorakennusjärjestelmäesimerkkejä.

Kolmen osan sarakkeet

Alla oleva esimerkki näyttää, miten luodaan kolme yhtä leveää saraketta kaikilla laitteilla ja näyttöleveyksillä:

Esimerkki

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

Kokeile itse!

Responsiiviset sarakkeet

Alla oleva esimerkki näyttää, miten luodaan neljä yhtä leveää saraketta aloittaen tableteista ja laajennettuna suureen pöytätietokoneeseen.Leveys alle 576px olevilla mobiililaitteilla tai näytöillä sarakkeet täyttyvät automaattisesti:

Esimerkki

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

Kokeile itse!

Kaksi eri leveyttä olevia responsiivisia sarakkeita

Alla oleva esimerkki näyttää, miten saadaan tableteissa kaksi eri leveyttä olevia sarakkeita ja laajennetaan ne suureen pöytätietokoneeseen:

Esimerkki

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

Kokeile itse!

Vinkki:Opit myöhemmin tässä kurssissa: Verkkorakennusjärjestelmä Lisää tietoa.