بۆسۈش نۇقتىلىرى

يادرولۇق ئۇقۇم

• بۆسۈش نۇقتىلىرى ئىنكاس لايىھىسىنىڭ قۇرۇلۇش بۆلىكى. ئورۇنلاشتۇرۇشىڭىزنى مەلۇم كۆرۈنۈش ياكى ئۈسكۈنىنىڭ چوڭ-كىچىكلىكىگە ماسلاشتۇرغىلى بولىدىغانلىقىنى كونترول قىلىڭ.

• مېدىيا سوئاللىرىنى ئىشلىتىپ 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 ئالدى بىلەن كۆچمە قىلىپ تەرەققىي قىلدۇرۇلغان بولغاچقا ، بىز بىر نەچچە تاراتقۇ سوئاللىرىنى ئىشلىتىپ ، ئورۇنلاشتۇرۇشىمىز ۋە كۆرۈنمە يۈزىمىز ئۈچۈن ئاقىلانە بۆسۈش ھاسىل قىلىمىز. بۇ بۆسۈش نۇقتىلىرى كۆپىنچە ئەڭ تۆۋەن كۆرۈنۈش كەڭلىكىنى ئاساس قىلغان بولۇپ ، كۆرۈنۈشنىڭ ئۆزگىرىشى بىلەن ئېلېمېنتلارنى چوڭايتىشىمىزغا يول قويىدۇ.

Min-width

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قىممىتىمىز سۈپىتىدە ئىشلىتىدۇ. مەسىلەن:

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

// X-Large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

// XX-Large devices (larger desktops)
// No media query since the xxl breakpoint has no upper bound on its width

يەككە بۆسۈش

بۇ يەردە يەنە ئەڭ تۆۋەن ۋە ئەڭ چوڭ بۆسۈش كەڭلىكىدىن پايدىلىنىپ بىر بۆلەك ئېكران چوڭلۇقىنى نىشانلاش ئۈچۈن مېدىيا سوئاللىرى ۋە ئارىلاشمىلار بار.

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