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 pereinant į didelius įvairaus pločio stalinius kompiuterius. Atminkite, kad viename horizontaliame bloke tinklelio stulpeliai turėtų sudaryti iki dvylikos. Negana to, stulpeliai pradeda kauptis, neatsižvelgiant į peržiūros sritį.

.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-xs-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 nustatymas iš naujo

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