ទិដ្ឋភាពទូទៅ
សមាសភាគ និងជម្រើសសម្រាប់ដាក់ចេញគម្រោង Bootstrap របស់អ្នក រួមទាំងធុងរុំ ប្រព័ន្ធក្រឡាចត្រង្គដ៏មានឥទ្ធិពល វត្ថុប្រព័ន្ធផ្សព្វផ្សាយដែលអាចបត់បែនបាន និងថ្នាក់ឧបករណ៍ប្រើប្រាស់ដែលឆ្លើយតប។
ធុង
កុងតឺន័រគឺជាធាតុប្លង់មូលដ្ឋានបំផុតនៅក្នុង Bootstrap ហើយត្រូវបាន ទាមទារនៅពេលប្រើប្រព័ន្ធក្រឡាចត្រង្គលំនាំដើមរបស់យើង ។ កុងតឺន័រត្រូវបានប្រើដើម្បីផ្ទុក បន្ទះ និង (ជួនកាល) ដាក់កណ្តាលមាតិកានៅក្នុងពួកវា។ ខណៈពេលដែលធុង អាច ដាក់សំបុក ប្លង់ភាគច្រើនមិនតម្រូវឱ្យមានធុងដាក់សំបុកទេ។
Bootstrap ភ្ជាប់មកជាមួយធុងបីផ្សេងគ្នា៖
.container
ដែលកំណត់ amax-width
នៅចំនុចឈប់ឆ្លើយតបនីមួយៗ.container-fluid
ដែលជាwidth: 100%
ចំណុចឈប់សម្រាកទាំងអស់ ។.container-{breakpoint}
ដែលwidth: 100%
រហូតដល់ចំណុចឈប់ដែលបានបញ្ជាក់
តារាងខាងក្រោមបង្ហាញពីរបៀបដែលកុងតឺន័រនីមួយៗ max-width
ប្រៀបធៀបទៅនឹងដើម .container
និង .container-fluid
ឆ្លងកាត់ចំណុចឈប់នីមួយៗ។
មើលពួកវានៅក្នុងសកម្មភាព ហើយប្រៀបធៀបពួកវានៅក្នុង ឧទាហរណ៍ក្រឡាចត្រង្គ របស់យើង ។
តូចបន្ថែម <576px |
តូច ≥576px |
មធ្យម ≥768px |
ធំ ≥992px |
ធំបន្ថែម ≥1200px |
|
---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px |
.container-sm |
100% | 540px | 720px | 960px | 1140px |
.container-md |
100% | 100% | 720px | 960px | 1140px |
.container-lg |
100% | 100% | 100% | 960px | 1140px |
.container-xl |
100% | 100% | 100% | 100% | 1140px |
.container-fluid |
100% | 100% | 100% | 100% | 100% |
ដាក់បញ្ចូលគ្នាតែមួយ
ថ្នាក់ លំនាំដើមរបស់យើង .container
គឺជាកុងតឺន័រទទឹងថេរដែលឆ្លើយតប មានន័យថាការ max-width
ផ្លាស់ប្តូររបស់វានៅចំនុចឈប់នីមួយៗ។
<div class="container">
<!-- Content here -->
</div>
សារធាតុរាវ
ប្រើ .container-fluid
សម្រាប់កុងតឺន័រទទឹងពេញ ដែលលាតសន្ធឹងទទឹងទាំងមូលនៃច្រកមើល។
<div class="container-fluid">
...
</div>
ឆ្លើយតប
Responsive containers គឺថ្មីនៅក្នុង Bootstrap v4.4. ពួកគេអនុញ្ញាតឱ្យអ្នកបញ្ជាក់ថ្នាក់ដែលធំទូលាយ 100% រហូតដល់ចំណុចឈប់ដែលបានបញ្ជាក់ត្រូវបានឈានដល់ បន្ទាប់ពីនោះយើងអនុវត្ត max-width
s សម្រាប់ចំណុចឈប់ខ្ពស់នីមួយៗ។ ឧទាហរណ៍ .container-sm
គឺធំទូលាយ 100% ដើម្បីចាប់ផ្តើមរហូតដល់ sm
ចំណុចឈប់ត្រូវបានឈានដល់ ដែលវានឹងពង្រីកជាមួយ md
, lg
, និង xl
.
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</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) { ... }
សន្ទស្សន៍ Z
សមាសធាតុ 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
តម្លៃខ្ពស់ជាងដើម្បីបង្ហាញព្រំដែនរបស់ពួកគេនៅលើធាតុបងប្អូនបង្កើត។