Bootstrap ត្រូវបានបង្កើតឡើងនៅលើក្រឡាចត្រង្គ 12-column ឆ្លើយតប។ យើងក៏បានរួមបញ្ចូលទាំងប្លង់ទទឹងថេរ និងលំហូរដោយផ្អែកលើប្រព័ន្ធនោះ។
ប្រព័ន្ធក្រឡាចត្រង្គលំនាំដើមដែលបានផ្តល់ជាផ្នែកនៃ Bootstrap គឺជា ក្រឡាចត្រង្គ 940px-wide, 12-column grid ។
វាក៏មានបំរែបំរួលឆ្លើយតបចំនួន 4 សម្រាប់ឧបករណ៍ និងដំណោះស្រាយផ្សេងៗផងដែរ៖ ទូរសព្ទ ថេប្លេតបញ្ឈរ ផ្ទៃតុ និងផ្ទៃតុតូច និងផ្ទៃតុធំទូលាយ។
- <div class = "row" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
ដូចដែលបានបង្ហាញនៅទីនេះ ប្លង់មូលដ្ឋានអាចត្រូវបានបង្កើតជាមួយ "ជួរឈរ" ពីរដែលនីមួយៗលាតសន្ធឹងលើចំនួននៃជួរឈរគ្រឹះចំនួន 12 ដែលយើងកំណត់ថាជាផ្នែកនៃប្រព័ន្ធក្រឡាចត្រង្គរបស់យើង។
- <div class = "row" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset4" > ... </div>
- </div>
ជាមួយនឹងប្រព័ន្ធក្រឡាចត្រង្គឋិតិវន្ត (មិនរាវ) នៅក្នុង Bootstrap ការធ្វើសំបុកមានភាពងាយស្រួល។ ដើម្បីដាក់ខ្លឹមសាររបស់អ្នក គ្រាន់តែបន្ថែមជួរឈរថ្មី .row
និងសំណុំនៃ .span*
ជួរឈរនៅក្នុងជួរឈរដែលមានស្រាប់ .span*
។
- <div class = "row" >
- <div class = "span12" >
- កម្រិត 1 នៃជួរឈរ
- <div class = "row" >
- <div class = "span6" > កម្រិត 2 </div>
- <div class = "span6" > កម្រិត 2 </div>
- </div>
- </div>
- </div>
អថេរ | តម្លៃលំនាំដើម | ការពិពណ៌នា |
---|---|---|
@gridColumns |
១២ | ចំនួនជួរឈរ |
@gridColumnWidth |
60px | ទទឹងនៃជួរឈរនីមួយៗ |
@gridGutterWidth |
20px | ចន្លោះអវិជ្ជមានរវាងជួរឈរ |
@siteWidth |
គណនាផលបូកនៃជួរឈរទាំងអស់ | រាប់ចំនួនជួរឈរ និងផ្លូវទឹកដើម្បីកំណត់ទទឹងរបស់ .container-fixed() mixin |
បានបង្កើតឡើងនៅក្នុង 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 គាំទ្រសំណួរមេឌៀមួយចំនួនដើម្បីជួយធ្វើឱ្យគម្រោងរបស់អ្នកកាន់តែសមស្របនៅលើឧបករណ៍ផ្សេងៗ និងគុណភាពបង្ហាញអេក្រង់។ នេះជាអ្វីដែលរួមបញ្ចូល៖
ស្លាកសញ្ញា | ទទឹងប្លង់ | ទទឹងជួរឈរ | ទទឹងប្រឡាយ |
---|---|---|---|
ស្មាតហ្វូន | 480px និងខាងក្រោម | ជួរឈររាវ គ្មានទទឹងថេរ | |
ថេប្លេតបញ្ឈរ | 480px ដល់ 768px | ជួរឈររាវ គ្មានទទឹងថេរ | |
ថេប្លេតទេសភាព | 768px ទៅ 940px | 44px | 20px |
លំនាំដើម | 940px និងខ្ពស់ជាងនេះ។ | 60px | 20px |
អេក្រង់ធំ | 1210px និងខ្ពស់ជាងនេះ។ | 70px | 30px |
សំណួរប្រព័ន្ធផ្សព្វផ្សាយអនុញ្ញាតឱ្យមាន CSS ផ្ទាល់ខ្លួនដោយផ្អែកលើលក្ខខណ្ឌមួយចំនួន - សមាមាត្រ ទទឹង ប្រភេទការបង្ហាញ។ល។ - ប៉ុន្តែជាធម្មតាផ្តោតជុំវិញ min-width
និង max-width
.
Bootstrap មិនរួមបញ្ចូលសំណួរមេឌៀទាំងនេះដោយស្វ័យប្រវត្តិទេ ប៉ុន្តែការយល់ដឹង និងការបន្ថែមពួកវាគឺងាយស្រួលណាស់ ហើយទាមទារការដំឡើងតិចតួចបំផុត។ អ្នកមានជម្រើសមួយចំនួនសម្រាប់រួមបញ្ចូលមុខងារឆ្លើយតបរបស់ Bootstrap៖
ហេតុអ្វីមិនបញ្ចូលវា? និយាយឱ្យត្រង់ទៅ មិនមែនអ្វីៗទាំងអស់ត្រូវតែឆ្លើយតបនោះទេ។ ជំនួសឱ្យការលើកទឹកចិត្តអ្នកអភិវឌ្ឍន៍ឱ្យលុបមុខងារនេះចេញ យើងគិតថាវាល្អបំផុតក្នុងការបើកវា។
- // ទូរស័ព្ទទេសភាព និងចុះក្រោម
- @media ( ទទឹង អតិបរមា ៖ 480px ) { ... } _
- // ទូរស័ព្ទផ្ដេកទៅកុំព្យូទ័របន្ទះបញ្ឈរ
- @media ( ទទឹង អតិបរមា ៖ ៧៦៨ ភី ច ) { ... }
- // ថេប្លេតបញ្ឈរទៅទេសភាព និងផ្ទៃតុ
- @media ( min - width : 768px ) និង ( max - width : 940px ) { ... }
- // ផ្ទៃតុធំ
- @media ( min - width : 1200px ) { .. }