Bootstrap tinklelio pavyzdžiai
Pagrindiniai tinklelio išdėstymai, kad susipažintumėte su kūrimu Bootstrap tinklelio sistemoje.
Šiuose pavyzdžiuose .themed-grid-col
klasė 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.
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.
Trys vienodi stulpeliai alternatyva
Naudodami .row-cols-*
klases galite lengvai sukurti tinklelį su vienodais stulpeliais.
.col
vaikas
.row-cols-md-3
.col
vaikas
.row-cols-md-3
.col
vaikas
.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.
Dvi stulpeliai
Gaukite du stulpelius , pradedant nuo stalinių kompiuterių ir pereinant prie didelių stalinių kompiuterių .
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.
Mišrus: mobilusis ir stalinis
Bootstrap v4 tinklelio sistema turi penkias klases: xs (ypač mažas, šis klasės infiksas nenaudojamas), sm (mažas), md (vidutinis), lg (didelis) ir xl (ypač 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 ir xl, tereikia nurodyti md.
Mišrus: mobilusis, planšetinis kompiuteris ir stalinis kompiuteris
Latakai
Su .gx-*
klasėmis galima reguliuoti horizontalius latakus.
.col
su
.gx-4
latakais
.col
su
.gx-4
latakais
.col
su
.gx-4
latakais
.col
su
.gx-4
latakais
.col
su
.gx-4
latakais
.col
su
.gx-4
latakais
Naudokite .gy-*
klases vertikaliems latakams valdyti.
.col
su
.gy-4
latakais
.col
su
.gy-4
latakais
.col
su
.gy-4
latakais
.col
su
.gy-4
latakais
.col
su
.gy-4
latakais
.col
su
.gy-4
latakais
Su .g-*
klasėmis galima reguliuoti latakus į abi puses.
.col
su
.g-3
latakais
.col
su
.g-3
latakais
.col
su
.g-3
latakais
.col
su
.g-3
latakais
.col
su
.g-3
latakais
.col
su
.g-3
latakais
Konteineriai
Papildomos klasės, įtrauktos į „Bootstrap v4.4“, leidžia talpyklas, kurios yra 100 % pločio iki konkretaus lūžio taško. v5 prideda naują xxl
pertraukos tašką.