შესვენების წერტილები

ძირითადი ცნებები

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

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

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

ხელმისაწვდომი წყვეტის წერტილები

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

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

ამ წყვეტის წერტილების მორგება შესაძლებელია Sass-ის საშუალებით — თქვენ იპოვით მათ Sass რუკაზე ჩვენს _variables.scssსტილში.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

დამატებითი ინფორმაციისთვის და მაგალითებისთვის, თუ როგორ უნდა შეცვალოთ ჩვენი Sass რუკები და ცვლადები, გთხოვთ, იხილოთ Grid დოკუმენტაციის Sass განყოფილება .

მედიის შეკითხვები

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

მინ-სიგანე

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

// Source 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) { ... }
@include media-breakpoint-up(xxl) { ... }

// Usage

// 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;
  }
}

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

// X-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) { ... }

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

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

მაქს-სიგანე

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

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

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

ეს მიქსები იღებენ გამოცხადებულ წყვეტის წერტილებს, აკლებენ .02pxმათ და იყენებენ მათ როგორც ჩვენს max-widthმნიშვნელობებს. Მაგალითად:

// `xs` returns only a ruleset and no media query
// ... { ... }

// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

ერთი წყვეტის წერტილი

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

@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) { ... }
@include media-breakpoint-only(xxl) { ... }

მაგალითად, @include media-breakpoint-only(md) { ... }შედეგი იქნება:

@media (min-width: 768px) and (max-width: 991.98px) { ... }

წყვეტის წერტილებს შორის

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

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

რაც იწვევს:

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