Esimerkkejä käynnistysruudukosta

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

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

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 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 v4 -ruudukkojärjestelmässä on viisi luokkatasoa: xs (erittäin pieni), 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 xs:lle ja sm:lle, sinun tarvitsee vain määrittää xs.

.col-12 .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-12 .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