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

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

Այս օրինակներում .themed-grid-colդասը ավելացվում է սյունակներին՝ որոշակի թեմա ավելացնելու համար: Սա դաս չէ, որը լռելյայն հասանելի է Bootstrap-ում:

Հինգ ցանցային մակարդակ

Bootstrap ցանցային համակարգի հինգ մակարդակ կա՝ մեկական մեր կողմից աջակցվող սարքերի յուրաքանչյուր շարքի համար: Յուրաքանչյուր մակարդակ սկսվում է տեսադաշտի նվազագույն չափից և ինքնաբերաբար կիրառվում է ավելի մեծ սարքերի վրա, եթե չվերացվի:

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

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

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

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

Երեք հավասար սյունակների այլընտրանք

Օգտագործելով .row-cols-*դասերը, դուք հեշտությամբ կարող եք ստեղծել հավասար սյունակներով ցանց:

.col-ի երեխա .row-cols-md-3
.col-ի երեխա .row-cols-md-3
.col-ի երեխա .row-cols-md-3

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

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

.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 v5 ցանցային համակարգը ունի դասերի վեց մակարդակ՝ xs (շատ փոքր, այս դասի ինֆիքսը չի օգտագործվում), sm (փոքր), md (միջին), lg (մեծ), xl (x-մեծ) և xxl (xx): - մեծ): Դուք կարող եք օգտագործել այս դասերի գրեթե ցանկացած համակցություն՝ ավելի դինամիկ և ճկուն դասավորություններ ստեղծելու համար:

Դասերի յուրաքանչյուր մակարդակ մեծանում է, այսինքն, եթե պլանավորում եք նույն լայնությունները սահմանել md, lg, xl և xxl-ի համար, ապա ձեզ հարկավոր է միայն նշել md:

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

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

.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

Հեղեղատարներ

Դասերի դեպքում .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ընդմիջման կետ:

.կոնտեյներ
.կոնտեյներ-սմ
.կոնտեյներ-մդ
.container-lg
.container-xl
.container-xxl
.տարա-հեղուկ