ឧទាហរណ៍នៃក្រឡាចត្រង្គ Bootstrap
ប្លង់ក្រឡាចត្រង្គជាមូលដ្ឋានដើម្បីឱ្យអ្នកស្គាល់ពីការកសាងនៅក្នុងប្រព័ន្ធក្រឡាចត្រង្គ Bootstrap ។
ក្នុងឧទាហរណ៍ទាំងនេះ .themed-grid-col
ថ្នាក់ត្រូវបានបន្ថែមទៅជួរឈរ ដើម្បីបន្ថែមប្រធានបទមួយចំនួន។ នេះមិនមែនជាថ្នាក់ដែលមាននៅក្នុង Bootstrap តាមលំនាំដើមទេ។
ក្រឡាចត្រង្គប្រាំ
មានប្រព័ន្ធក្រឡាចត្រង្គ Bootstrap ចំនួនប្រាំថ្នាក់ ដែលមួយសម្រាប់ឧបករណ៍នីមួយៗដែលយើងគាំទ្រ។ កម្រិតនីមួយៗចាប់ផ្តើមនៅទំហំច្រកមើលអប្បបរមា ហើយអនុវត្តដោយស្វ័យប្រវត្តិចំពោះឧបករណ៍ធំជាង លុះត្រាតែបដិសេធ។
បីជួរស្មើគ្នា
ទទួលបានជួរឈរទទឹងស្មើៗគ្នាចំនួនបីដោយ ចាប់ផ្តើមពីផ្ទៃតុ និងធ្វើមាត្រដ្ឋានទៅផ្ទៃតុធំ ។ នៅលើឧបករណ៍ចល័ត ថេប្លេត និងខាងក្រោម ជួរឈរនឹងជង់ដោយស្វ័យប្រវត្តិ។
ជួរឈរស្មើគ្នាបីជំនួស
ដោយប្រើ .row-cols-*
ថ្នាក់ អ្នកអាចបង្កើតក្រឡាចត្រង្គដែលមានជួរឈរស្មើគ្នាបានយ៉ាងងាយស្រួល។
.col
កូនរបស់
.row-cols-md-3
.col
កូនរបស់
.row-cols-md-3
.col
កូនរបស់
.row-cols-md-3
ជួរឈរមិនស្មើគ្នាចំនួនបី
ទទួលបានជួរឈរបី ដោយចាប់ផ្តើមពីផ្ទៃតុ និងធ្វើមាត្រដ្ឋានទៅផ្ទៃតុធំ ដែលមានទទឹងផ្សេងៗ។ សូមចងចាំថា ជួរក្រឡាក្រឡាចត្រង្គគួរតែបន្ថែមរហូតដល់ដប់ពីរសម្រាប់ប្លុកផ្តេកតែមួយ។ លើសពីនេះ ហើយជួរឈរចាប់ផ្តើមជង់មិនថាច្រកចូលមើលទេ។
ជួរឈរពីរ
ទទួលបានជួរឈរពីរដែល ចាប់ផ្តើមពីផ្ទៃតុ និងធ្វើមាត្រដ្ឋានទៅផ្ទៃតុធំ ។
ទទឹងពេញ ជួរឈរតែមួយ
គ្មានថ្នាក់ក្រឡាចត្រង្គចាំបាច់សម្រាប់ធាតុដែលមានទទឹងពេញទេ។
ជួរឈរពីរដែលមានជួរឈរពីរ
តាមឯកសារ ការដាក់សំបុកគឺងាយស្រួល - គ្រាន់តែដាក់ជួរជួរនៅក្នុងជួរឈរដែលមានស្រាប់។ នេះផ្តល់ឱ្យអ្នកនូវជួរឈរពីរដែល ចាប់ផ្តើមពីផ្ទៃតុ និងធ្វើមាត្រដ្ឋានទៅផ្ទៃតុធំ ជាមួយនឹងពីរផ្សេងទៀត (ទទឹងស្មើគ្នា) នៅក្នុងជួរធំជាង។
នៅទំហំឧបករណ៍ចល័ត ថេប្លេត និងចុះក្រោម ជួរឈរទាំងនេះ និងជួរឈររបស់ពួកគេនឹងជង់។
ចម្រុះ៖ ទូរសព្ទ និងកុំព្យូទ័រ
ប្រព័ន្ធក្រឡាចត្រង្គ Bootstrap v4 មាន 5 ថ្នាក់៖ xs (តូចបន្ថែម ការបញ្ចូលថ្នាក់នេះមិនត្រូវបានប្រើ) sm (តូច) md (មធ្យម) lg (ធំ) និង xl (ធំបន្ថែម) ។ អ្នកអាចប្រើការរួមបញ្ចូលគ្នាស្ទើរតែទាំងអស់នៃថ្នាក់ទាំងនេះដើម្បីបង្កើតប្លង់ដែលមានភាពស្វាហាប់និងអាចបត់បែនបាន។
ថ្នាក់នីមួយៗធ្វើមាត្រដ្ឋានឡើង មានន័យថាប្រសិនបើអ្នកមានគម្រោងកំណត់ទទឹងដូចគ្នាសម្រាប់ md, lg និង xl អ្នកគ្រាន់តែត្រូវបញ្ជាក់ md ប៉ុណ្ណោះ។
ចម្រុះ៖ ទូរសព្ទ ថេប្លេត និងកុំព្យូទ័រលើតុ
ទឹកស្អុយ
ជាមួយនឹង .gx-*
ថ្នាក់ បំពង់បង្ហូរទឹកផ្តេកអាចត្រូវបានកែតម្រូវ។
.col
ជាមួយនឹង
.gx-4
ទឹកស្អុយ
.col
ជាមួយនឹង
.gx-4
ទឹកស្អុយ
.col
ជាមួយនឹង
.gx-4
ទឹកស្អុយ
.col
ជាមួយនឹង
.gx-4
ទឹកស្អុយ
.col
ជាមួយនឹង
.gx-4
ទឹកស្អុយ
.col
ជាមួយនឹង
.gx-4
ទឹកស្អុយ
ប្រើ .gy-*
ថ្នាក់ដើម្បីគ្រប់គ្រងបំពង់ទឹកបញ្ឈរ។
.col
ជាមួយនឹង
.gy-4
ទឹកស្អុយ
.col
ជាមួយនឹង
.gy-4
ទឹកស្អុយ
.col
ជាមួយនឹង
.gy-4
ទឹកស្អុយ
.col
ជាមួយនឹង
.gy-4
ទឹកស្អុយ
.col
ជាមួយនឹង
.gy-4
ទឹកស្អុយ
.col
ជាមួយនឹង
.gy-4
ទឹកស្អុយ
ជាមួយនឹង .g-*
ថ្នាក់ បំពង់បង្ហូរទឹកក្នុងទិសដៅទាំងពីរអាចត្រូវបានកែតម្រូវ។
.col
ជាមួយនឹង
.g-3
ទឹកស្អុយ
.col
ជាមួយនឹង
.g-3
ទឹកស្អុយ
.col
ជាមួយនឹង
.g-3
ទឹកស្អុយ
.col
ជាមួយនឹង
.g-3
ទឹកស្អុយ
.col
ជាមួយនឹង
.g-3
ទឹកស្អុយ
.col
ជាមួយនឹង
.g-3
ទឹកស្អុយ
ធុង
ថ្នាក់បន្ថែមដែលបានបន្ថែមនៅក្នុង Bootstrap v4.4 អនុញ្ញាតឱ្យកុងតឺន័រដែលមានទទឹង 100% រហូតដល់ចំណុចបំបែកជាក់លាក់មួយ។ v5 បន្ថែម xxl
ចំណុចបំបែកថ្មី។