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

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

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

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

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

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

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

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

ჩვენი ნაგულისხმევი .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 განყოფილება .