រន្ទា

Bootstrap ត្រូវបានបង្កើតឡើងនៅលើក្រឡាចត្រង្គ 12-column ឆ្លើយតប។ យើងក៏បានរួមបញ្ចូលទាំងប្លង់ទទឹងថេរ និងលំហូរដោយផ្អែកលើប្រព័ន្ធនោះ។

ទាមទារប្រភេទឯកសារ HTML5

Bootstrap ប្រើធាតុ HTML និងលក្ខណៈសម្បត្តិ CSS ដែលតម្រូវឱ្យប្រើប្រភេទឯកសារ HTML5 ។ ត្រូវប្រាកដថាបញ្ចូលវានៅដើមទំព័រ Bootstrapped ទាំងអស់នៅក្នុងគម្រោងរបស់អ្នក។

<!DOCTYPE html>
<html lang = "en" > 
  ...
</html>

អក្សរកាត់ និងតំណភ្ជាប់

នៅក្នុង ឯកសារ scaffolding.less យើងកំណត់ការបង្ហាញជាសកលជាមូលដ្ឋាន វាយអក្សរ និងរចនាប័ទ្មតំណ។ ជាពិសេស យើង៖

ដករឹមនៅលើដងខ្លួន
កំណត់ background-color: white;នៅលើbody
ប្រើ @baseFontFamily, @baseFontSize, និង @baseLineHeightគុណលក្ខណៈជាមូលដ្ឋានអក្សរពុម្ពរបស់យើង។
កំណត់ពណ៌តំណសកលតាមរយៈ @linkColorនិងអនុវត្តការគូសបន្ទាត់ក្រោមតំណតែប៉ុណ្ណោះ:hover

កំណត់ឡើងវិញតាមរយៈ Normalize

ចាប់តាំងពី Bootstrap 2 ការកំណត់ឡើងវិញ CSS ប្រពៃណីបានវិវត្តន៍ដើម្បីប្រើប្រាស់ធាតុពី Normalize.css ដែលជាគម្រោងដោយ Nicolas Gallagher ដែលផ្តល់ថាមពលដល់ HTML5 Boilerplate ផងដែរ។

ការកំណត់ឡើងវិញថ្មីនៅតែអាចត្រូវបានរកឃើញនៅក្នុង reset.less ប៉ុន្តែជាមួយនឹងធាតុជាច្រើនត្រូវបានដកចេញសម្រាប់ភាពសង្ខេប និងភាពត្រឹមត្រូវ។

១

៤

៨

៦

១២

ប្រព័ន្ធក្រឡាចត្រង្គលំនាំដើមដែលបានផ្ដល់ឱ្យក្នុង Bootstrap ប្រើប្រាស់ ជួរឈរចំនួន 12 ដែលបង្ហាញនៅទទឹង 724px, 940px (លំនាំដើមដោយគ្មាន CSS ឆ្លើយតប) និង 1170px ។ នៅខាងក្រោម 767px viewports ជួរឈរក្លាយជារាវ និងជង់បញ្ឈរ។

<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*។

ឧទាហរណ៍

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

កម្រិត 1 នៃជួរឈរ

កម្រិត 2

<div class = "row" > 
  <div class = "span6" > 
    ជួរទី 1
    <div class = "row" > 
      <div class = "span3" > កម្រិត 2 </div> 
      <div class = "span3" > កម្រិត 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>

អថេរ	តម្លៃលំនាំដើម	ការពិពណ៌នា
`@gridColumns`	១២	ចំនួនជួរឈរ
`@gridColumnWidth`	60px	ទទឹងនៃជួរឈរនីមួយៗ
`@gridGutterWidth`	20px	ចន្លោះអវិជ្ជមានរវាងជួរឈរ

អថេរនៅក្នុង 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>

ឧបករណ៍ឆ្លើយតប

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

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

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

ប្រើសំណួរប្រព័ន្ធផ្សព្វផ្សាយប្រកបដោយទំនួលខុសត្រូវ និងគ្រាន់តែជាការចាប់ផ្តើមសម្រាប់ទស្សនិកជនចល័តរបស់អ្នក។ សម្រាប់គម្រោងធំ សូមពិចារណាលើមូលដ្ឋានកូដដែលយកចិត្តទុកដាក់ និងមិនមែនជាស្រទាប់នៃសំណួរមេឌៀទេ។

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

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

ស្លាកសញ្ញា	ទទឹងប្លង់	ទទឹងជួរឈរ	ទទឹងប្រឡាយ
ស្មាតហ្វូន	480px និងខាងក្រោម	ជួរឈររាវ គ្មានទទឹងថេរ
ស្មាតហ្វូនទៅថេប្លេត	767px និងខាងក្រោម	ជួរឈររាវ គ្មានទទឹងថេរ
ថេប្លេតបញ្ឈរ	768px និងខ្ពស់ជាងនេះ។	42px	20px
លំនាំដើម	980px និងខ្ពស់ជាងនេះ។	60px	20px
អេក្រង់ធំ	1200px និងខ្ពស់ជាងនេះ។	70px	30px

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

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

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

ដោយប្រើសំណួរប្រព័ន្ធផ្សព្វផ្សាយ

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

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

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

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

ថ្នាក់ឧបករណ៍ប្រើប្រាស់ដែលឆ្លើយតប

តើពួកគេជាអ្វី

សម្រាប់ការអភិវឌ្ឍន៍ដែលងាយស្រួលប្រើសម្រាប់ទូរសព្ទចល័តកាន់តែលឿន សូមប្រើថ្នាក់ឧបករណ៍ប្រើប្រាស់ជាមូលដ្ឋានទាំងនេះសម្រាប់បង្ហាញ និងលាក់ខ្លឹមសារតាមឧបករណ៍។

ពេលណាត្រូវប្រើ

ប្រើនៅលើមូលដ្ឋានដែលមានកំណត់ និងជៀសវាងការបង្កើតកំណែខុសគ្នាទាំងស្រុងនៃគេហទំព័រតែមួយ។ ជំនួសមកវិញ ប្រើពួកវាដើម្បីបំពេញបទបង្ហាញរបស់ឧបករណ៍នីមួយៗ។

ឧទាហរណ៍ អ្នកអាចបង្ហាញ <select>ធាតុសម្រាប់ nav នៅលើប្លង់ទូរសព្ទ ប៉ុន្តែមិនមែននៅលើថេប្លេត ឬកុំព្យូទ័រលើតុទេ។

ថ្នាក់គាំទ្រ

បង្ហាញនៅទីនេះគឺជាតារាងនៃថ្នាក់ដែលយើងគាំទ្រ និងឥទ្ធិពលរបស់វាទៅលើប្លង់សំណួរមេឌៀដែលបានផ្តល់ឱ្យ (ដាក់ស្លាកដោយឧបករណ៍)។ ពួកគេអាចត្រូវបានរកឃើញនៅក្នុង responsive.less។

ថ្នាក់	ទូរស័ព្ទ480px និងខាងក្រោម	ថេប្លេត767px និងខាងក្រោម	កុំព្យូទ័រលើតុ768px និងខ្ពស់ជាងនេះ។
`.visible-phone`	ដែលអាចមើលឃើញ	លាក់	លាក់
`.visible-tablet`	លាក់	ដែលអាចមើលឃើញ	លាក់
`.visible-desktop`	លាក់	លាក់	ដែលអាចមើលឃើញ
`.hidden-phone`	លាក់	ដែលអាចមើលឃើញ	ដែលអាចមើលឃើញ
`.hidden-tablet`	ដែលអាចមើលឃើញ	លាក់	ដែលអាចមើលឃើញ
`.hidden-desktop`	ដែលអាចមើលឃើញ	ដែលអាចមើលឃើញ	លាក់

ករណីសាកល្បង

ប្ដូរទំហំកម្មវិធីរុករកតាមអ៊ីនធឺណិតរបស់អ្នក ឬផ្ទុកនៅលើឧបករណ៍ផ្សេងៗ ដើម្បីសាកល្បងថ្នាក់ខាងលើ។

អាចមើលឃើញនៅលើ...

សញ្ញាធីកពណ៌បៃតងបង្ហាញថាថ្នាក់អាចមើលឃើញនៅក្នុងទិដ្ឋភាពបច្ចុប្បន្នរបស់អ្នក។

ទូរស័ព្ទ✔ទូរស័ព្ទ
ថេប្លេត✔ថេប្លេត
ផ្ទៃតុ✔ផ្ទៃតុ

លាក់នៅ...

នៅទីនេះ សញ្ញាធីកពណ៌បៃតងបង្ហាញថាថ្នាក់ត្រូវបានលាក់នៅក្នុងទិដ្ឋភាពបច្ចុប្បន្នរបស់អ្នក។

ទូរស័ព្ទ✔ទូរស័ព្ទ
ថេប្លេត✔ថេប្លេត
ផ្ទៃតុ✔ផ្ទៃតុ

រន្ទា

រចនាប័ទ្មសកល សម្រាប់កំណត់ឡើងវិញ CSS វាយអក្សរ និងតំណ

ទាមទារប្រភេទឯកសារ HTML5

អក្សរកាត់ និងតំណភ្ជាប់

កំណត់ឡើងវិញតាមរយៈ Normalize

ប្រព័ន្ធក្រឡាចត្រង្គលំនាំដើម 12 ជួរជាមួយនឹងការបង្វិលឆ្លើយតប

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

ជួរឈរសំបុក

ឧទាហរណ៍

ប្រព័ន្ធក្រឡាចត្រង្គសារធាតុរាវ 12 ជួរឈរដែលផ្អែកលើភាគរយ

ជួរឈររាវ

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

ជួររាវ

សម្គាល់

សំបុករាវ

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

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

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

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

Layouts គំរូមូលដ្ឋានដើម្បីបង្កើតគេហទំព័រ

ប្លង់ថេរ

ប្លង់រាវ

រចនាឆ្លើយតប សំណួរមេឌៀសម្រាប់ឧបករណ៍ និងដំណោះស្រាយផ្សេងៗ

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

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

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

ដោយប្រើសំណួរប្រព័ន្ធផ្សព្វផ្សាយ

ថ្នាក់ឧបករណ៍ប្រើប្រាស់ដែលឆ្លើយតប

តើពួកគេជាអ្វី

ពេលណាត្រូវប្រើ

ថ្នាក់គាំទ្រ

ករណីសាកល្បង

អាចមើលឃើញនៅលើ...

លាក់នៅ...

រចនាប័ទ្មសកល សម្រាប់កំណត់ឡើងវិញ CSS វាយអក្សរ និងតំណ

ទាមទារប្រភេទឯកសារ HTML5

អក្សរកាត់ និងតំណភ្ជាប់

កំណត់ឡើងវិញតាមរយៈ Normalize

ប្រព័ន្ធក្រឡាចត្រង្គលំនាំដើម 12 ជួរជាមួយនឹងការបង្វិលឆ្លើយតប

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

ជួរឈរសំបុក

ឧទាហរណ៍

ប្រព័ន្ធក្រឡាចត្រង្គសារធាតុរាវ 12 ជួរឈរដែលផ្អែកលើភាគរយ

ជួរឈររាវ

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

ជួររាវ

សម្គាល់

សំបុករាវ

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

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

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

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

Layouts គំរូមូលដ្ឋានដើម្បីបង្កើតគេហទំព័រ

ប្លង់ថេរ

ប្លង់រាវ

រចនាឆ្លើយតប សំណួរមេឌៀសម្រាប់ឧបករណ៍ និងដំណោះស្រាយផ្សេងៗ

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

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

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

ដោយប្រើសំណួរប្រព័ន្ធផ្សព្វផ្សាយ

ថ្នាក់ឧបករណ៍ប្រើប្រាស់ដែលឆ្លើយតប

តើពួកគេជាអ្វី

ពេលណាត្រូវប្រើ

ថ្នាក់គាំទ្រ

ករណីសាកល្បង

អាចមើលឃើញនៅលើ...

លាក់​នៅ...

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

លាក់នៅ...