រន្ទា

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

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

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

  1. <!DOCTYPE html>
  2. <html lang = "en" >
  3. ...
  4. </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 ជួរឈរក្លាយជារាវ និងជង់បញ្ឈរ។

  1. <div class = "row" >
  2. <div class = "span4" > ... </div>
  3. <div class = "span8" > ... </div>
  4. </div>

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


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

៤ អុហ្វសិត ៤
៣ អុហ្វសិត ៣
៣ អុហ្វសិត ៣
៨ អុហ្វសិត ៤
  1. <div class = "row" >
  2. <div class = "span4" > ... </div>
  3. <div class = "span4 offset4" > ... </div>
  4. </div>

ជួរឈរសំបុក

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

ឧទាហរណ៍

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

កម្រិត 1 នៃជួរឈរ
កម្រិត 2
កម្រិត 2
  1. <div class = "row" >
  2. <div class = "span6" >
  3. ជួរទី 1
  4. <div class = "row" >
  5. <div class = "span3" > កម្រិត 2 </div>
  6. <div class = "span3" > កម្រិត 2 </div>
  7. </div>
  8. </div>
  9. </div>

ជួរឈររាវ

១២

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

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

ជួររាវ

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

សម្គាល់

  1. <div class = "row-fluid" >
  2. <div class = "span4" > ... </div>
  3. <div class = "span8" > ... </div>
  4. </div>

សំបុករាវ

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

សារធាតុរាវ ១២
សារធាតុរាវ ៦
សារធាតុរាវ ៦
  1. <div class = "row-fluid" >
  2. <div class = "span12" >
  3. កម្រិត 1 នៃជួរឈរ
  4. <div class = "row-fluid" >
  5. <div class = "span6" > កម្រិត 2 </div>
  6. <div class = "span6" > កម្រិត 2 </div>
  7. </div>
  8. </div>
  9. </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">

  1. <រាងកាយ>
  2. <div class = "container" >
  3. ...
  4. </div>
  5. </body>

ប្លង់រាវ

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

  1. <div class = "container-fluid" >
  2. <div class = "row-fluid" >
  3. <div class = "span2" >
  4. <!---មាតិការបារចំហៀង-->
  5. </div>
  6. <div class = "span10" >
  7. <!---មាតិការាងកាយ-->
  8. </div>
  9. </div>
  10. </div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ករណីសាកល្បង

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

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

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

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

លាក់​នៅ...

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

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