ឧទាហរណ៍នៃក្រឡាចត្រង្គ Bootstrap

ប្លង់ក្រឡាចត្រង្គជាមូលដ្ឋានដើម្បីឱ្យអ្នកស្គាល់ពីការកសាងនៅក្នុងប្រព័ន្ធក្រឡាចត្រង្គ Bootstrap ។

ក្នុងឧទាហរណ៍ទាំងនេះ .themed-grid-colថ្នាក់ត្រូវបានបន្ថែមទៅជួរឈរ ដើម្បីបន្ថែមប្រធានបទមួយចំនួន។ នេះមិនមែនជាថ្នាក់ដែលមាននៅក្នុង Bootstrap តាមលំនាំដើមទេ។

ក្រឡាចត្រង្គប្រាំ

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

.col-4

.col-sm-4

.col-md-4

.col-lg-៤

.col-xl-៤

.col-xxl-៤

បីជួរស្មើគ្នា

ទទួលបានជួរឈរទទឹងស្មើៗគ្នាចំនួនបី ដោយ ចាប់ផ្តើមពីផ្ទៃតុ និងធ្វើមាត្រដ្ឋានទៅផ្ទៃតុធំ ។ នៅលើឧបករណ៍ចល័ត ថេប្លេត និងខាងក្រោម ជួរឈរនឹងជង់ដោយស្វ័យប្រវត្តិ។

.col-md-4

ជួរឈរស្មើគ្នាបីជំនួស

ដោយប្រើ .row-cols-*ថ្នាក់ អ្នកអាចបង្កើតក្រឡាចត្រង្គដែលមានជួរឈរស្មើគ្នាបានយ៉ាងងាយស្រួល។

.colកូនរបស់ .row-cols-md-3

ជួរឈរមិនស្មើគ្នាចំនួនបី

ទទួលបានជួរឈរបី ដោយចាប់ផ្តើមពីផ្ទៃតុ និងធ្វើមាត្រដ្ឋានទៅផ្ទៃតុធំ ដែលមានទទឹងផ្សេងៗ។ សូមចងចាំថា ជួរក្រឡាក្រឡាចត្រង្គគួរតែបន្ថែមរហូតដល់ដប់ពីរសម្រាប់ប្លុកផ្តេកតែមួយ។ លើសពីនេះ ហើយជួរឈរចាប់ផ្តើមជង់មិនថាច្រកចូលមើលទេ។

.col-md-៣

.col-md-6

.col-md-៣

ជួរឈរពីរ

ទទួលបានជួរឈរពីរដែល ចាប់ផ្តើមពីផ្ទៃតុ និងធ្វើមាត្រដ្ឋានទៅផ្ទៃតុធំ ។

.col-md-8

.col-md-4

ទទឹងពេញ ជួរឈរតែមួយ

គ្មានថ្នាក់ក្រឡាចត្រង្គចាំបាច់សម្រាប់ធាតុដែលមានទទឹងពេញទេ។

ជួរឈរពីរដែលមានជួរឈរពីរ

តាមឯកសារ ការដាក់សំបុកគឺងាយស្រួល - គ្រាន់តែដាក់ជួរជួរនៅក្នុងជួរឈរដែលមានស្រាប់។ នេះផ្តល់ឱ្យអ្នកនូវជួរឈរពីរដែល ចាប់ផ្តើមពីផ្ទៃតុ និងធ្វើមាត្រដ្ឋានទៅផ្ទៃតុធំ ជាមួយនឹងពីរផ្សេងទៀត (ទទឹងស្មើគ្នា) នៅក្នុងជួរឈរធំជាង។

នៅទំហំឧបករណ៍ចល័ត ថេប្លេត និងចុះក្រោម ជួរឈរទាំងនេះ និងជួរឈររបស់ពួកគេនឹងជង់។

.col-md-8

.col-md-6

.col-md-4

ចម្រុះ៖ ទូរសព្ទ និងកុំព្យូទ័រ

ប្រព័ន្ធក្រឡាចត្រង្គ Bootstrap v4 មាន 5 ថ្នាក់៖ xs (តូចបន្ថែម ការបញ្ចូលថ្នាក់នេះមិនត្រូវបានប្រើ) sm (តូច) md (មធ្យម) lg (ធំ) និង xl (ធំបន្ថែម) ។ អ្នកអាចប្រើការរួមបញ្ចូលគ្នាស្ទើរតែទាំងអស់នៃថ្នាក់ទាំងនេះដើម្បីបង្កើតប្លង់ដែលមានភាពស្វាហាប់និងអាចបត់បែនបាន។

ថ្នាក់នីមួយៗធ្វើមាត្រដ្ឋានឡើង មានន័យថាប្រសិនបើអ្នកមានគម្រោងកំណត់ទទឹងដូចគ្នាសម្រាប់ md, lg និង xl អ្នកគ្រាន់តែត្រូវបញ្ជាក់ md ប៉ុណ្ណោះ។

.col-md-8

.col-6 .col-md-4

.col-6

ចម្រុះ៖ ទូរសព្ទ ថេប្លេត និងកុំព្យូទ័រលើតុ

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

ទឹកស្អុយ

ជាមួយនឹង .gx-*ថ្នាក់ បំពង់បង្ហូរទឹកផ្តេកអាចត្រូវបានកែតម្រូវ។

.colជាមួយនឹង .gx-4ទឹកស្អុយ

ប្រើ .gy-*ថ្នាក់ដើម្បីគ្រប់គ្រងបំពង់ទឹកបញ្ឈរ។

.colជាមួយនឹង .gy-4ទឹកស្អុយ

ជាមួយនឹង .g-*ថ្នាក់ បំពង់បង្ហូរទឹកក្នុងទិសដៅទាំងពីរអាចត្រូវបានកែតម្រូវ។

.colជាមួយនឹង .g-3ទឹកស្អុយ

ធុង

ថ្នាក់បន្ថែមដែលបានបន្ថែមនៅក្នុង Bootstrap v4.4 អនុញ្ញាតឱ្យកុងតឺន័រដែលមានទទឹង 100% រហូតដល់ចំណុចបំបែកជាក់លាក់មួយ។ v5 បន្ថែម xxlចំណុចបំបែកថ្មី។

.កុងតឺន័រ

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.container-fluid