მიმოხილვა

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

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

კონტეინერები 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>

სითხე

გამოიყენეთ .container-fluidსრული სიგანის კონტეინერისთვის, რომელიც მოიცავს ხედის მთელ სიგანეს.

<div class="container-fluid">
  ...
</div>

საპასუხო

საპასუხო კონტეინერები ახალია Bootstrap v4.4-ში. ისინი საშუალებას გაძლევთ მიუთითოთ კლასი, რომელიც არის 100% სიგანის მითითებულ წყვეტის წერტილამდე მიღწევამდე, რის შემდეგაც ჩვენ ვიყენებთ max-widths-ს თითოეული უმაღლესი წყვეტის წერტილისთვის. მაგალითად, .container-smარის 100% სიგანე, რათა დაიწყოს smწყვეტის წერტილის მიღწევამდე, სადაც ის გაიზრდება md, lg, და xl.

<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>

საპასუხო წყვეტის წერტილები

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

Bootstrap ძირითადად იყენებს მედიის მოთხოვნის შემდეგ დიაპაზონებს - ან წყვეტის წერტილებს - ჩვენს წყარო Sass ფაილებში ჩვენი განლაგებისთვის, ბადის სისტემისთვის და კომპონენტებისთვის.

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

მას შემდეგ, რაც ჩვენ ვწერთ ჩვენს წყაროს CSS-ს Sass-ში, ყველა ჩვენი მედია მოთხოვნა ხელმისაწვდომია Sass mixins-ის საშუალებით:

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

ჩვენ ზოგჯერ ვიყენებთ მედია მოთხოვნებს, რომლებიც მიდიან სხვა მიმართულებით (ეკრანის მოცემული ზომა ან უფრო მცირე ):

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

კიდევ ერთხელ, ეს მედია მოთხოვნები ასევე ხელმისაწვდომია Sass mixins-ის საშუალებით:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

ასევე არსებობს მედია მოთხოვნები და მიქსები ეკრანის ზომის ერთი სეგმენტის დასამიზნებლად მინიმალური და მაქსიმალური წყვეტის წერტილის სიგანეების გამოყენებით.

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

ეს მედია მოთხოვნები ასევე ხელმისაწვდომია Sass mixins-ის საშუალებით:

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

ანალოგიურად, მედია მოთხოვნები შეიძლება ვრცელდებოდეს წყვეტის წერტილების რამდენიმე სიგანეზე:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

Sass mixin ეკრანის იგივე ზომის დიაპაზონისთვის განკუთვნილი იქნება:

@include media-breakpoint-between(md, xl) { ... }

Z-ინდექსი

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

ეს უმაღლესი მნიშვნელობები იწყება თვითნებური რიცხვით, საკმარისად მაღალი და სპეციფიკური, რათა იდეალურად თავიდან აიცილოთ კონფლიქტები. ჩვენ გვჭირდება მათი სტანდარტული ნაკრები ჩვენს ფენოვან კომპონენტებში - ინსტრუმენტების მინიშნებები, popovers, navbars, dropdowns, modals - ასე რომ, ჩვენ შეგვიძლია ვიყოთ გონივრულად თანმიმდევრული ქცევებში. არ არსებობს მიზეზი, რომ ჩვენ ვერ გამოვიყენოთ 100+ ან 500+.

ჩვენ არ ვამხნევებთ ამ ინდივიდუალური ღირებულებების პერსონალიზაციას; თუ ერთს შეცვლით, სავარაუდოდ ყველა უნდა შეცვალოთ.

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

კომპონენტების შიგნით გადახურული საზღვრების დასამუშავებლად (მაგ., ღილაკები და შეყვანები შეყვანის ჯგუფებში), ვიყენებთ დაბალ ერთნიშნა z-indexმნიშვნელობებს 1, 2, და 3ნაგულისხმევად, მავალი და აქტიური მდგომარეობები. Hover/focus/active-ზე ჩვენ ვაყენებთ კონკრეტულ ელემენტს წინა პლანზე უფრო მაღალი z-indexმნიშვნელობით, რათა აჩვენოს მათი საზღვარი და-ძმის ელემენტებზე.