Տարաներ
Կոնտեյներները Bootstrap-ի հիմնական շինանյութն են, որոնք պարունակում են, պահում և հարթեցնում են ձեր բովանդակությունը տվյալ սարքի կամ տեսադաշտի ներսում:
Ինչպես են նրանք աշխատում
Կոնտեյներները Bootstrap-ում դասավորության ամենահիմնական տարրն են և պահանջվում են մեր լռելյայն ցանցային համակարգը օգտագործելիս : Բեռնարկղերը օգտագործվում են պարունակությունը պարունակելու, պահելու և (երբեմն) կենտրոնացնելու համար: Թեև բեռնարկղերը կարող են լինել բնադրված, դասավորությունների մեծ մասը չի պահանջում ներդիր կոնտեյներ:
Bootstrap-ը գալիս է երեք տարբեր տարաներով.
.container
, որը սահմանում է amax-width
յուրաքանչյուր արձագանքող բեկման կետում.container-fluid
, որը գտնվումwidth: 100%
է բոլոր ընդմիջման կետերում.container-{breakpoint}
, որըwidth: 100%
մինչև նշված ընդմիջման կետը
Ստորև բերված աղյուսակը ցույց է տալիս, թե ինչպես է յուրաքանչյուր բեռնարկղը max-width
համեմատվում բնօրինակի հետ .container
և .container-fluid
յուրաքանչյուր բեկման կետում:
Տեսեք դրանք գործողության մեջ և համեմատեք դրանք մեր Grid օրինակում :
Շատ փոքր <576px |
Փոքր ≥576px |
Միջին ≥768px |
Մեծ ≥992px |
X-Large ≥1200px |
XX-Large ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
Կանխադրված կոնտեյներ
Մեր լռելյայն .container
դասը արձագանքող, ֆիքսված լայնությամբ կոնտեյներ է, ինչը նշանակում է, որ դրա max-width
փոփոխությունները յուրաքանչյուր ընդմիջման կետում:
<div class="container">
<!-- Content here -->
</div>
Պատասխանատու բեռնարկղեր
Պատասխանատու կոնտեյներները թույլ են տալիս նշել դաս, որը 100% լայնություն ունի մինչև նշված բեկման կետին հասնելը, որից հետո մենք կիրառում ենք max-width
s ավելի բարձր բեկման կետերից յուրաքանչյուրի համար: Օրինակ, .container-sm
100% լայնություն է՝ սկսելու համար մինչև sm
բեկման կետին հասնելը, որտեղ այն կմեծանա md
, lg
, xl
և xxl
.
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Հեղուկի տարաներ
Օգտագործեք .container-fluid
ամբողջ լայնությամբ կոնտեյների համար՝ ընդգրկելով տեսադաշտի ամբողջ լայնությունը:
<div class="container-fluid">
...
</div>
Սաս
Ինչպես ցույց է տրված վերևում, Bootstrap-ը ստեղծում է մի շարք նախապես սահմանված բեռնարկղային դասեր, որոնք կօգնեն ձեզ կառուցել ձեր ուզած դասավորությունները: Դուք կարող եք հարմարեցնել այս նախապես սահմանված բեռնարկղերի դասերը՝ փոփոխելով Sass քարտեզը (գտնվում է _variables.scss
), որը ապահովում է դրանք՝
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Բացի Sass-ը հարմարեցնելուց, դուք կարող եք նաև ստեղծել ձեր սեփական տարաները մեր Sass միքսինով:
// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
width: 100%;
padding-right: $padding-x;
padding-left: $padding-x;
margin-right: auto;
margin-left: auto;
}
// Usage
.custom-container {
@include make-container();
}
Լրացուցիչ տեղեկությունների և օրինակների համար, թե ինչպես փոփոխել մեր Sass քարտեզները և փոփոխականները, խնդրում ենք այցելել Grid փաստաթղթերի Sass բաժինը :