Bootstrap tinklelio pavyzdžiai

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

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-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

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
.col-md-4
.col-md-4

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-6
.col-md-4

Mišrus: mobilusis ir stalinis

„Bootstrap v4“ tinklelio sistemoje yra penkios klasės: xs (ypač mažas), 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 vienodus xs ir sm pločius, tereikia nurodyti 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
.stulpelis-6
.stulpelis-6

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

.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