Хагарлын цэгүүд

Үндсэн ойлголтууд

• Хагарлын цэгүүд нь мэдрэмжтэй дизайны барилгын материал юм. Тэдгээрийг ашиглан таны байршлыг тодорхой харах хэсэг эсвэл төхөөрөмжийн хэмжээгээр тохируулах боломжтой.

• 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 хольцууд нь манай Sass хувьсагчид зарласан утгуудыг ашиглан бидний эмхэтгэсэн CSS-д хөрвүүлдэг. Жишээлбэл:

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