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