Esimerkkejä käynnistysruudukosta

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

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.

.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ä yhden vaakalohkon ruudukon sarakkeiden yhteenlaskettu summa on kaksitoista. Enemmän kuin se, ja sarakkeet alkavat pinota katseluportista 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 kokoluokissa, tablet-laitteissa ja alaspäin.

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

Yhdistelmä: mobiili ja pöytätietokone

Bootstrap 3 -ruudukkojärjestelmässä on neljä luokkatasoa: xs (puhelimet), sm (tabletit), md (pöytäkoneet) ja lg (suuremmat pöytäkoneet). Voit käyttää lähes mitä tahansa näiden luokkien yhdistelmää luodaksesi dynaamisempia ja joustavampia asetteluja.

Jokainen luokkataso skaalautuu, mikä tarkoittaa, että jos aiot asettaa samat leveydet xs:lle ja sm:lle, sinun tarvitsee määrittää vain xs.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

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

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

Sarakkeen tyhjennys

Kirkkaat kellukkeet tietyissä keskeytyskohdissa estämään hankalan käärimisen epätasaisen sisällön kanssa.

.col-xs-6 .col-sm-3
Muuta kuvaportin kokoa tai tarkista esimerkki puhelimesta.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Offset, push ja pull nollaa

Nollaa siirtymät, työntää ja vetää tietyissä keskeytyspisteissä.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0