Ընդմիջման կետեր

Հիմնական հասկացություններ

• Ընդմիջման կետերը պատասխանատու դիզայնի կառուցման բլոկներն են: Օգտագործեք դրանք՝ վերահսկելու, թե երբ ձեր դասավորությունը կարող է հարմարեցվել որոշակի տեսադաշտի կամ սարքի չափի վրա:

• Օգտագործեք մեդիա հարցումներ՝ ձեր CSS-ն ըստ բեկման կետի ճարտարապետության: Մեդիա հարցումները CSS-ի առանձնահատկությունն են, որոնք թույլ են տալիս պայմանականորեն կիրառել ոճեր՝ հիմնված բրաուզերի և օպերացիոն համակարգի մի շարք պարամետրերի վրա: Մենք ամենից հաճախ օգտագործում min-widthենք մեր մեդիա հարցումներում:

• Նախևառաջ շարժական, արձագանքող դիզայնը նպատակն է: Bootstrap-ի CSS-ի նպատակն է կիրառել ոճերի նվազագույն նվազագույնը, որպեսզի դասավորությունը աշխատի ամենափոքր բեկման կետում, և այնուհետև շերտերը ոճերի վրա՝ ավելի մեծ սարքերի համար այդ դիզայնը հարմարեցնելու համար: Սա օպտիմիզացնում է ձեր CSS-ը, բարելավում է մատուցման ժամանակը և հիանալի փորձ է ապահովում ձեր այցելուների համար:

Հասանելի ընդմիջման կետեր

Bootstrap-ը ներառում է վեց լռելյայն բեկման կետեր, որոնք երբեմն կոչվում են ցանցային մակարդակներ ՝ պատասխանատու կերպով կառուցելու համար: Այս ընդմիջման կետերը կարող են հարմարեցվել, եթե դուք օգտագործում եք մեր աղբյուր Sass ֆայլերը:

Յուրաքանչյուր ճեղքման կետ ընտրվել է բեռնարկղերի հարմարավետ տեղակայման համար, որոնց լայնությունները 12-ի բազմապատիկ են: Ընդմիջման կետերը նաև ներկայացնում են ընդհանուր սարքի չափսերի և տեսադաշտի չափսերի ենթաբազմություն. դրանք հատուկ չեն թիրախավորում ցանկացած օգտագործման դեպք կամ սարք: Փոխարենը, միջակայքերը ապահովում են ամուր և հետևողական հիմք գրեթե ցանկացած սարքի վրա կառուցելու համար:

_variables.scssԱյս ընդմիջման կետերը հարմարեցված են Sass-ի միջոցով. դրանք կգտնեք մեր ոճաթերթի Sass քարտեզում :

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

Լրացուցիչ տեղեկությունների և օրինակների համար, թե ինչպես փոփոխել մեր Sass քարտեզները և փոփոխականները, խնդրում ենք այցելել Grid փաստաթղթերի Sass բաժինը :

Մեդիա հարցումներ

Քանի որ Bootstrap-ը մշակվել է առաջին հերթին բջջային լինելու համար, մենք օգտագործում ենք մի քանի մեդիա հարցումներ ՝ մեր դասավորությունների և ինտերֆեյսների համար խելամիտ բեկման կետեր ստեղծելու համար: Այս ընդմիջման կետերը հիմնականում հիմնված են տեսադաշտի նվազագույն լայնությունների վրա և թույլ են տալիս մեծացնել տարրերը, երբ տեսադաշտը փոխվում է:

Min-լայնություն

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արժեքներ: Օրինակ:

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