ទិដ្ឋភាពទូទៅ

សមាសភាគ និងជម្រើសសម្រាប់ដាក់ចេញគម្រោង Bootstrap របស់អ្នក រួមទាំងធុងរុំ ប្រព័ន្ធក្រឡាចត្រង្គដ៏មានឥទ្ធិពល វត្ថុប្រព័ន្ធផ្សព្វផ្សាយដែលអាចបត់បែនបាន និងថ្នាក់ឧបករណ៍ប្រើប្រាស់ដែលឆ្លើយតប។

ធុង

កុងតឺន័រគឺជាធាតុប្លង់មូលដ្ឋានបំផុតនៅក្នុង Bootstrap ហើយត្រូវបាន ទាមទារនៅពេលប្រើប្រព័ន្ធក្រឡាចត្រង្គលំនាំដើមរបស់យើង ។ កុងតឺន័រ​ត្រូវ​បាន​ប្រើ​ដើម្បី​ផ្ទុក បន្ទះ និង (ជួនកាល) ដាក់​កណ្តាល​មាតិកា​នៅ​ក្នុង​ពួកវា។ ខណៈពេលដែលធុង អាច ដាក់សំបុក ប្លង់ភាគច្រើនមិនតម្រូវឱ្យមានធុងដាក់សំបុកទេ។

Bootstrap ភ្ជាប់មកជាមួយធុងបីផ្សេងគ្នា៖

• .containerដែលកំណត់ a max-widthនៅចំនុចឈប់ឆ្លើយតបនីមួយៗ
• .container-fluidដែលជា width: 100%ចំណុចឈប់សម្រាកទាំងអស់ ។
• .container-{breakpoint}ដែល width: 100%រហូតដល់ចំណុចឈប់ដែលបានបញ្ជាក់

តារាងខាងក្រោមបង្ហាញពីរបៀបដែលកុងតឺន័រនីមួយៗ max-widthប្រៀបធៀបទៅនឹងដើម .containerនិង .container-fluidឆ្លងកាត់ចំណុចឈប់នីមួយៗ។

មើលពួកវានៅក្នុងសកម្មភាព ហើយប្រៀបធៀបពួកវានៅក្នុង ឧទាហរណ៍ក្រឡាចត្រង្គ របស់យើង ។

ដាក់​បញ្ចូល​គ្នា​តែមួយ

ថ្នាក់ លំនាំដើមរបស់យើង .containerគឺជាកុងតឺន័រទទឹងថេរដែលឆ្លើយតប មានន័យថាការ max-widthផ្លាស់ប្តូររបស់វានៅចំនុចឈប់នីមួយៗ។

<div class="container">
  <!-- Content here -->
</div>

សារធាតុរាវ

ប្រើ .container-fluidសម្រាប់កុងតឺន័រទទឹងពេញ ដែលលាតសន្ធឹងទទឹងទាំងមូលនៃច្រកមើល។

<div class="container-fluid">
  ...
</div>

ឆ្លើយតប

Responsive containers គឺថ្មីនៅក្នុង Bootstrap v4.4. ពួកគេអនុញ្ញាតឱ្យអ្នកបញ្ជាក់ថ្នាក់ដែលធំទូលាយ 100% រហូតដល់ចំណុចឈប់ដែលបានបញ្ជាក់ត្រូវបានឈានដល់ បន្ទាប់ពីនោះយើងអនុវត្ត max-widths សម្រាប់ចំណុចឈប់ខ្ពស់នីមួយៗ។ ឧទាហរណ៍ .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

ជាថ្មីម្តងទៀត សំណួរប្រព័ន្ធផ្សព្វផ្សាយទាំងនេះក៏មានតាមរយៈ 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-indexCSS 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តម្លៃខ្ពស់ជាងដើម្បីបង្ហាញព្រំដែនរបស់ពួកគេនៅលើធាតុបងប្អូនបង្កើត។