Esimerkkejä käynnistysruudukosta

Perusruudukkoasettelut, joiden avulla pääset tutustumaan Bootstrap-ruudukkojärjestelmän rakentamiseen.

Näissä esimerkeissä .themed-grid-colluokka 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.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4
.col-xxl-4
.col-xxl-4
.col-xxl-4

Kolme samanlaista saraketta

Hanki kolme yhtä leveää saraketta , jotka alkavat pöytäkoneista ja skaalautuvat suuriin pöytäkoneisiin . Mobiililaitteissa, tableteissa ja alemmissa sarakkeet pinoutuvat automaattisesti.

.col-md-4
.col-md-4
.col-md-4

Kolme samanlaista saraketta vaihtoehto

Luokkien avulla .row-cols-*voit helposti luoda ruudukon, jossa on yhtäläiset sarakkeet.

.collapsi .row-cols-md-3
.collapsi .row-cols-md-3
.collapsi .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ä ruudukon sarakkeiden summan tulisi olla enintään kaksitoista yhtä vaakasuuntaista lohkoa kohden. Enemmän kuin se, ja sarakkeet alkavat pinota näkymästä riippumatta.

.col-md-3
.col-md-6
.col-md-3

Kaksi saraketta

Saat kaksi saraketta alkaen pöytäkoneista ja skaalaamalla suuriin pöytäkoneisiin .

.col-md-8
.col-md-4

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 kokoisissa, tablet-laitteissa ja alaspäin.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Yhdistelmä: mobiili ja pöytätietokone

Bootstrap v5 grid -järjestelmässä on kuusi tasoa luokkaa: xs (erittäin pieni, tätä luokan infixiä ei käytetä), sm (pieni), md (keskikokoinen), lg (suuri), xl (x-suuri) ja xxl (xx) -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, xl:lle ja xxl:lle, sinun tarvitsee vain määrittää md.

.col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.sarake-6
.sarake-6

Yhdistelmä: mobiili, tabletti ja pöytätietokone

.col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4

Vesikourut

Luokkien avulla .gx-*vaakakourut voidaan säätää.

.col.gx-4vesikourujen kanssa
.col.gx-4vesikourujen kanssa
.col.gx-4vesikourujen kanssa
.col.gx-4vesikourujen kanssa
.col.gx-4vesikourujen kanssa
.col.gx-4vesikourujen kanssa

Käytä .gy-*luokkia pystysuorien kourujen ohjaamiseen.

.col.gy-4vesikourujen kanssa
.col.gy-4vesikourujen kanssa
.col.gy-4vesikourujen kanssa
.col.gy-4vesikourujen kanssa
.col.gy-4vesikourujen kanssa
.col.gy-4vesikourujen kanssa

Luokkien avulla .g-*kourut voidaan säätää molempiin suuntiin.

.col.g-3vesikourujen kanssa
.col.g-3vesikourujen kanssa
.col.g-3vesikourujen kanssa
.col.g-3vesikourujen kanssa
.col.g-3vesikourujen kanssa
.col.g-3vesikourujen 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 xxlkeskeytyskohdan.

.container
.container-sm
.container-md
.container-lg
.container-xl
.container-xxl
.säiliö-neste