ចំណុចបំបែក
Breakpoints គឺជាទទឹងដែលអាចប្ដូរតាមបំណងបាន ដែលកំណត់ពីរបៀបដែលប្លង់ឆ្លើយតបរបស់អ្នកមានឥរិយាបទនៅទូទាំងទំហំឧបករណ៍ ឬទិដ្ឋភាពនៅក្នុង Bootstrap។
គំនិតស្នូល
-
ចំណុចបំបែកគឺជាប្លុកអគារនៃការរចនាឆ្លើយតប។ ប្រើពួកវាដើម្បីគ្រប់គ្រងនៅពេលដែលប្លង់របស់អ្នកអាចត្រូវបានសម្របតាមកន្លែងមើល ឬទំហំឧបករណ៍ជាក់លាក់មួយ។
-
ប្រើសំណួរមេឌៀដើម្បីស្ថាបត្យកម្ម CSS របស់អ្នកតាមចំណុចឈប់។ សំណួរប្រព័ន្ធផ្សព្វផ្សាយគឺជាលក្ខណៈពិសេសរបស់ CSS ដែលអនុញ្ញាតឱ្យអ្នកអនុវត្តរចនាប័ទ្មតាមលក្ខខណ្ឌដោយផ្អែកលើសំណុំនៃកម្មវិធីរុករក និងប៉ារ៉ាម៉ែត្រប្រព័ន្ធប្រតិបត្តិការ។ យើងប្រើជាទូទៅបំផុត
min-width
នៅក្នុងសំណួរប្រព័ន្ធផ្សព្វផ្សាយរបស់យើង។ -
ទូរស័ព្ទចល័តជាដំបូង ការរចនាឆ្លើយតបគឺជាគោលដៅ។ CSS របស់ Bootstrap មានគោលបំណងអនុវត្តអប្បបរមាទទេនៃរចនាប័ទ្មដើម្បីធ្វើឱ្យប្លង់ដំណើរការនៅចំណុចបំបែកតូចបំផុត ហើយបន្ទាប់មកដាក់ស្រទាប់លើរចនាប័ទ្មដើម្បីកែតម្រូវការរចនានោះសម្រាប់ឧបករណ៍ធំជាង។ វាធ្វើឱ្យ CSS របស់អ្នកប្រសើរឡើង បង្កើនពេលវេលាបង្ហាញ និងផ្តល់នូវបទពិសោធន៍ដ៏អស្ចារ្យសម្រាប់អ្នកទស្សនារបស់អ្នក។
ចំណុចឈប់ដែលមាន
Bootstrap រួមបញ្ចូលចំណុចបំបែកលំនាំដើមចំនួនប្រាំមួយ ដែលជួនកាលគេហៅថា លំដាប់ក្រឡាក្រឡាចត្រង្គ សម្រាប់ការកសាងឆ្លើយតប។ ចំណុចឈប់ទាំងនេះអាចត្រូវបានប្ដូរតាមបំណង ប្រសិនបើអ្នកកំពុងប្រើឯកសារ Sass ប្រភពរបស់យើង។
ចំណុចបំបែក | ចំណាត់ថ្នាក់ | វិមាត្រ |
---|---|---|
X-តូច | គ្មាន | <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
តម្លៃរបស់យើង។ ឧទាហរណ៍:
// 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
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) { ... }