Bootstrap tinklelio pavyzdžiai

Pagrindiniai tinklelio išdėstymai, kad susipažintumėte su kūrimu Bootstrap tinklelio sistemoje.

Šiuose pavyzdžiuose .themed-grid-colklasė pridedama prie stulpelių, kad būtų pridėta tema. Tai nėra klasė, kuri pagal numatytuosius nustatymus pasiekiama „Bootstrap“.

Penkios tinklelio pakopos

Yra penkios „Bootstrap“ tinklelio sistemos pakopos, po vieną kiekvienam mūsų palaikomam įrenginių diapazonui. Kiekviena pakopa prasideda nuo minimalaus peržiūros srities dydžio ir automatiškai taikoma didesniems įrenginiams, nebent būtų nepaisoma.

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

Trys vienodi stulpeliai

Gaukite tris vienodo pločio stulpelius , pradedant nuo stalinių kompiuterių ir keičiant iki didelių stalinių kompiuterių . Mobiliuosiuose įrenginiuose, planšetiniuose kompiuteriuose ir žemiau stulpeliai bus automatiškai sukrauti.

.col-md-4

Trys vienodi stulpeliai alternatyva

Naudodami .row-cols-*klases galite lengvai sukurti tinklelį su vienodais stulpeliais.

.colvaikas .row-cols-md-3

Trys nelygios kolonos

Gaukite tris stulpelius , pradedant nuo stalinių kompiuterių ir keičiant didelius įvairaus pločio stalinius kompiuterius. Atminkite, kad viename horizontaliame bloke tinklelio stulpeliai turėtų sudaryti iki dvylikos. Negana to, stulpeliai pradedami kaupti nepriklausomai nuo peržiūros srities.

.col-md-3

.col-md-6

.col-md-3

Dvi stulpeliai

Gaukite du stulpelius , pradedant nuo stalinių kompiuterių ir pereinant prie didelių stalinių kompiuterių .

.col-md-8

.col-md-4

Visas plotis, vienas stulpelis

Viso pločio elementams tinklelio klasių nereikia.

Du stulpeliai su dviem įdėtais stulpeliais

Remiantis dokumentacija, įdėti įdėklus paprasta – tiesiog įdėkite stulpelių eilutę esamame stulpelyje. Tai suteikia du stulpelius , pradedant nuo stalinių kompiuterių ir keičiant iki didelių stalinių kompiuterių , o dar du (vienodo pločio) didesniame stulpelyje.

Naudojant mobiliųjų įrenginių dydžius, planšetinius kompiuterius ir mažesnius, šie stulpeliai ir jų įdėtieji stulpeliai bus sukrauti.

.col-md-8

.col-md-6

.col-md-4

Mišrus: mobilusis ir stalinis

Bootstrap v5 tinklelio sistemoje yra šešios klasių pakopos: xs (ypač mažas, šis klasės infiksas nenaudojamas), sm (mažas), md (vidutinis), lg (didelis), xl (x didelis) ir xxl (xx). -didelis). Galite naudoti beveik bet kurį šių klasių derinį, kad sukurtumėte dinamiškesnius ir lankstesnius maketus.

Kiekviena klasių pakopa didėja, o tai reiškia, kad jei planuojate nustatyti tuos pačius pločius md, lg, xl ir xxl, tereikia nurodyti md.

.col-md-8

.col-6 .col-md-4

.stulpelis-6

Mišrus: mobilusis, planšetinis kompiuteris ir stalinis kompiuteris

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

.col-6 .col-lg-4

.col-6 .col-sm-4

Latakai

Su .gx-*klasėmis galima reguliuoti horizontalius latakus.

.colsu .gx-4latakais

Naudokite .gy-*klases vertikaliems latakams valdyti.

.colsu .gy-4latakais

Su .g-*klasėmis galima reguliuoti latakus į abi puses.

.colsu .g-3latakais

Konteineriai

Papildomos klasės, įtrauktos į „Bootstrap v4.4“, leidžia konteinerius, kurie yra 100 % pločio iki konkretaus lūžio taško. v5 prideda naują xxlpertraukos tašką.

.konteineris

.konteineris-sm

.container-md

.container-lg

.container-xl

.container-xxl

.konteineris-skystis