12-sarakkeinen asettelu

Bootstrapin ruudukkosysteemi jakaa sivun 12 sarakkeeseen, tarjoten joustavan ja responsiivisen asettelurakenteen. Tämä mahdollistaa kehittäjille visuaalisesti houkuttelevien ja hyvin jäsenneltyjen suunnitelmien luomisen, jotka mukautuvat saumattomasti eri näyttökokoihin ja laitteisiin.

Ruudukkoluokat

• container: container-luokka ympäröi ja keskittää sisällön kiinteän levyiseen säiliöön. Se lisää täytettä, marginaalia ja varmistaa sisällön oikean kohdistuksen;
• row: row-luokka luo vaakasuuntaisen sarakerivin. Se toimii säiliönä sarakkeille ja varmistaa niiden oikean kohdistuksen ja välistyksen;
• col: Sarakkeet rivissä määritellään col-luokalla. Kehittäjät määrittävät sarakkeiden leveyden col-luokilla, kuten col-6, col-md-4 tai col-lg-3.

Responsiivinen suunnittelu

Bootstrapin ruudukkosysteemi on suunniteltu responsiiviseksi, jolloin sisältö mukautuu dynaamisesti näkymän koon ja laitetyypin mukaan. Kehittäjät voivat käyttää responsiivisia ruudukkoluokkia, kuten col-md-6 tai col-lg-4, määrittääkseen sarakkeiden leveyden eri näyttökokoihin, kuten keskikokoisille tai suurille laitteille.

Huomautus

Bootstrapissa luokat sm, md, lg ja xl edustavat eri näyttökokoja

Esimerkit

Esimerkki 1: Perusruudukkoasettelu

Tässä esimerkissä on säiliö, jossa on yksi rivi ja kolme yhtä leveää saraketta. Jokainen sarake vie yhtä suuren osan rivin leveydestä, mikä muodostaa vaakasuuntaisen asettelun kolmella sarakkeella.

Esimerkki 2: Responsiivinen ruudukkoasettelu

Tässä esimerkissä säiliössä on yksi rivi ja kolme saraketta. Kaksi ensimmäistä saraketta (col-md-6) vievät puolet rivin leveydestä keskikokoisilla ja sitä suuremmilla näytöillä. Kolmas sarake (col-md-12) vie koko rivin leveyden keskikokoisilla ja sitä suuremmilla näytöillä. Tämä varmistaa, että kolmas sarake kattaa koko rivin leveyden.

Responsiivisen ruudukon käyttäytymisen tulos