ប្រព័ន្ធក្រឡាចត្រង្គលំនាំដើមដែលបានផ្តល់ជាផ្នែកនៃ Bootstrap គឺជា ក្រឡាចត្រង្គ 940px-wide, 12-column grid ។

វាក៏មានបំរែបំរួលឆ្លើយតបចំនួន 4 សម្រាប់ឧបករណ៍ និងដំណោះស្រាយផ្សេងៗផងដែរ៖ ទូរសព្ទ ថេប្លេតបញ្ឈរ ផ្ទៃតុ និងផ្ទៃតុតូច និងផ្ទៃតុធំទូលាយ។

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

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

ជាមួយនឹងប្រព័ន្ធក្រឡាចត្រង្គឋិតិវន្ត (មិនរាវ) នៅក្នុង Bootstrap ការធ្វើសំបុកមានភាពងាយស្រួល។ ដើម្បីដាក់ខ្លឹមសាររបស់អ្នក គ្រាន់តែបន្ថែមជួរឈរថ្មី .rowនិងសំណុំនៃ .span*ជួរឈរនៅក្នុងជួរឈរដែលមានស្រាប់ .span*។

ឧទាហរណ៍

ជួរ​ដេក​ដែល​បាន​បង្កប់​គួរ​តែ​រួម​បញ្ចូល​សំណុំ​ជួរ​ឈរ​ដែល​បន្ថែម​រហូត​ដល់​ចំនួន​ជួរ​ឈរ​របស់​វា​មេ។ ឧទាហរណ៍ .span3ជួរឈរពីរគួរត្រូវបានដាក់ក្នុង .span6.

<div class = "row" > 
  <div class = "span12" > 
    កម្រិត 1 នៃជួរឈរ
    <div class = "row" > 
      <div class = "span6" > កម្រិត 2 </div> 
      <div class = "span6" > កម្រិត 2 </div> 
    </div>
  </div>
</div>

ភាគរយ មិនមែនភីកសែលទេ។

ប្រព័ន្ធក្រឡាចត្រង្គរាវប្រើភាគរយសម្រាប់ទទឹងជួរឈរជំនួសឱ្យភីកសែលថេរ។ វាក៏មានបំរែបំរួលឆ្លើយតបដូចគ្នាទៅនឹងប្រព័ន្ធក្រឡាចត្រង្គថេររបស់យើងផងដែរ ដោយធានានូវសមាមាត្រត្រឹមត្រូវសម្រាប់ដំណោះស្រាយអេក្រង់ និងឧបករណ៍សំខាន់ៗ។

ជួររាវ

ធ្វើ​ឱ្យ​មាន​រាវ​ជួរ​ដេក​ណា​មួយ​ដោយ​គ្រាន់​តែ​ប្ដូរ .row​ទៅ .row-fluid. ជួរឈរនៅដដែល ដែលធ្វើឱ្យវាមានភាពត្រង់បំផុតក្នុងការត្រឡប់រវាងប្លង់ថេរ និងវត្ថុរាវ។

សម្គាល់

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

ការដាក់សំបុកជាមួយក្រឡាចត្រង្គរាវគឺខុសគ្នាបន្តិច៖ ចំនួនជួរឈរដែលដាក់ជាប់គ្នាមិនចាំបាច់ត្រូវគ្នានឹងមេនោះទេ។ ជំនួសមកវិញ ជួរឈររបស់អ្នកត្រូវបានកំណត់ឡើងវិញនៅកម្រិតនីមួយៗ ដោយសារជួរនីមួយៗមាន 100% នៃជួរមេ។

<div class = "row-fluid" > 
  <div class = "span12" > 
    កម្រិត 1 នៃជួរឈរ
    <div class = "row-fluid" > 
      <div class = "span6" > កម្រិត 2 </div> 
      <div class = "span6" > កម្រិត 2 </div> 
    </div>
  </div>
</div>

អថេរនៅក្នុង LESS

បានបង្កើតឡើងនៅក្នុង Bootstrap គឺជាអថេរមួយចំនួនសម្រាប់ប្ដូរតាមបំណងនូវប្រព័ន្ធក្រឡាចត្រង្គ 940px លំនាំដើម ដែលបានចងក្រងជាឯកសារខាងលើ។ អថេរទាំងអស់សម្រាប់ក្រឡាចត្រង្គត្រូវបានរក្សាទុកក្នុង variables.less ។

របៀបប្ដូរតាមបំណង

ការកែប្រែក្រឡាចត្រង្គមានន័យថាផ្លាស់ប្តូរ @grid*អថេរទាំងបី និងការចងក្រង Bootstrap ឡើងវិញ។ ផ្លាស់ប្តូរអថេរក្រឡាចត្រង្គក្នុង variables.less ហើយប្រើវិធីមួយក្នុងចំណោម វិធីទាំងបួនដែលបានចងក្រងជាឯកសារដើម្បីចងក្រងឡើងវិញ ។ ប្រសិនបើអ្នកកំពុងបន្ថែមជួរឈរបន្ថែមទៀត ត្រូវប្រាកដថាបន្ថែម CSS សម្រាប់អ្នកនៅក្នុង grid.less ។

រក្សាការឆ្លើយតប

ការប្ដូរតាមបំណងនៃក្រឡាចត្រង្គដំណើរការតែនៅកម្រិតលំនាំដើមប៉ុណ្ណោះ ក្រឡាចត្រង្គ 940px ។ ដើម្បីរក្សាទិដ្ឋភាពឆ្លើយតបនៃ Bootstrap អ្នកក៏នឹងត្រូវប្ដូរក្រឡាចត្រង្គតាមបំណងក្នុង responsive.less ផងដែរ។

ប្លង់ថេរ

លំនាំដើម និងសាមញ្ញ 940px-wide ប្លង់កណ្តាលសម្រាប់គេហទំព័រ ឬទំព័រណាមួយដែលផ្តល់ដោយតែមួយ <div class="container">។

<រាងកាយ>
  <div class = "container" > 
    ...
  </div>
</body>

ប្លង់រាវ

<div class="container-fluid">ផ្តល់នូវរចនាសម្ព័ន្ធទំព័រដែលអាចបត់បែនបាន ទទឹងអប្បបរមា និងអតិបរមា និងរបារចំហៀងខាងឆ្វេង។ វាល្អសម្រាប់កម្មវិធី និងឯកសារ។

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!---មាតិការបារចំហៀង-->
    </div>
    <div class = "span10" > 
      <!---មាតិការាងកាយ-->
    </div>
  </div>
</div>

ឧបករណ៍ដែលគាំទ្រ

Bootstrap គាំទ្រសំណួរមេឌៀមួយចំនួនតូចនៅក្នុងឯកសារតែមួយ ដើម្បីជួយធ្វើឱ្យគម្រោងរបស់អ្នកកាន់តែសមស្របនៅលើឧបករណ៍ផ្សេងៗ និងគុណភាពបង្ហាញអេក្រង់។ នេះជាអ្វីដែលរួមបញ្ចូល៖

ទាមទារស្លាកមេតា

ដើម្បីធានាថាឧបករណ៍បង្ហាញទំព័រឆ្លើយតបបានត្រឹមត្រូវ រួមបញ្ចូលស្លាកមេតានៃច្រកចូលមើល។

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  

តើ​ពួកគេ​ធ្វើអ្វី

សំណួរប្រព័ន្ធផ្សព្វផ្សាយអនុញ្ញាតឱ្យមាន CSS ផ្ទាល់ខ្លួនដោយផ្អែកលើលក្ខខណ្ឌមួយចំនួន - សមាមាត្រ ទទឹង ប្រភេទការបង្ហាញ។ល។ - ប៉ុន្តែជាធម្មតាផ្តោតជុំវិញ min-widthនិង max-width.

• កែប្រែទទឹងជួរឈរក្នុងក្រឡាចត្រង្គរបស់យើង។
• ធាតុជង់ជំនួសឱ្យអណ្តែតនៅកន្លែងដែលចាំបាច់
• ប្ដូរទំហំក្បាល និងអត្ថបទឱ្យកាន់តែសមស្របសម្រាប់ឧបករណ៍

Bootstrap មិនរួមបញ្ចូលសំណួរមេឌៀទាំងនេះដោយស្វ័យប្រវត្តិទេ ប៉ុន្តែការយល់ដឹង និងការបន្ថែមពួកវាគឺងាយស្រួលណាស់ ហើយទាមទារការដំឡើងតិចតួចបំផុត។ អ្នកមានជម្រើសមួយចំនួនសម្រាប់រួមបញ្ចូលមុខងារឆ្លើយតបរបស់ Bootstrap៖

1. ប្រើកំណែឆ្លើយតបដែលបានចងក្រង bootstrap-responsive.css
2. បន្ថែម @import "responsive.less" និងចងក្រង Bootstrap ឡើងវិញ
3. កែប្រែ និងចងក្រង responsive.less ឡើងវិញជាឯកសារដាច់ដោយឡែក

ហេតុអ្វីមិនបញ្ចូលវា? និយាយឱ្យត្រង់ទៅ មិនមែនអ្វីៗទាំងអស់ត្រូវតែឆ្លើយតបនោះទេ។ ជំនួសឱ្យការលើកទឹកចិត្តអ្នកអភិវឌ្ឍន៍ឱ្យលុបមុខងារនេះចេញ យើងគិតថាវាល្អបំផុតក្នុងការបើកវា។

  // ទូរស័ព្ទទេសភាព និងចុះក្រោម
  @media ( ទទឹង អតិបរមា ៖ 480px ) { ... } _     
 
  // ទូរស័ព្ទផ្ដេកទៅកុំព្យូទ័របន្ទះបញ្ឈរ
  @media ( ទទឹង អតិបរមា ៖ ៧៦៨ ភី ច ) { ... }     
 
  // ថេប្លេតបញ្ឈរទៅទេសភាព និងផ្ទៃតុ
  @media ( min - width : 768px ) និង ( max - width : 980px ) { ... }        
 
  // ផ្ទៃតុធំ
  @media ( min - width : 1200px ) { .. }