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

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

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

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

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-៤
.col-lg-៤
.col-lg-៤
.col-xl-៤
.col-xl-៤
.col-xl-៤

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

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

.col-md-4
.col-md-4
.col-md-4

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

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

.col-md-៣
.col-md-6
.col-md-៣

ជួរឈរពីរ

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

.col-md-8
.col-md-4

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

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


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

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

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

.col-md-8
.col-md-6
.col-md-6
.col-md-4

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

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

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

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

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

.col-12 .col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4