კონტეინერები
კონტეინერები არის 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 განყოფილება .