រំលងទៅមាតិកាសំខាន់ រំលងទៅការរុករកឯកសារ
Check
in English

ប្រព័ន្ធក្រឡាចត្រង្គ

ប្រើក្រឡាចត្រង្គ flexbox ដំបូងរបស់ទូរសព្ទចល័តដ៏មានអានុភាពរបស់យើង ដើម្បីបង្កើតប្លង់នៃរាង និងទំហំទាំងអស់ដោយអរគុណដល់ប្រព័ន្ធដប់ពីរជួរ កម្រិតឆ្លើយតបលំនាំដើមចំនួនប្រាំមួយ អថេរ Sass និង mixins និងរាប់សិបនៃថ្នាក់ដែលបានកំណត់ជាមុន។

ឧទាហរណ៍

ប្រព័ន្ធក្រឡាចត្រង្គរបស់ Bootstrap ប្រើប្រាស់ស៊េរីនៃធុង ជួរដេក និងជួរឈរដើម្បីធ្វើប្លង់ និងតម្រឹមមាតិកា។ វាត្រូវបានបង្កើតឡើងដោយប្រើ flexbox និងឆ្លើយតបយ៉ាងពេញលេញ។ ខាងក្រោមនេះជាឧទាហរណ៍ និងការពន្យល់ស៊ីជម្រៅអំពីរបៀបដែលប្រព័ន្ធក្រឡាចត្រង្គភ្ជាប់មកជាមួយ។

ថ្មីឬមិនស្គាល់ flexbox? សូមអានការណែនាំអំពី CSS Tricks Flexbox នេះ សម្រាប់ផ្ទៃខាងក្រោយ ពាក្យវាក្យស័ព្ទ គោលការណ៍ណែនាំ និងព័ត៌មានសង្ខេបនៃកូដ។
ជួរឈរ
ជួរឈរ
ជួរឈរ
html
<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

ឧទាហរណ៍ខាងលើបង្កើតជួរទទឹងស្មើៗគ្នាចំនួនបីនៅទូទាំងឧបករណ៍ និងច្រកចូលមើលដោយប្រើថ្នាក់ក្រឡាចត្រង្គដែលបានកំណត់ជាមុនរបស់យើង។ ជួរ​ឈរ​ទាំង​នោះ​ត្រូវ​បាន​ដាក់​កណ្ដាល​ទំព័រ​ជាមួយ​មេ .container

របៀបដែលវាដំណើរការ

បំបែកវាចុះ នេះជារបៀបដែលប្រព័ន្ធក្រឡាចត្រង្គមកជាមួយគ្នា៖

  • ក្រឡាចត្រង្គរបស់យើងគាំទ្រ ចំណុចឈប់ឆ្លើយតបចំនួនប្រាំមួយចំណុចបំបែក គឺផ្អែកលើ min-widthសំណួរប្រព័ន្ធផ្សព្វផ្សាយ មានន័យថាវាប៉ះពាល់ដល់ចំណុចឈប់នោះ និងចំណុចទាំងអស់ខាងលើ (ឧ. .col-sm-4អនុវត្តចំពោះ sm, md, lg, xl, និង xxl)។ នេះមានន័យថាអ្នកអាចគ្រប់គ្រងទំហំកុងតឺន័រ និងជួរឈរ និងឥរិយាបថដោយចំណុចឈប់នីមួយៗ។

  • កណ្តាលកុងតឺន័រ និងផ្តេកដាក់មាតិការបស់អ្នក។ ប្រើ .containerសម្រាប់ទទឹងភីកសែលឆ្លើយតប .container-fluidសម្រាប់ width: 100%គ្រប់ច្រកចូលមើល និងឧបករណ៍ ឬកុងតឺន័រឆ្លើយតប (ឧ។ .container-md) សម្រាប់ការរួមបញ្ចូលគ្នានៃទទឹងភីកសែល និងវត្ថុរាវ។

  • ជួរដេកគឺជារុំសម្រាប់ជួរឈរ។ ជួរឈរនីមួយៗមានផ្តេក padding(ហៅថារនាស់) សម្រាប់គ្រប់គ្រងចន្លោះរវាងពួកវា។ បន្ទាប់មក វា paddingត្រូវបានប្រឆាំងនៅលើជួរដេកដែលមានរឹមអវិជ្ជមាន ដើម្បីធានាថាខ្លឹមសារនៅក្នុងជួរឈររបស់អ្នកត្រូវបានតម្រឹមដោយមើលឃើញនៅផ្នែកខាងឆ្វេង។ ជួរ​ដេក​ក៏​គាំទ្រ​ថ្នាក់​កែប្រែ​ដើម្បី ​អនុវត្ត​ទំហំ​ជួរ​ឈរ ​និង ​ថ្នាក់ ​ផ្លូវ​ទឹក​ឱ្យ ​ស្មើភាព​គ្នា ​ដើម្បី​ផ្លាស់ប្ដូរ​គម្លាត​នៃ​មាតិកា​របស់​អ្នក។

  • ជួរឈរមានភាពបត់បែនមិនគួរឱ្យជឿ។ មានជួរឈរគំរូចំនួន 12 ក្នុងមួយជួរ ដែលអនុញ្ញាតឱ្យអ្នកបង្កើតបន្សំផ្សេងគ្នានៃធាតុដែលលាតសន្ធឹងលើចំនួនជួរឈរណាមួយ។ ថ្នាក់​ជួរ​ឈរ​បង្ហាញ​ចំនួន​ជួរ​ឈរ​គំរូ​ដល់​វិសាលភាព (ឧ. col-4វិសាលភាព​បួន)។ widths ត្រូវបានកំណត់ជាភាគរយ ដូច្នេះអ្នកតែងតែមានទំហំដែលទាក់ទងដូចគ្នា។

  • Gutters ក៏ឆ្លើយតប និងអាចប្ដូរតាមបំណងផងដែរ។ ថ្នាក់ Gutter មាន នៅទូទាំងចំណុចឈប់ទាំងអស់ ដោយមានទំហំដូចគ្នាទាំងអស់ជាមួយនឹង រឹម និងចន្លោះទ្រនាប់ របស់យើង ។ ផ្លាស់ប្តូរប្រឡាយផ្តេកជាមួយ .gx-*ថ្នាក់, លូទឹកបញ្ឈរជាមួយ .gy-*, ឬរនាំងទាំងអស់ដែលមាន .g-*ថ្នាក់។ .g-0ក៏មានផងដែរដើម្បីយកទឹកចេញ។

  • អថេរ Sass ផែនទី និង mixins ផ្តល់ថាមពលដល់ក្រឡាចត្រង្គ។ ប្រសិនបើអ្នកមិនចង់ប្រើថ្នាក់ក្រឡាចត្រង្គដែលបានកំណត់ជាមុននៅក្នុង Bootstrap អ្នកអាចប្រើ Sass ប្រភពនៃក្រឡាចត្រង្គ របស់យើង ដើម្បីបង្កើតរបស់អ្នកផ្ទាល់ជាមួយនឹងការសម្គាល់អត្ថន័យបន្ថែមទៀត។ យើងក៏រួមបញ្ចូលផងដែរនូវលក្ខណៈសម្បត្តិផ្ទាល់ខ្លួន CSS មួយចំនួនដើម្បីប្រើប្រាស់អថេរ Sass ទាំងនេះសម្រាប់ភាពបត់បែនកាន់តែច្រើនសម្រាប់អ្នក។

ត្រូវដឹងពីដែនកំណត់ និង កំហុសជុំវិញ flexbox ដូចជា អសមត្ថភាពក្នុងការប្រើធាតុ HTML មួយចំនួនជា flex containers

ជម្រើសក្រឡាចត្រង្គ

ប្រព័ន្ធក្រឡាចត្រង្គរបស់ Bootstrap អាចសម្របតាមចំណុចបំបែកលំនាំដើមទាំងប្រាំមួយ និងចំណុចបំបែកណាមួយដែលអ្នកប្ដូរតាមបំណង។ ថ្នាក់ក្រឡាចត្រង្គលំនាំដើមទាំងប្រាំមួយមានដូចខាងក្រោម៖

  • តូចបន្ថែម (xs)
  • តូច (sm)
  • មធ្យម (md)
  • ធំ (lg)
  • ធំបន្ថែម (xl)
  • ធំបន្ថែម (xxl)

ដូចដែលបានកត់សម្គាល់ខាងលើ ចំណុចបំបែកទាំងនេះនីមួយៗមានកុងតឺន័រផ្ទាល់ខ្លួន បុព្វបទថ្នាក់តែមួយគត់ និងឧបករណ៍កែប្រែ។ នេះជារបៀបដែលក្រឡាចត្រង្គផ្លាស់ប្តូរឆ្លងកាត់ចំណុចឈប់ទាំងនេះ៖

xs
<576px
sm
≥576px
md
≥768px
lg
≥ 992px
xl
≥ 1200px
xxl
≥ 1400px
កុងតឺន័រmax-width គ្មាន (ស្វ័យប្រវត្តិ) 540px 720px 960px 1140px 1320px
បុព្វបទថ្នាក់ .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
# នៃជួរឈរ ១២
ទទឹងប្រឡាយ 1.5rem (.75rem នៅខាងឆ្វេង និងស្តាំ)
លូទឹកផ្ទាល់ខ្លួន បាទ
សំបុក បាទ
លំដាប់ជួរ បាទ

ជួរឈរប្លង់ស្វ័យប្រវត្តិ

ប្រើប្រាស់ថ្នាក់ជួរឈរជាក់លាក់នៃចំណុចបំបែកសម្រាប់ការកំណត់ទំហំជួរឈរងាយស្រួលដោយមិនមានថ្នាក់លេខរៀងច្បាស់លាស់ដូចជា .col-sm-6.

ទទឹងស្មើគ្នា

ឧទាហរណ៍ នេះ​គឺ​ជា​ប្លង់​ក្រឡា​ចត្រង្គ​ពីរ​ដែល​អនុវត្ត​ចំពោះ​គ្រប់​ឧបករណ៍ និង​ច្រក​មើល ពី xs​ដល់ xxl. បន្ថែមចំនួននៃថ្នាក់ឯកតាតិចជាងសម្រាប់ចំណុចឈប់នីមួយៗដែលអ្នកត្រូវការ ហើយជួរឈរនីមួយៗនឹងមានទទឹងដូចគ្នា។

1 នៃ 2
2 នៃ 2
1 នៃ 3
2 នៃ 3
3 នៃ 3
html
<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

កំណត់ទទឹងជួរឈរមួយ។

ប្លង់ស្វ័យប្រវត្តិសម្រាប់ជួរឈរក្រឡាចត្រង្គ flexbox ក៏មានន័យថាអ្នកអាចកំណត់ទទឹងនៃជួរឈរមួយ ហើយឱ្យជួរឈរបងប្អូនបង្កើតទំហំដោយស្វ័យប្រវត្តិនៅជុំវិញវា។ អ្នកអាចប្រើថ្នាក់ក្រឡាចត្រង្គដែលបានកំណត់ជាមុន (ដូចបង្ហាញខាងក្រោម) ក្រឡាចត្រង្គ mixins ឬទទឹងក្នុងជួរ។ ចំណាំថាជួរឈរផ្សេងទៀតនឹងផ្លាស់ប្តូរទំហំមិនថាទទឹងនៃជួរឈរកណ្តាលនោះទេ។

1 នៃ 3
2 នៃ 3 (ធំទូលាយ)
3 នៃ 3
1 នៃ 3
2 នៃ 3 (ធំទូលាយ)
3 នៃ 3
html
<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

មាតិកាទទឹងអថេរ

ប្រើ col-{breakpoint}-autoថ្នាក់ដើម្បីដាក់ទំហំជួរឈរដោយផ្អែកលើទទឹងធម្មជាតិនៃមាតិការបស់វា។

1 នៃ 3
មាតិកាទទឹងអថេរ
3 នៃ 3
1 នៃ 3
មាតិកាទទឹងអថេរ
3 នៃ 3
html
<div class="container text-center">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

ថ្នាក់ឆ្លើយតប

ក្រឡាចត្រង្គរបស់ Bootstrap រួមមានប្រាំមួយថ្នាក់នៃថ្នាក់ដែលបានកំណត់ជាមុនសម្រាប់ការកសាងប្លង់ឆ្លើយតបស្មុគស្មាញ។ ប្ដូរ​ទំហំ​ជួរ​ឈរ​របស់​អ្នក​តាម​បំណង​លើ​ឧបករណ៍​តូច តូច មធ្យម ធំ ឬ​ធំ​បន្ថែម​ទៀត ទោះ​ជា​យ៉ាង​ណា​អ្នក​មើល​ឃើញ​ថា​សម។

ចំណុចឈប់ទាំងអស់។

សម្រាប់ក្រឡាចត្រង្គដែលដូចគ្នាពីឧបករណ៍តូចបំផុតទៅធំបំផុត សូមប្រើ .colនិង .col-*ថ្នាក់។ បញ្ជាក់​ថ្នាក់​លេខ​រៀង ពេល​អ្នក​ត្រូវ​ការ​ជួរ​ឈរ​ដែល​មាន​ទំហំ​ពិសេស។ បើមិនដូច្នេះទេ មានអារម្មណ៍សេរីក្នុងការនៅជាប់ .col

col
col
col
col
កូល-៨
កូល-៤
html
<div class="container text-center">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

ជង់ទៅផ្ដេក

ដោយ​ប្រើ​សំណុំ .col-sm-*​ថ្នាក់​តែ​មួយ អ្នក​អាច​បង្កើត​ប្រព័ន្ធ​ក្រឡាចត្រង្គ​មូលដ្ឋាន​មួយ​ដែល​ចាប់​ផ្តើម​ចេញ​ជា​ជង់ ហើយ​ក្លាយ​ជា​ផ្ដេក​នៅ​ចំណុច​បំបែក​តូច ( sm)។

col-sm-8
col-sm-4
col-sm
col-sm
col-sm
html
<div class="container text-center">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

ច្រ​ប​ល​ចូល​គ្នា​រួចហើយ​ផ្គូ​រ​ផ្គង់

មិន​ចង់​ឱ្យ​ជួរ​ឈរ​របស់​អ្នក​គ្រាន់​តែ​ជង់​ក្នុង​លំដាប់​ក្រឡា​មួយ​ចំនួន​? ប្រើបន្សំនៃថ្នាក់ផ្សេងៗគ្នាសម្រាប់ថ្នាក់នីមួយៗតាមតម្រូវការ។ សូមមើលឧទាហរណ៍ខាងក្រោមសម្រាប់គំនិតកាន់តែប្រសើរឡើងអំពីរបៀបដែលវាដំណើរការទាំងអស់។

.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
html
<div class="container text-center">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

ជួរជួរ

ប្រើ .row-cols-*ថ្នាក់ឆ្លើយតបដើម្បីកំណត់ចំនួនជួរឈរដែលបង្ហាញខ្លឹមសារ និងប្លង់របស់អ្នកបានយ៉ាងរហ័ស។ ចំណែក .col-*​ថ្នាក់​ធម្មតា​អនុវត្ត​ចំពោះ​ជួរ​ឈរ​នីមួយៗ (ឧ. .col-md-4) ថ្នាក់​ជួរ​ឈរ​ត្រូវ​បាន​កំណត់​នៅ​លើ​មេ .row​ជា​ផ្លូវកាត់។ .row-cols-autoអ្នកអាចផ្តល់ឱ្យជួរឈរនូវទទឹងធម្មជាតិរបស់ពួកគេ ។

ប្រើ​ថ្នាក់​ជួរ​ឈរ​ជួរ​ដេក​ទាំងនេះ ដើម្បី​បង្កើត​ប្លង់​ក្រឡា​មូលដ្ឋាន​យ៉ាង​រហ័ស ឬ​ដើម្បី​គ្រប់គ្រង​ប្លង់​កាត​របស់​អ្នក។

ជួរឈរ
ជួរឈរ
ជួរឈរ
ជួរឈរ
html
<div class="container text-center">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>
ជួរឈរ
ជួរឈរ
ជួរឈរ
ជួរឈរ
html
<div class="container text-center">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>
ជួរឈរ
ជួរឈរ
ជួរឈរ
ជួរឈរ
html
<div class="container text-center">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>
ជួរឈរ
ជួរឈរ
ជួរឈរ
ជួរឈរ
html
<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>
ជួរឈរ
ជួរឈរ
ជួរឈរ
ជួរឈរ
html
<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>
ជួរឈរ
ជួរឈរ
ជួរឈរ
ជួរឈរ
html
<div class="container text-center">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

អ្នកក៏អាចប្រើ Sass mixin ដែលមានភ្ជាប់មកជាមួយផងដែរ row-cols()

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

សំបុក

ដើម្បីដាក់មាតិការបស់អ្នកជាមួយក្រឡាចត្រង្គលំនាំដើម សូមបន្ថែមជួរឈរថ្មី .rowនិងសំណុំនៃ .col-sm-*ជួរឈរនៅក្នុងជួរឈរដែលមានស្រាប់ .col-sm-*។ ជួរ​ដេក​ដែល​ជាប់​គួរ​រួម​បញ្ចូល​សំណុំ​ជួរ​ឈរ​ដែល​បន្ថែម​រហូត​ដល់ 12 ឬ​តិច​ជាង​នេះ (វា​មិន​តម្រូវ​ឱ្យ​អ្នក​ប្រើ​ជួរ​ឈរ​ទាំង 12 ដែល​មាន​ទាំង​អស់)។

កម្រិត 1: .col-sm-3
កម្រិតទី 2: .col-8 .col-sm-6
កម្រិតទី 2: .col-4 .col-sm-6
html
<div class="container text-center">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

សាស

នៅពេលប្រើឯកសារ Sass ប្រភពរបស់ Bootstrap អ្នកមានជម្រើសក្នុងការប្រើអថេរ Sass និង mixins ដើម្បីបង្កើតប្លង់ទំព័រផ្ទាល់ខ្លួន អត្ថន័យ និងការឆ្លើយតប។ ថ្នាក់ក្រឡាចត្រង្គដែលបានកំណត់ជាមុនរបស់យើងប្រើអថេរ និង mixins ដូចគ្នាទាំងនេះ ដើម្បីផ្តល់នូវឈុតទាំងមូលនៃថ្នាក់ដែលត្រៀមរួចជាស្រេចសម្រាប់ការប្រើប្រាស់នូវប្លង់ឆ្លើយតបរហ័ស។

អថេរ

អថេរ និងផែនទីកំណត់ចំនួនជួរឈរ ទទឹងផ្លូវទឹក និងចំណុចសំណួរប្រព័ន្ធផ្សព្វផ្សាយដែលត្រូវចាប់ផ្តើមជួរឈរអណ្តែត។ យើងប្រើវាដើម្បីបង្កើតថ្នាក់ក្រឡាចត្រង្គដែលបានកំណត់ជាមុនដែលបានចងក្រងជាឯកសារខាងលើ ក៏ដូចជាសម្រាប់ mixins ផ្ទាល់ខ្លួនដែលបានរាយខាងក្រោម។

$grid-columns:      12;
$grid-gutter-width: 1.5rem;
$grid-row-columns:  6;
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

ល្បាយ

Mixins ត្រូវបានប្រើដោយភ្ជាប់ជាមួយអថេរក្រឡាចត្រង្គ ដើម្បីបង្កើត CSS semantic សម្រាប់ជួរឈរក្រឡាចត្រង្គនីមួយៗ។

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);

ការប្រើប្រាស់ឧទាហរណ៍

អ្នកអាចកែប្រែអថេរទៅជាតម្លៃផ្ទាល់ខ្លួនរបស់អ្នក ឬគ្រាន់តែប្រើ mixins ជាមួយនឹងតម្លៃលំនាំដើមរបស់វា។ នេះជាឧទាហរណ៍នៃការប្រើប្រាស់ការកំណត់លំនាំដើមដើម្បីបង្កើតប្លង់ជួរឈរពីរដែលមានគម្លាតរវាង។

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}
ខ្លឹមសារសំខាន់
ខ្លឹមសារបន្ទាប់បន្សំ
html
<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

ការកំណត់ក្រឡាចត្រង្គតាមបំណង

ដោយប្រើអថេរ និងផែនទីក្រឡាចត្រង្គ Sass ដែលភ្ជាប់មកជាមួយរបស់យើង វាអាចធ្វើទៅបានដើម្បីប្ដូរតាមបំណងនូវថ្នាក់ក្រឡាចត្រង្គដែលបានកំណត់ជាមុនទាំងស្រុង។ ផ្លាស់ប្តូរចំនួនថ្នាក់ ទំហំសំណួរមេឌៀ និងទទឹងធុង - បន្ទាប់មកចងក្រងឡើងវិញ។

ជួរឈរនិងបំពង់បង្ហូរទឹក

ចំនួនជួរឈរក្រឡាចត្រង្គអាចត្រូវបានកែប្រែតាមរយៈអថេរ Sass ។ $grid-columnsត្រូវបានប្រើដើម្បីបង្កើតទទឹង (គិតជាភាគរយ) នៃជួរឈរនីមួយៗ ខណៈពេលដែល $grid-gutter-widthកំណត់ទទឹងសម្រាប់ជួរឈរ។ $grid-row-columnsត្រូវបានប្រើដើម្បីកំណត់ចំនួនអតិបរមានៃជួរឈរ .row-cols-*លេខណាមួយលើសពីដែនកំណត់នេះមិនត្រូវបានអើពើ។

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !default;

ថ្នាក់ក្រឡាចត្រង្គ

ការផ្លាស់ទីហួសពីជួរឈរខ្លួនឯង អ្នកក៏អាចកំណត់ចំនួនក្រឡាក្រឡាចត្រង្គតាមបំណងផងដែរ។ ប្រសិន​បើ​អ្នក​ចង់​បាន​តែ​ក្រឡា​ក្រឡា​ចត្រង្គ​បួន អ្នក​នឹង​ធ្វើ​បច្ចុប្បន្នភាព $grid-breakpoints​និង $container-max-widths​អ្វី​មួយ​ដូច​នេះ៖

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

នៅពេលធ្វើការផ្លាស់ប្តូរណាមួយចំពោះអថេរ Sass ឬផែនទី អ្នកនឹងត្រូវរក្សាទុកការផ្លាស់ប្តូររបស់អ្នក និងចងក្រងឡើងវិញ។ ការធ្វើដូច្នេះនឹងបញ្ចេញនូវសំណុំថ្មីនៃថ្នាក់ក្រឡាចត្រង្គដែលបានកំណត់ជាមុនសម្រាប់ទទឹងជួរឈរ អុហ្វសិត និងលំដាប់។ ឧបករណ៍ប្រើប្រាស់លទ្ធភាពមើលឃើញដែលឆ្លើយតបនឹងត្រូវបានអាប់ដេតផងដែរ ដើម្បីប្រើចំណុចឈប់ផ្ទាល់ខ្លួន។ ត្រូវប្រាកដថាកំណត់តម្លៃក្រឡាចត្រង្គនៅក្នុង px(មិនមែន rem, em%)។