გადადით მთავარ შინაარსზე დოკუმენტების ნავიგაციაზე გადასვლა
in English

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

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

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

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

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

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

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

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

ძალიან პატარა
<576 პიქსელი
მცირე
≥576 პიქსელი
საშუალო
≥768 პიქსელი
დიდი
≥992 პიქსელი
X-Large
≥1200px
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 განყოფილება .