Esimerkkejä käynnistysruudukosta
Perusruudukkoasettelut, joiden avulla pääset tutustumaan Bootstrap-ruudukkojärjestelmän rakentamiseen.
Näissä esimerkeissä .themed-grid-col
luokka lisätään sarakkeisiin teeman lisäämiseksi. Tämä ei ole luokka, joka on oletuksena saatavilla Bootstrapissa.
Viisi ruudukkotasoa
Bootstrap grid -järjestelmässä on viisi tasoa, yksi jokaiselle tukemallemme laitevalikoimalle. Jokainen taso alkaa vähimmäisnäkymän koosta ja koskee automaattisesti suurempia laitteita, ellei sitä ohiteta.
Kolme samanlaista saraketta
Hanki kolme yhtä leveää saraketta , jotka alkavat pöytäkoneista ja skaalautuvat suuriin pöytäkoneisiin . Mobiililaitteilla, tableteilla ja alemmilla laitteilla sarakkeet pinoutuvat automaattisesti.
Vaihtoehtona kolme samanlaista saraketta
Luokkien avulla .row-cols-*
voit helposti luoda ruudukon, jossa on yhtäläiset sarakkeet.
.col
lapsi
.row-cols-md-3
.col
lapsi
.row-cols-md-3
.col
lapsi
.row-cols-md-3
Kolme epätasaista saraketta
Saat kolme saraketta , jotka alkavat työpöydistä ja skaalautuvat suuriin , eri leveisiin työpöytiin. Muista, että yhden vaakalohkon ruudukon sarakkeiden yhteenlaskettu summa on kaksitoista. Enemmän kuin se, ja sarakkeet alkavat pinota katseluportista riippumatta.
Kaksi saraketta
Saat kaksi saraketta alkaen pöytäkoneista ja skaalaamalla suuriin pöytäkoneisiin .
Täysleveä, yksi pylväs
Täysleveälle elementille ei tarvita ruudukkoluokkia.
Kaksi saraketta ja kaksi sisäkkäistä saraketta
Dokumentaation mukaan sisäkkäin sijoittaminen on helppoa – laita vain rivi sarakkeita olemassa olevaan sarakkeeseen. Tämä antaa sinulle kaksi saraketta , jotka alkavat työpöydistä ja skaalautuvat suuriin työpöytiin , ja toiset kaksi (samanleveydet) suuremmassa sarakkeessa.
Nämä sarakkeet ja niiden sisäkkäiset sarakkeet pinoutuvat mobiililaitteiden kokoluokissa, tablet-laitteissa ja alaspäin.
Yhdistelmä: mobiili ja pöytätietokone
Bootstrap v4 -ruudukkojärjestelmässä on viisi luokkatasoa: xs (erittäin pieni, tätä luokan infixiä ei käytetä), sm (pieni), md (keskikokoinen), lg (suuri) ja xl (erittäin suuri). Voit käyttää lähes mitä tahansa näiden luokkien yhdistelmää luodaksesi dynaamisempia ja joustavampia asetteluja.
Jokainen luokkataso skaalautuu, eli jos aiot asettaa samat leveydet md:lle, lg:lle ja xl:lle, sinun tarvitsee vain määrittää md.
Yhdistelmä: mobiili, tabletti ja pöytätietokone
Vesikourut
Luokkien avulla .gx-*
vaakakourut voidaan säätää.
.col
.gx-4
vesikourujen
kanssa
.col
.gx-4
vesikourujen
kanssa
.col
.gx-4
vesikourujen
kanssa
.col
.gx-4
vesikourujen
kanssa
.col
.gx-4
vesikourujen
kanssa
.col
.gx-4
vesikourujen
kanssa
Käytä .gy-*
luokkia pystysuorien kourujen ohjaamiseen.
.col
.gy-4
vesikourujen
kanssa
.col
.gy-4
vesikourujen
kanssa
.col
.gy-4
vesikourujen
kanssa
.col
.gy-4
vesikourujen
kanssa
.col
.gy-4
vesikourujen
kanssa
.col
.gy-4
vesikourujen
kanssa
Luokkien avulla .g-*
kourut voidaan säätää molempiin suuntiin.
.col
.g-3
vesikourujen
kanssa
.col
.g-3
vesikourujen
kanssa
.col
.g-3
vesikourujen
kanssa
.col
.g-3
vesikourujen
kanssa
.col
.g-3
vesikourujen
kanssa
.col
.g-3
vesikourujen
kanssa
Säiliöt
Bootstrap v4.4:ään lisätyt lisäluokat sallivat 100 % leveät säilöt tiettyyn keskeytyskohtaan asti. v5 lisää uuden xxl
keskeytyskohdan.