Անցեք հիմնական բովանդակությանը Բաց թողնել փաստաթղթերի նավարկություն
Check
in English

Տարաներ

Կոնտեյներները Bootstrap-ի հիմնական շինանյութն են, որոնք պարունակում են, պահում և հարթեցնում են ձեր բովանդակությունը տվյալ սարքի կամ տեսադաշտի ներսում:

Ինչպես են նրանք աշխատում

Կոնտեյներները Bootstrap-ում դասավորության ամենահիմնական տարրն են և պահանջվում են մեր լռելյայն ցանցային համակարգը օգտագործելիս : Բեռնարկղերը օգտագործվում են պարունակությունը պարունակելու, պահելու և (երբեմն) կենտրոնացնելու համար: Թեև բեռնարկղերը կարող են լինել բնադրված, դասավորությունների մեծ մասը չի պահանջում ներդիր կոնտեյներ:

Bootstrap-ը գալիս է երեք տարբեր տարաներով.

  • .container, որը սահմանում է a max-widthյուրաքանչյուր արձագանքող բեկման կետում
  • .container-{breakpoint}, որը width: 100%մինչև նշված ընդմիջման կետը
  • .container-fluid, որը գտնվում width: 100%է բոլոր ընդմիջման կետերում

Ստորև բերված աղյուսակը ցույց է տալիս, թե ինչպես է յուրաքանչյուր բեռնարկղը max-widthհամեմատվում բնօրինակի հետ .containerև .container-fluidյուրաքանչյուր բեկման կետում:

Տեսեք դրանք գործողության մեջ և համեմատեք դրանք մեր Grid օրինակում :

Լրացուցիչ փոքր
<576px
Փոքր
≥576px
Միջին
≥768 px
Մեծ
≥992px
X-Large
≥1200px
XX-Խոշոր
≥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-widths ավելի բարձր բեկման կետերից յուրաքանչյուրի համար: Օրինակ, .container-sm100% լայնություն է՝ սկսելու համար մինչև 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 բաժինը :