Bootstrap ցանցի օրինակներ

Հիմնական ցանցային դասավորություններ՝ ձեզ ծանոթացնելու Bootstrap ցանցային համակարգի կառուցմանը:

Երեք հավասար սյունակներ

Ստացեք երեք հավասար լայնությամբ սյունակներ ՝ սկսած աշխատասեղաններից և ընդլայնվելով մինչև մեծ աշխատասեղանները : Բջջային սարքերում, պլանշետներում և ներքևում սյունակները ավտոմատ կերպով կդասավորվեն:

.col-md-4
.col-md-4
.col-md-4

Երեք անհավասար սյունակ

Ստացեք երեք սյունակ ՝ սկսած աշխատասեղաններից և մեծացնելով տարբեր լայնությունների մեծ աշխատասեղանները: Հիշեք, որ մեկ հորիզոնական բլոկի համար ցանցի սյունակները պետք է գումարվեն մինչև տասներկու: Դրանից ավելին, և սյունակները սկսում են կուտակվել, անկախ տեսադաշտից:

.col-md-3
.col-md-6
.col-md-3

Երկու սյունակ

Ստացեք երկու սյունակ ՝ սկսած աշխատասեղաններից և չափավորելով մինչև մեծ աշխատասեղանները :

.col-md-8
.col-md-4

Ամբողջ լայնությունը, մեկ սյունակ

Ամբողջ լայնությամբ տարրերի համար ցանցային դասեր չեն պահանջվում:

Երկու սյունակ երկու սյունակներով

Փաստաթղթերի համաձայն, բնադրումը հեշտ է. պարզապես սյունակների շարք դրեք գոյություն ունեցող սյունակում: Սա ձեզ տալիս է երկու սյունակ , որոնք սկսվում են աշխատասեղաններից և չափվում են մեծ աշխատասեղանների վրա, ևս երկու (հավասար լայնություններ) ավելի մեծ սյունակում:

Բջջային սարքերի չափսերի, պլանշետների և ավելի փոքր չափերի դեպքում այս սյունակները և դրանց մեջ դրված սյունակները կդասավորվեն:

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Խառը` բջջային և աշխատասեղան

Bootstrap 3 ցանցային համակարգը ունի դասերի չորս մակարդակ՝ xs (հեռախոսներ), sm (պլանշետներ), md (աշխատասեղաններ) և lg (ավելի մեծ աշխատասեղաններ): Դուք կարող եք օգտագործել այս դասերի գրեթե ցանկացած համակցություն՝ ավելի դինամիկ և ճկուն դասավորություններ ստեղծելու համար:

Դասերի յուրաքանչյուր մակարդակ մեծանում է, այսինքն, եթե նախատեսում եք սահմանել նույն լայնությունները xs-ի և sm-ի համար, ապա ձեզ հարկավոր է միայն նշել 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

Խառը` բջջային, պլանշետ և աշխատասեղան

.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

Սյունակի մաքրում

Մաքրել լողացողները կոնկրետ բեկման կետերում` անհավասար բովանդակությամբ անհարմար փաթաթումը կանխելու համար:

.col-xs-6 .col-sm-3
Չափափոխեք ձեր տեսադաշտը կամ ստուգեք այն ձեր հեռախոսում օրինակի համար:
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Օֆսեթ, հրում և քաշում զրոյացնում է

Վերականգնել շեղումները, հրումներն ու ձգումները կոնկրետ ընդմիջման կետերում:

.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