ធុង

របៀបដែលពួកគេធ្វើការ

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

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

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

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

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

ឧបករណ៍ផ្ទុកលំនាំដើម

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

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

ធុងដែលឆ្លើយតប

Responsive containers អនុញ្ញាត​ឱ្យ​អ្នក​បញ្ជាក់​ថ្នាក់​ដែល​មាន​ទទឹង 100% រហូត​ដល់​ដល់​ចំណុច​ឈប់​ដែល​បាន​បញ្ជាក់ បន្ទាប់​ពី​នោះ​យើង​អនុវត្ត max-widths សម្រាប់​ចំណុច​ឈប់​ខ្ពស់​នីមួយៗ។ ឧទាហរណ៍ .container-smគឺធំទូលាយ 100% ដើម្បីចាប់ផ្តើមរហូតដល់ smចំណុចឈប់ត្រូវបានឈានដល់ ដែលវានឹងពង្រីកជាមួយ md, lg, xl, និង xxl.

<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>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

ធុងផ្ទុកសារធាតុរាវ

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

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

សាស

ដូចដែលបានបង្ហាញខាងលើ Bootstrap បង្កើតស៊េរីនៃថ្នាក់កុងតឺន័រដែលបានកំណត់ជាមុនដើម្បីជួយអ្នកបង្កើតប្លង់ដែលអ្នកចង់បាន។ អ្នក​អាច​ប្ដូរ​ថ្នាក់​កុងតឺន័រ​ដែល​បាន​កំណត់​ជាមុន​ទាំងនេះ​តាម​បំណង​ដោយ​ការ​កែប្រែ​ផែនទី Sass (ដែល​មាន​នៅ​ក្នុង _variables.scss) ដែល​ផ្តល់​ថាមពល​ដល់​ពួកគេ៖

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

បន្ថែមពីលើការកំណត់ Sass តាមបំណង អ្នកក៏អាចបង្កើតធុងផ្ទាល់ខ្លួនរបស់អ្នកជាមួយ Sass mixin របស់យើង។

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

// Usage
.custom-container {
  @include make-container();
}

សម្រាប់ព័ត៌មានបន្ថែម និងឧទាហរណ៍អំពីរបៀបកែប្រែផែនទី និងអថេរ Sass របស់យើង សូមមើល ផ្នែក Sass នៃឯកសារក្រឡាចត្រង្គ ។