Source

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

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

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

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

ថ្មីឬមិនស្គាល់ flexbox? សូមអានការណែនាំអំពី CSS Tricks flexbox នេះ សម្រាប់ផ្ទៃខាងក្រោយ ពាក្យវាក្យស័ព្ទ គោលការណ៍ណែនាំ និងព័ត៌មានសង្ខេបនៃកូដ។

មួយក្នុងចំនោមជួរឈរបី
មួយក្នុងចំនោមជួរឈរបី
មួយក្នុងចំនោមជួរឈរបី
<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

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

បំបែកវាចុះ នេះជារបៀបដែលវាដំណើរការ៖

  • កុងតឺន័រផ្តល់នូវមធ្យោបាយមួយដើម្បីដាក់កណ្តាល និងផ្តេកដាក់មាតិកាគេហទំព័ររបស់អ្នក។ ប្រើ .containerសម្រាប់ទទឹងភីកសែលដែលឆ្លើយតប ឬ .container-fluidសម្រាប់ width: 100%គ្រប់ច្រកចូលមើល និងទំហំឧបករណ៍។
  • ជួរដេកគឺជារុំសម្រាប់ជួរឈរ។ ជួរឈរនីមួយៗមានផ្តេក padding(ហៅថារនាស់) សម្រាប់គ្រប់គ្រងចន្លោះរវាងពួកវា។ បន្ទាប់មក វា paddingត្រូវបានប្រឆាំងនៅលើជួរដេកដែលមានរឹមអវិជ្ជមាន។ វិធីនេះ ខ្លឹមសារទាំងអស់នៅក្នុងជួរឈររបស់អ្នកត្រូវបានតម្រឹមដោយមើលឃើញនៅផ្នែកខាងឆ្វេង។
  • នៅក្នុងប្លង់ក្រឡាចត្រង្គ មាតិកាត្រូវតែដាក់ក្នុងជួរឈរ ហើយមានតែជួរឈរប៉ុណ្ណោះដែលអាចជាកូនជួរដេកភ្លាមៗ។
  • សូមអរគុណដល់ flexbox ជួរឈរក្រឡាចត្រង្គដោយគ្មានបញ្ជាក់ widthនឹងប្លង់ដោយស្វ័យប្រវត្តិជាជួរឈរដែលមានទទឹងស្មើគ្នា។ ឧទាហរណ៍ ចំនួនបួននៃ .col-smឆន្ទៈនីមួយៗមានទទឹង 25% ដោយស្វ័យប្រវត្តិ ពីចំណុចបំបែកតូច និងខ្ពស់ជាងនេះ។ សូមមើល ផ្នែក ជួរឈរប្លង់ស្វ័យប្រវត្តិ សម្រាប់ឧទាហរណ៍បន្ថែម។
  • ថ្នាក់ជួរឈរបង្ហាញពីចំនួនជួរឈរដែលអ្នកចង់ប្រើក្នុងចំណោម 12 ដែលអាចធ្វើទៅបានក្នុងមួយជួរ។ ដូច្នេះ បើ​អ្នក​ចង់​បាន​ជួរ​ឈរ​ទទឹង​ស្មើៗ​គ្នា​ទាំង​បី អ្នក​អាច​ប្រើ .col-4.
  • ជួរ​ឈរ widths ត្រូវ​បាន​កំណត់​ជា​ភាគរយ ដូច្នេះ​ពួកវា​តែងតែ​មាន​លក្ខណៈ​រាវ និង​ទំហំ​ទាក់ទង​នឹង​ធាតុ​មេ​របស់​ពួកគេ។
  • ជួរ​ឈរ​មាន​ផ្ដេក padding​ក្នុង​ការ​បង្កើត​ផ្លូវ​ទឹក​រវាង​ជួរ​ឈរ​នីមួយៗ ទោះ​ជា​យ៉ាង​ណា​ក៏​ដោយ អ្នក​អាច​យក​ចេញ margin​ពី​ជួរ​ដេក និង padding​ពី​ជួរ​ឈរ​ដោយ​មាន .no-gutters​នៅ​លើ .row.
  • ដើម្បីធ្វើឱ្យក្រឡាចត្រង្គឆ្លើយតប មានចំណុចបំបែកក្រឡាចត្រង្គចំនួនប្រាំ ដែលមួយសម្រាប់ ចំណុចឈប់ឆ្លើយតប នីមួយៗ ៖ ចំណុចឈប់ទាំងអស់ (តូចបន្ថែម) តូច មធ្យម ធំ និងធំបន្ថែម។
  • ចំណុចបំបែកក្រឡាចត្រង្គគឺផ្អែកលើសំណួរមេឌៀដែលមានទទឹងអប្បបរមា មានន័យថា ពួកវាអនុវត្តចំពោះចំណុចឈប់មួយនោះ និងចំណុចទាំងអស់ខាងលើ (ឧ. .col-sm-4អនុវត្តចំពោះឧបករណ៍តូច មធ្យម ធំ និងធំបន្ថែម ប៉ុន្តែមិនមែនជា xsចំណុចបំបែកទីមួយទេ)។
  • អ្នកអាចប្រើថ្នាក់ក្រឡាចត្រង្គដែលបានកំណត់ជាមុន (ដូចជា .col-4) ឬ Sass mixins សម្រាប់ការសម្គាល់អត្ថន័យបន្ថែមទៀត។

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

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

ខណៈពេលដែល Bootstrap ប្រើ ems ឬ rems សម្រាប់កំណត់ទំហំភាគច្រើន pxs ត្រូវបានប្រើសម្រាប់ចំណុចបំបែកក្រឡាចត្រង្គ និងទទឹងធុង។ នេះ​ដោយ​សារ​តែ​ទទឹង​ច្រក​មើល​គឺ​ជា​ភីកសែល ហើយ​មិន​ផ្លាស់​ប្តូរ​ជា​មួយ​នឹង ​ទំហំ​ពុម្ព​អក្សរ

មើលពីរបៀបដែលទិដ្ឋភាពនៃប្រព័ន្ធក្រឡាចត្រង្គ Bootstrap ដំណើរការលើឧបករណ៍ជាច្រើនជាមួយនឹងតារាងងាយស្រួល។

តូចបន្ថែម
<576px
តូច
≥576px
មធ្យម
≥768px
ធំ
≥992px
ធំបន្ថែម
≥1200px
ទទឹងធុងអតិបរមា គ្មាន (ស្វ័យប្រវត្តិ) 540px 720px 960px 1140px
បុព្វបទថ្នាក់ .col- .col-sm- .col-md- .col-lg- .col-xl-
# នៃជួរឈរ ១២
ទទឹងប្រឡាយ 30px (15px នៅផ្នែកម្ខាងនៃជួរឈរ)
សំបុក បាទ
លំដាប់ជួរ បាទ

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

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

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

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

1 នៃ 2
2 នៃ 2
1 នៃ 3
2 នៃ 3
3 នៃ 3
<div class="container">
  <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>

ជួរឈរទទឹងស្មើគ្នាអាចបំបែកជាជួរច្រើន ប៉ុន្តែមាន កំហុស Safari flexbox ដែលរារាំងវាមិនឱ្យដំណើរការដោយគ្មានភាពច្បាស់លាស់ flex-basisborder. មានដំណោះស្រាយសម្រាប់កំណែកម្មវិធីរុករកតាមអ៊ីនធឺណិតចាស់ ប៉ុន្តែវាមិនចាំបាច់ទេ ប្រសិនបើអ្នកធ្វើបច្ចុប្បន្នភាព។

ជួរឈរ
ជួរឈរ
ជួរឈរ
ជួរឈរ
<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

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

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

1 នៃ 3
2 នៃ 3 (ធំទូលាយ)
3 នៃ 3
1 នៃ 3
2 នៃ 3 (ធំទូលាយ)
3 នៃ 3
<div class="container">
  <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
<div class="container">
  <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>

ពហុជួរដែលមានទទឹងស្មើគ្នា

បង្កើត​ជួរ​ឈរ​ទទឹង​ស្មើ​គ្នា​ដែល​លាតសន្ធឹង​ជួរ​ដេក​ច្រើន​ដោយ​បញ្ចូល .w-100​កន្លែង​ដែល​អ្នក​ចង់​ឱ្យ​ជួរ​ឈរ​បំបែក​ទៅ​បន្ទាត់​ថ្មី។ ធ្វើ​ឱ្យ​ការ​បំបែក​ឆ្លើយតប​ដោយ​ការ​លាយ​បញ្ចូល​គ្នា .w-100​ជាមួយ ​ឧបករណ៍​បង្ហាញ​ដែល​ឆ្លើយតប ​ខ្លះ ។

col
col
col
col
<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

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

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

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

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

col
col
col
col
កូល-៨
កូល-៤
<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>

ជង់ទៅផ្ដេក

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

col-sm-8
col-sm-4
col-sm
col-sm
col-sm
<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>

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

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

.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
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .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>

ការតម្រឹម

ប្រើឧបករណ៍តម្រឹម flexbox ដើម្បីតម្រឹមជួរបញ្ឈរ និងផ្ដេក។

ការតម្រឹមបញ្ឈរ

មួយក្នុងចំនោមជួរឈរបី
មួយក្នុងចំនោមជួរឈរបី
មួយក្នុងចំនោមជួរឈរបី
មួយក្នុងចំនោមជួរឈរបី
មួយក្នុងចំនោមជួរឈរបី
មួយក្នុងចំនោមជួរឈរបី
មួយក្នុងចំនោមជួរឈរបី
មួយក្នុងចំនោមជួរឈរបី
មួយក្នុងចំនោមជួរឈរបី
<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>
មួយក្នុងចំនោមជួរឈរបី
មួយក្នុងចំនោមជួរឈរបី
មួយក្នុងចំនោមជួរឈរបី
<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

ការតម្រឹមផ្តេក

ជួរឈរមួយក្នុងចំណោមជួរឈរពីរ
ជួរឈរមួយក្នុងចំណោមជួរឈរពីរ
ជួរឈរមួយក្នុងចំណោមជួរឈរពីរ
ជួរឈរមួយក្នុងចំណោមជួរឈរពីរ
ជួរឈរមួយក្នុងចំណោមជួរឈរពីរ
ជួរឈរមួយក្នុងចំណោមជួរឈរពីរ
ជួរឈរមួយក្នុងចំណោមជួរឈរពីរ
ជួរឈរមួយក្នុងចំណោមជួរឈរពីរ
ជួរឈរមួយក្នុងចំណោមជួរឈរពីរ
ជួរឈរមួយក្នុងចំណោមជួរឈរពីរ
<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

គ្មានលូ

ប្រឡាយរវាងជួរឈរនៅក្នុងថ្នាក់ក្រឡាចត្រង្គដែលបានកំណត់ជាមុនរបស់យើងអាចត្រូវបានយកចេញដោយប្រើ .no-gutters. marginវា​ដក s អវិជ្ជមាន ​ចេញ​ពី .rowនិង​ផ្ដេក padding​ពី​ជួរ​ឈរ​កុមារ​ភ្លាមៗ។

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

ត្រូវការការរចនាគែមទៅគែម? ទម្លាក់ឪពុកម្តាយ .container.container-fluid

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

នៅក្នុងការអនុវត្ត នេះជារបៀបដែលវាមើលទៅ។ ចំណាំ អ្នកអាចបន្តប្រើវាជាមួយថ្នាក់ក្រឡាចត្រង្គដែលបានកំណត់ជាមុនផ្សេងទៀតទាំងអស់ (រួមទាំងទទឹងជួរឈរ កម្រិតឆ្លើយតប លំដាប់ឡើងវិញ និងច្រើនទៀត)។

.col-12 .col-sm-6 .col-md-8
.col-6 .col-md-4
<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

ការរុំជួរឈរ

ប្រសិនបើជួរឈរលើសពី 12 ត្រូវបានដាក់ក្នុងជួរតែមួយ ក្រុមនីមួយៗនៃជួរឈរបន្ថែមនឹងរុំលើបន្ទាត់ថ្មី។

.col-9
.col-4
ចាប់តាំងពី 9 + 4 = 13 > 12, div ធំទូលាយ 4 ជួរនេះត្រូវបានរុំនៅលើបន្ទាត់ថ្មីជាឯកតាជាប់គ្នា។
.col-6
ជួរបន្ទាប់បន្តតាមបន្ទាត់ថ្មី។
<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

ការបំបែកជួរឈរ

ការបំបែកជួរឈរទៅបន្ទាត់ថ្មីនៅក្នុង flexbox តម្រូវឱ្យមានការ hack តូចមួយ៖ បន្ថែមធាតុជាមួយ width: 100%គ្រប់ទីកន្លែងដែលអ្នកចង់រុំជួរឈររបស់អ្នកទៅបន្ទាត់ថ្មី។ ជាធម្មតា វាត្រូវបានសម្រេចដោយ .rows ច្រើន ប៉ុន្តែមិនមែនគ្រប់វិធីសាស្រ្តនៃការអនុវត្តអាចរាប់បញ្ចូលសម្រាប់រឿងនេះទេ។

.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
<div class="row">
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

  <!-- Force next columns to break to new line -->
  <div class="w-100"></div>

  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>

អ្នកក៏អាចអនុវត្តការសម្រាកនេះនៅកន្លែងឈប់សម្រាកជាក់លាក់ជាមួយនឹង ឧបករណ៍ប្រើប្រាស់ការបង្ហាញដែលឆ្លើយតប របស់យើង ។

.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
<div class="row">
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

  <!-- Force next columns to break to new line at md breakpoint and up -->
  <div class="w-100 d-none d-md-block"></div>

  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>

កំពុងរៀបចំឡើងវិញ

លំដាប់ថ្នាក់

ប្រើ .order-ថ្នាក់សម្រាប់គ្រប់គ្រង លំដាប់ដែលមើលឃើញ នៃមាតិការបស់អ្នក។ ថ្នាក់ទាំងនេះមានប្រតិកម្ម ដូច្នេះអ្នកអាចកំណត់ orderដោយចំណុចឈប់ (ឧទាហរណ៍ .order-1.order-md-2)។ រួម​បញ្ចូល​ទាំង​ការ​គាំទ្រ​សម្រាប់ 1​ឆ្លង 12​កាត់​ថ្នាក់​ក្រឡា​ទាំង​ប្រាំ។

ដំបូង​ឡើយ ប៉ុន្តែ​មិន​បាន​បញ្ជា
ទីពីរ ប៉ុន្តែចុងក្រោយ
ទីបីប៉ុន្តែដំបូង
<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

វាក៏មានថ្នាក់ឆ្លើយតប .order-firstនិង .order-lastថ្នាក់ដែលផ្លាស់ប្តូរ orderធាតុដោយអនុវត្ត order: -1និង order: 13( order: $columns + 1) រៀងៗខ្លួន។ ថ្នាក់ទាំងនេះក៏អាចត្រូវបានលាយបញ្ចូលគ្នាជាមួយនឹង .order-*ថ្នាក់លេខតាមតម្រូវការ។

ទីមួយ ប៉ុន្តែចុងក្រោយ
ទីពីរ​ប៉ុន្តែ​គ្មាន​ការ​បញ្ជា
ទីបីប៉ុន្តែដំបូង
<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

អុហ្វសិតជួរឈរ

អ្នកអាចអុហ្វសិតជួរឈរក្រឡាចត្រង្គតាមពីរវិធី៖ .offset-ថ្នាក់ក្រឡាចត្រង្គឆ្លើយតបរបស់យើង និង ឧបករណ៍ប្រើប្រាស់រឹម របស់យើង ។ ថ្នាក់ក្រឡាចត្រង្គមានទំហំដើម្បីផ្គូផ្គងជួរឈរ ខណៈដែលរឹមមានប្រយោជន៍ជាងសម្រាប់ប្លង់រហ័ស ដែលទទឹងនៃអុហ្វសិតអាចប្រែប្រួល។

ថ្នាក់អុហ្វសិត

ផ្លាស់ទីជួរឈរទៅខាងស្តាំដោយប្រើ .offset-md-*ថ្នាក់។ ថ្នាក់ទាំងនេះបង្កើនរឹមខាងឆ្វេងនៃជួរឈរដោយ *ជួរឈរ។ ឧទាហរណ៍ .offset-md-4ផ្លាស់ទី .col-md-4លើជួរឈរបួន។

.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

បន្ថែមពីលើការជម្រះជួរឈរនៅចំណុចឈប់ឆ្លើយតប អ្នកប្រហែលជាត្រូវកំណត់អុហ្វសិតឡើងវិញ។ សូមមើលសកម្មភាពនេះនៅក្នុង ឧទាហរណ៍ក្រឡាចត្រង្គ

.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>

ឧបករណ៍ប្រើប្រាស់រឹម

ជាមួយនឹងការផ្លាស់ទីទៅ flexbox នៅក្នុង v4 អ្នកអាចប្រើឧបករណ៍ប្រើប្រាស់រឹមដូចជា .mr-autoដើម្បីបង្ខំជួរឈរបងប្អូនឱ្យនៅឆ្ងាយពីគ្នាទៅវិញទៅមក។

.col-md-4
.col-md-4 .ml-ស្វ័យប្រវត្តិ
.col-md-3 .ml-md-auto
.col-md-3 .ml-md-auto
.col-auto .mr-auto
.col-auto
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
  <div class="col-auto">.col-auto</div>
</div>

សំបុក

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

កម្រិត 1: .col-sm-9
កម្រិតទី 2: .col-8 .col-sm-6
កម្រិតទី 2: .col-4 .col-sm-6
<div class="row">
  <div class="col-sm-9">
    Level 1: .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>

Sass mixins

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

អថេរ

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

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

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

ល្បាយ

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();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

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

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

.example-container {
  width: 800px;
  @include make-container();
}

.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);
  }
}
ខ្លឹមសារសំខាន់
ខ្លឹមសារបន្ទាប់បន្សំ
<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-columns: 12 !default;
$grid-gutter-width: 30px !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%)។