រន្ទា

Bootstrap ត្រូវបានបង្កើតឡើងនៅលើក្រឡាចត្រង្គ 12-column ឆ្លើយតប ប្លង់ និងសមាសធាតុ។

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

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

  1. <!DOCTYPE html>
  2. <html lang = "en" >
  3. ...
  4. </html>

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

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

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

រចនាប័ទ្មទាំងនេះអាចរកបាននៅក្នុង scaffolding.less

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

ជាមួយនឹង Bootstrap 2 ប្លុកកំណត់ឡើងវិញចាស់ត្រូវបានទម្លាក់នៅក្នុងការពេញចិត្តរបស់ Normalize.css ដែលជាគម្រោងដោយ Nicolas Gallagher និង Jonathan Neal ដែលផ្តល់ថាមពលដល់ HTML5 Boilerplate ផងដែរ។ ខណៈពេលដែលយើងប្រើ Normalize ជាច្រើននៅក្នុង reset.less របស់ យើង យើងបានលុបធាតុមួយចំនួនជាពិសេសសម្រាប់ Bootstrap ។

ឧទាហរណ៍ក្រឡាចត្រង្គផ្ទាល់

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

ក្រឡាចត្រង្គមូលដ្ឋាន HTML

សម្រាប់ប្លង់ជួរឈរពីរសាមញ្ញ បង្កើត a .rowហើយបន្ថែមចំនួន .span*ជួរឈរសមស្រប។ ដោយសារនេះគឺជាក្រឡាចត្រង្គ 12 ជួរ នីមួយៗ .span*លាតសន្ធឹងចំនួននៃជួរទាំង 12 ទាំងនោះ ហើយគួរតែបន្ថែមរហូតដល់ 12 សម្រាប់ជួរនីមួយៗ (ឬចំនួនជួរឈរនៅក្នុងមេ)។

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

ដោយ​បាន​ផ្តល់​ឧទាហរណ៍​នេះ យើង​មាន .span4​និង .span8​បង្កើត​ជួរ​ឈរ​សរុប​ចំនួន 12 និង​ជួរ​ដេក​ពេញលេញ។

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

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

៣ អុហ្វសិត ២
៣ អុហ្វសិត ១
៣ អុហ្វសិត ២
៦ អុហ្វសិត ៣
  1. <div class = "row" >
  2. <div class = "span4" > ... </div>
  3. <div class = "span3 offset2" > ... </div>
  4. </div>

ជួរឈរសំបុក

ដើម្បីដាក់មាតិការបស់អ្នកជាមួយក្រឡាចត្រង្គលំនាំដើម សូមបន្ថែមជួរឈរថ្មី .rowនិងសំណុំនៃ .span*ជួរឈរនៅក្នុងជួរឈរដែលមានស្រាប់ .span*។ ជួរ​ដេក​ដែល​ជាប់​គួរ​រួម​បញ្ចូល​សំណុំ​ជួរ​ឈរ​ដែល​បន្ថែម​រហូត​ដល់​ចំនួន​ជួរ​ឈរ​មេ​របស់វា។

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

ឧទាហរណ៍នៃបណ្តាញរាវបន្តផ្ទាល់

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

១២

ក្រឡាចត្រង្គវត្ថុរាវមូលដ្ឋាន HTML

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

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

ការ​ទូទាត់​ជាតិ​ទឹក​

ដំណើរការតាមរបៀបដូចគ្នានឹងការអុហ្វសិតប្រព័ន្ធក្រឡាចត្រង្គថេរ៖ បន្ថែម .offset*ទៅជួរឈរណាមួយដើម្បីទូទាត់ដោយជួរឈរជាច្រើននោះ។

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

សំបុករាវ

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

សារធាតុរាវ ១២
សារធាតុរាវ ៦
សារធាតុរាវ ៦
សារធាតុរាវ ៦
សារធាតុរាវ ៦
  1. <div class = "row-fluid" >
  2. <div class = "span12" >
  3. សារធាតុរាវ ១២
  4. <div class = "row-fluid" >
  5. <div class = "span6" >
  6. សារធាតុរាវ ៦
  7. <div class = "row-fluid" >
  8. <div class = "span6" > វត្ថុរាវ ៦ </div>
  9. <div class = "span6" > វត្ថុរាវ ៦ </div>
  10. </div>
  11. </div>
  12. <div class = "span6" > វត្ថុរាវ ៦ </div>
  13. </div>
  14. </div>
  15. </div>

ប្លង់ថេរ

ផ្តល់ប្លង់ទទឹងថេរទូទៅ (និងឆ្លើយតបតាមជម្រើស) ដោយ <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 ឆ្លើយតបនៅក្នុងគម្រោងរបស់អ្នកដោយរួមបញ្ចូលស្លាកមេតាត្រឹមត្រូវ និងសន្លឹករចនាប័ទ្មបន្ថែមនៅក្នុង <head>ឯកសាររបស់អ្នក។ ប្រសិនបើអ្នកបានចងក្រង Bootstrap ពីទំព័រប្ដូរតាមបំណង អ្នកត្រូវបញ្ចូលតែស្លាកមេតាប៉ុណ្ណោះ។

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

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

អំពី Bootstrap ឆ្លើយតប

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

លាក់​នៅ...

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

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