រំលងទៅមាតិកាសំខាន់ រំលងទៅការរុករកឯកសារ
Check
in English

ចំណុចបំបែក

Breakpoints គឺជាទទឹងដែលអាចប្ដូរតាមបំណងបាន ដែលកំណត់ពីរបៀបដែលប្លង់ឆ្លើយតបរបស់អ្នកមានឥរិយាបទនៅទូទាំងទំហំឧបករណ៍ ឬទិដ្ឋភាពនៅក្នុង Bootstrap។

គំនិតស្នូល

  • ចំណុចបំបែកគឺជាប្លុកអគារនៃការរចនាឆ្លើយតប។ ប្រើពួកវាដើម្បីគ្រប់គ្រងនៅពេលដែលប្លង់របស់អ្នកអាចត្រូវបានសម្របតាមកន្លែងមើល ឬទំហំឧបករណ៍ជាក់លាក់មួយ។

  • ប្រើសំណួរមេឌៀដើម្បីស្ថាបត្យកម្ម CSS របស់អ្នកតាមចំណុចឈប់។ សំណួរប្រព័ន្ធផ្សព្វផ្សាយគឺជាលក្ខណៈពិសេសរបស់ CSS ដែលអនុញ្ញាតឱ្យអ្នកអនុវត្តរចនាប័ទ្មតាមលក្ខខណ្ឌដោយផ្អែកលើសំណុំនៃកម្មវិធីរុករក និងប៉ារ៉ាម៉ែត្រប្រព័ន្ធប្រតិបត្តិការ។ យើងប្រើជាទូទៅបំផុត min-widthនៅក្នុងសំណួរប្រព័ន្ធផ្សព្វផ្សាយរបស់យើង។

  • ទូរស័ព្ទចល័តជាដំបូង ការរចនាឆ្លើយតបគឺជាគោលដៅ។ CSS របស់ Bootstrap មានគោលបំណងអនុវត្តអប្បបរមាទទេនៃរចនាប័ទ្មដើម្បីធ្វើឱ្យប្លង់ដំណើរការនៅចំណុចបំបែកតូចបំផុត ហើយបន្ទាប់មកដាក់ស្រទាប់លើរចនាប័ទ្មដើម្បីកែតម្រូវការរចនានោះសម្រាប់ឧបករណ៍ធំជាង។ វាធ្វើឱ្យ CSS របស់អ្នកប្រសើរឡើង បង្កើនពេលវេលាបង្ហាញ និងផ្តល់នូវបទពិសោធន៍ដ៏អស្ចារ្យសម្រាប់អ្នកទស្សនារបស់អ្នក។

ចំណុចឈប់ដែលមាន

Bootstrap រួមបញ្ចូលចំណុចបំបែកលំនាំដើមចំនួនប្រាំមួយ ដែលជួនកាលគេហៅថា លំដាប់ក្រឡាក្រឡាចត្រង្គ សម្រាប់ការកសាងឆ្លើយតប។ ចំណុចឈប់ទាំងនេះអាចត្រូវបានប្ដូរតាមបំណង ប្រសិនបើអ្នកកំពុងប្រើឯកសារ Sass ប្រភពរបស់យើង។

ចំណុចបំបែក ចំណាត់ថ្នាក់ វិមាត្រ
តូចបន្ថែម គ្មាន <576px
តូច sm ≥576px
មធ្យម md ≥768px
ធំ lg ≥ 992px
ធំបន្ថែម xl ≥1200px
ធំបន្ថែម xxl ≥1400px

ចំណុចឈប់នីមួយៗត្រូវបានជ្រើសរើសដើម្បីផ្ទុកធុងដែលមានទំហំទទឹងគុណនឹង 12។ ចំណុចបំបែកក៏ជាតំណាងនៃសំណុំរងនៃទំហំឧបករណ៍ទូទៅ និងវិមាត្រច្រកចូលផងដែរ—ពួកវាមិនកំណត់ជាពិសេសរាល់ករណីប្រើប្រាស់ ឬឧបករណ៍នោះទេ។ ផ្ទុយទៅវិញ ជួរផ្ដល់នូវមូលដ្ឋានគ្រឹះដ៏រឹងមាំ និងជាប់លាប់ក្នុងការសាងសង់សម្រាប់ឧបករណ៍ស្ទើរតែទាំងអស់។

ចំណុចឈប់ទាំងនេះអាចប្ដូរតាមបំណងតាមរយៈ Sass—អ្នកនឹងរកឃើញពួកវានៅក្នុងផែនទី Sass នៅក្នុង _variables.scssសន្លឹករចនាប័ទ្មរបស់យើង។

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

សម្រាប់ព័ត៌មានបន្ថែម និងឧទាហរណ៍អំពីរបៀបកែប្រែផែនទី និងអថេរ Sass របស់យើង សូមមើល ផ្នែក 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 mixins ទាំងនេះបកប្រែនៅក្នុង 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;
  }
}

mixins ទាំងនេះយកចំណុចឈប់ដែលបានប្រកាសទាំងនោះ ដក .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) { ... }
ហេតុអ្វីត្រូវដក .02px? កម្មវិធីរុករកតាមអ៊ីនធឺណិតបច្ចុប្បន្នមិនគាំទ្រ សំណួរបរិបទជួរ ទេ ដូច្នេះយើងធ្វើការជុំវិញដែនកំណត់ min-និង max-បុព្វបទ និងច្រកមើលដែលមានទទឹងប្រភាគ (ដែលអាចកើតឡើងក្រោមលក្ខខណ្ឌជាក់លាក់នៅលើឧបករណ៍ដែលមានឌីភីភីខ្ពស់ ជាឧទាហរណ៍) ដោយប្រើតម្លៃដែលមានភាពជាក់លាក់ខ្ពស់។

ចំណុចឈប់តែមួយ

វាក៏មានសំណួរមេឌៀ និង 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) { ... }
@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) { ... }