ទិដ្ឋភាពទូទៅ
សមាសភាគ និងជម្រើសសម្រាប់ដាក់ចេញគម្រោង Bootstrap របស់អ្នក រួមទាំងធុងរុំ ប្រព័ន្ធក្រឡាចត្រង្គដ៏មានឥទ្ធិពល វត្ថុប្រព័ន្ធផ្សព្វផ្សាយដែលអាចបត់បែនបាន និងថ្នាក់ឧបករណ៍ប្រើប្រាស់ដែលឆ្លើយតប។
កុងតឺន័រគឺជាធាតុប្លង់មូលដ្ឋានបំផុតនៅក្នុង Bootstrap ហើយត្រូវបាន ទាមទារនៅពេលប្រើប្រព័ន្ធក្រឡាចត្រង្គលំនាំដើមរបស់យើង ។ ជ្រើសរើសពីកុងតឺន័រដែលមានទទឹងថេរដែលឆ្លើយតប (មានន័យថាការ max-width
ផ្លាស់ប្តូររបស់វានៅចំនុចឈប់នីមួយៗ) ឬទទឹងរាវ (មានន័យថាវា 100%
ធំទូលាយគ្រប់ពេល)។
ខណៈពេលដែលធុង អាច ដាក់សំបុក ប្លង់ភាគច្រើនមិនតម្រូវឱ្យមានធុងដាក់សំបុកទេ។
<div class="container">
<!-- Content here -->
</div>
ប្រើ .container-fluid
សម្រាប់កុងតឺន័រទទឹងពេញ ដែលលាតសន្ធឹងទទឹងទាំងមូលនៃច្រកមើល។
<div class="container-fluid">
...
</div>
ដោយសារ Bootstrap ត្រូវបានបង្កើតឱ្យក្លាយជាទូរសព្ទដំបូង យើងប្រើ សំណួរមេឌៀ មួយចំនួនតូច ដើម្បីបង្កើតចំណុចឈប់ដែលសមរម្យសម្រាប់ប្លង់ និងចំណុចប្រទាក់របស់យើង។ ចំណុចបំបែកទាំងនេះភាគច្រើនផ្អែកលើទទឹងទិដ្ឋភាពអប្បបរមា និងអនុញ្ញាតឱ្យយើងធ្វើមាត្រដ្ឋានធាតុនៅពេលដែលទិដ្ឋភាពផ្លាស់ប្តូរ។
Bootstrap ប្រើជាចម្បងនូវជួរសំណួរមេឌៀខាងក្រោម—ឬចំណុចបំបែក—នៅក្នុងឯកសារប្រភព Sass របស់យើងសម្រាប់ប្លង់ ប្រព័ន្ធក្រឡាចត្រង្គ និងសមាសធាតុរបស់យើង។
// Extra 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) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
ចាប់តាំងពីយើងសរសេរ CSS ប្រភពរបស់យើងនៅក្នុង Sass រាល់សំណួរប្រព័ន្ធផ្សព្វផ្សាយរបស់យើងអាចរកបានតាមរយៈ Sass 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) { ... }
// 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;
}
}
ម្តងម្កាល យើងប្រើសំណួរមេឌៀដែលទៅទិសដៅផ្សេងទៀត (ទំហំអេក្រង់ដែលបានផ្តល់ឱ្យ ឬតូចជាង នេះ )៖
// Extra 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) { ... }
// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width
សូមចំណាំថា ចាប់តាំងពីកម្មវិធីរុករកតាមអ៊ីនធឺណិតបច្ចុប្បន្នមិនគាំទ្រ សំណួរបរិបទជួរ នោះយើងធ្វើការជុំវិញដែនកំណត់ min-
និង max-
បុព្វបទ និងច្រកទិដ្ឋភាពដែលមានទទឹងប្រភាគ (ដែលអាចកើតឡើងក្រោមលក្ខខណ្ឌមួយចំនួននៅលើឧបករណ៍ដែលមានឌីភីភីខ្ពស់ ជាឧទាហរណ៍) ដោយប្រើតម្លៃដែលមានភាពជាក់លាក់ខ្ពស់សម្រាប់ការប្រៀបធៀបទាំងនេះ។ .
ជាថ្មីម្តងទៀត សំណួរប្រព័ន្ធផ្សព្វផ្សាយទាំងនេះក៏មានតាមរយៈ Sass mixins៖
@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width
// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
.custom-class {
display: block;
}
}
វាក៏មានសំណួរមេឌៀ និង mixins សម្រាប់កំណត់គោលដៅផ្នែកតែមួយនៃទំហំអេក្រង់ ដោយប្រើទទឹងចំនុចបំបែកអប្បបរមា និងអតិបរមា។
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
សំណួរប្រព័ន្ធផ្សព្វផ្សាយទាំងនេះក៏មានតាមរយៈ Sass 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) { ... }
ដូចគ្នានេះដែរ សំណួរប្រព័ន្ធផ្សព្វផ្សាយអាចលាតសន្ធឹងទទឹងចំណុចឈប់ជាច្រើន៖
// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }
Sass mixin សម្រាប់កំណត់គោលដៅទំហំអេក្រង់ដូចគ្នានឹងមានៈ
@include media-breakpoint-between(md, xl) { ... }
សមាសធាតុ Bootstrap ជាច្រើនប្រើប្រាស់ z-index
CSS property ដែលជួយគ្រប់គ្រងប្លង់ដោយផ្តល់អ័ក្សទីបីដើម្បីរៀបចំមាតិកា។ យើងប្រើប្រាស់មាត្រដ្ឋាន z-index លំនាំដើមនៅក្នុង Bootstrap ដែលត្រូវបានរចនាឡើងដើម្បីរុករកស្រទាប់ឱ្យបានត្រឹមត្រូវ គន្លឹះឧបករណ៍ និងផ្ទាំងលេចឡើង ម៉ូឌុល និងច្រើនទៀត។
តម្លៃខ្ពស់ទាំងនេះចាប់ផ្តើមពីលេខតាមអំពើចិត្ត ខ្ពស់ និងជាក់លាក់គ្រប់គ្រាន់ដើម្បីជៀសវាងជម្លោះតាមឧត្ដមគតិ។ យើងត្រូវការសំណុំស្ដង់ដារមួយនៅទូទាំងសមាសធាតុស្រទាប់របស់យើង—ព័ត៌មានជំនួយ, ផ្ទាំងព័ត៌មាន, របាររុករក, ទម្លាក់ចុះ, ម៉ូឌុល—ដូច្នេះយើងអាចមានសមហេតុផលក្នុងឥរិយាបថ។ គ្មានហេតុផលដែលយើងមិនអាចប្រើ 100
+ ឬ 500
+ បានទេ។
យើងមិនលើកទឹកចិត្តឱ្យប្ដូរតាមបំណងនៃតម្លៃបុគ្គលទាំងនេះទេ។ ប្រសិនបើអ្នកផ្លាស់ប្តូរមួយ អ្នកទំនងជាត្រូវផ្លាស់ប្តូរពួកវាទាំងអស់។
$zindex-dropdown: 1000 !default;
$zindex-sticky: 1020 !default;
$zindex-fixed: 1030 !default;
$zindex-modal-backdrop: 1040 !default;
$zindex-modal: 1050 !default;
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;
ដើម្បីដោះស្រាយព្រំដែនត្រួតគ្នានៅក្នុងសមាសធាតុ (ឧ. ប៊ូតុង និងធាតុបញ្ចូលក្នុងក្រុមបញ្ចូល) យើងប្រើតម្លៃលេខមួយខ្ទង់ទាប z-index
នៃ 1
, 2
, និង 3
សម្រាប់លំនាំដើម សង្កត់លើ និងស្ថានភាពសកម្ម។ នៅលើ hover/focus/active, យើងនាំយកធាតុជាក់លាក់មួយទៅជួរមុខជាមួយនឹង z-index
តម្លៃខ្ពស់ជាងដើម្បីបង្ហាញព្រំដែនរបស់ពួកគេនៅលើធាតុបងប្អូនបង្កើត។