კონტეინერები

კონტეინერები არის Bootstrap-ის ფუნდამენტური სამშენებლო ბლოკი, რომელიც შეიცავს, ამაგრებს და ასწორებს თქვენს კონტენტს მოცემულ მოწყობილობაში ან ხედვის პორტში.

ამ გვერდზე

როგორ მუშაობენ

კონტეინერები Bootstrap-ში განლაგების ყველაზე ძირითადი ელემენტია და საჭიროა ჩვენი ნაგულისხმევი ქსელის სისტემის გამოყენებისას . კონტეინერები გამოიყენება მათში შიგთავსის დასამაგრებლად, დასაფენად და (ზოგჯერ) დასაჭერად. მიუხედავად იმისა, რომ კონტეინერები შეიძლება იყოს ბუდირებული, განლაგების უმეტესობას არ სჭირდება ჩასმული კონტეინერი.

Bootstrap-ს გააჩნია სამი განსხვავებული კონტეინერი:

.container, რომელიც ადგენს max-widthთითოეულ საპასუხო წყვეტის წერტილს
.container-{breakpoint}, რომელიც არის width: 100%მითითებულ წყვეტამდე
.container-fluid, რომელიც width: 100%ყველა წყვეტის წერტილშია

ქვემოთ მოყვანილი ცხრილი გვიჩვენებს, თუ როგორ max-widthადარებს თითოეული კონტეინერი თავდაპირველს .containerდა .container-fluidთითოეულ წყვეტის წერტილს.

იხილეთ ისინი მოქმედებაში და შეადარეთ ისინი ჩვენს Grid-ის მაგალითში .

	Ძალიან პატარა <576 პიქსელი	Პატარა ≥576 პიქსელი	საშუალო ≥768 პიქსელი	დიდი ≥992 პიქსელი	X-Large ≥ 1200 პიქსელი	XX-დიდი ≥1400 პიქსელი
`.container`	100%	540 პიქსელი	720 პიქსელი	960 პიქსელი	1140 პიქსელი	1320 პიქსელი
`.container-sm`	100%	540 პიქსელი	720 პიქსელი	960 პიქსელი	1140 პიქსელი	1320 პიქსელი
`.container-md`	100%	100%	720 პიქსელი	960 პიქსელი	1140 პიქსელი	1320 პიქსელი
`.container-lg`	100%	100%	100%	960 პიქსელი	1140 პიქსელი	1320 პიქსელი
`.container-xl`	100%	100%	100%	100%	1140 პიქსელი	1320 პიქსელი
`.container-xxl`	100%	100%	100%	100%	100%	1320 პიქსელი
`.container-fluid`	100%	100%	100%	100%	100%	100%

ნაგულისხმევი კონტეინერი

ჩვენი ნაგულისხმევი .containerკლასი არის პასუხისმგებელი, ფიქსირებული სიგანის კონტეინერი, რაც იმას ნიშნავს, რომ ის max-widthიცვლება ყოველ წყვეტის წერტილში.

<div class="container">
  <!-- Content here -->
</div>

საპასუხო კონტეინერები

საპასუხო კონტეინერები საშუალებას გაძლევთ მიუთითოთ კლასი, რომელიც არის 100% სიგანის მითითებულ წყვეტის წერტილის მიღწევამდე, რის შემდეგაც ჩვენ გამოვიყენებთ max-widths-ს თითოეული უმაღლესი წყვეტის წერტილისთვის. მაგალითად, .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 mixin-ით.

// 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 განყოფილება .