Bootstrap tinklelio pavyzdžiai

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

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 3“ tinklelio sistema turi keturias klases: xs (telefonai), sm (planšetiniai kompiuteriai), md (staliniai kompiuteriai) ir lg (didesni staliniai kompiuteriai). 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-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

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

.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

Stulpelių išvalymas

Skaidrios plūdės tam tikrose lūžio vietose, kad būtų išvengta nepatogaus įvyniojimo su netolygiu turiniu.

.col-xs-6 .col-sm-3
Pakeiskite peržiūros srities dydį arba patikrinkite pavyzdį telefone.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Poslinkio, stūmimo ir traukimo atstatymas

Iš naujo nustatykite poslinkius, stūmimus ir traukimus tam tikruose pertraukos taškuose.

.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