Bootstrap ցանցի օրինակներ
Հիմնական ցանցային դասավորություններ՝ ձեզ ծանոթացնելու Bootstrap ցանցային համակարգի կառուցմանը:
Այս օրինակներում .themed-grid-col
դասը ավելացվում է սյունակներին՝ որոշակի թեմա ավելացնելու համար: Սա դաս չէ, որը լռելյայն հասանելի է Bootstrap-ում:
Հինգ ցանցային մակարդակ
Bootstrap ցանցային համակարգի հինգ մակարդակ կա՝ մեկական մեր կողմից աջակցվող սարքերի յուրաքանչյուր շարքի համար: Յուրաքանչյուր մակարդակ սկսվում է տեսադաշտի նվազագույն չափից և ինքնաբերաբար կիրառվում է ավելի մեծ սարքերի վրա, եթե չվերացվի:
Երեք հավասար սյունակներ
Ստացեք երեք հավասար լայնությամբ սյունակներ ՝ սկսած աշխատասեղաններից և ընդլայնվելով մինչև մեծ աշխատասեղանները : Բջջային սարքերում, պլանշետներում և ներքևում սյունակները ավտոմատ կերպով կդասավորվեն:
Երեք հավասար սյունակների այլընտրանք
Օգտագործելով .row-cols-*
դասերը, դուք հեշտությամբ կարող եք ստեղծել հավասար սյունակներով ցանց:
.col
-ի երեխա
.row-cols-md-3
.col
-ի երեխա
.row-cols-md-3
.col
-ի երեխա
.row-cols-md-3
Երեք անհավասար սյունակ
Ստացեք երեք սյունակ ՝ սկսած աշխատասեղաններից և մեծացնելով տարբեր լայնությունների մեծ աշխատասեղանները: Հիշեք, որ մեկ հորիզոնական բլոկի համար ցանցի սյունակները պետք է գումարվեն մինչև տասներկու: Դրանից ավելին, և սյունակները սկսում են կուտակվել, անկախ տեսադաշտից:
Երկու սյունակ
Ստացեք երկու սյունակ ՝ սկսած աշխատասեղաններից և չափավորելով մինչև մեծ աշխատասեղանները :
Ամբողջ լայնությունը, մեկ սյունակ
Ամբողջ լայնությամբ տարրերի համար ցանցային դասեր չեն պահանջվում:
Երկու սյունակ երկու սյունակներով
Փաստաթղթերի համաձայն, բնադրումը հեշտ է. պարզապես սյունակների շարք դրեք գոյություն ունեցող սյունակում: Սա ձեզ տալիս է երկու սյունակ , որոնք սկսվում են աշխատասեղաններից և չափվում են մեծ աշխատասեղանների վրա, ևս երկու (հավասար լայնություններ) ավելի մեծ սյունակում:
Բջջային սարքերի չափսերի, պլանշետների և ավելի փոքր չափերի դեպքում այս սյունակները և դրանց մեջ դրված սյունակները կդասավորվեն:
Խառը` բջջային և աշխատասեղան
Bootstrap v4 ցանցային համակարգը ունի դասերի հինգ մակարդակ՝ xs (չափազանց փոքր, այս դասի ինֆիքսը չի օգտագործվում), sm (փոքր), md (միջին), lg (մեծ) և xl (չափազանց մեծ): Դուք կարող եք օգտագործել այս դասերի գրեթե ցանկացած համակցություն՝ ավելի դինամիկ և ճկուն դասավորություններ ստեղծելու համար:
Դասերի յուրաքանչյուր մակարդակ մեծանում է, այսինքն, եթե պլանավորում եք նույն լայնությունները սահմանել md-ի, lg-ի և xl-ի համար, ապա ձեզ հարկավոր է միայն նշել md:
Խառը` բջջային, պլանշետ և աշխատասեղան
Հեղեղատարներ
Դասերի դեպքում .gx-*
հորիզոնական ջրհեղեղները կարող են կարգավորվել:
.col
.gx-4
հեղեղատարներով
_
.col
.gx-4
հեղեղատարներով
_
.col
.gx-4
հեղեղատարներով
_
.col
.gx-4
հեղեղատարներով
_
.col
.gx-4
հեղեղատարներով
_
.col
.gx-4
հեղեղատարներով
_
Օգտագործեք .gy-*
դասերը՝ ուղղահայաց ջրհեղեղները կառավարելու համար:
.col
.gy-4
հեղեղատարներով
_
.col
.gy-4
հեղեղատարներով
_
.col
.gy-4
հեղեղատարներով
_
.col
.gy-4
հեղեղատարներով
_
.col
.gy-4
հեղեղատարներով
_
.col
.gy-4
հեղեղատարներով
_
.g-*
Դասերի դեպքում երկու ուղղություններով ջրհեղեղները կարող են կարգավորվել :
.col
.g-3
հեղեղատարներով
_
.col
.g-3
հեղեղատարներով
_
.col
.g-3
հեղեղատարներով
_
.col
.g-3
հեղեղատարներով
_
.col
.g-3
հեղեղատարներով
_
.col
.g-3
հեղեղատարներով
_
Տարաներ
Bootstrap v4.4-ում ավելացված լրացուցիչ դասերը թույլ են տալիս բեռնարկղեր, որոնք ունեն 100% լայնություն մինչև որոշակի ընդմիջման կետ: v5-ն ավելացնում է նոր xxl
ընդմիջման կետ: