រន្ទា

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

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

<!DOCTYPE html>
<html lang = "en" > 
  ...
</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 សម្រាប់ជួរនីមួយៗ (ឬចំនួនជួរឈរនៅក្នុងមេ)។

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

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

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

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

៤

៣ អុហ្វសិត ២

៣ អុហ្វសិត ១

៣ អុហ្វសិត ២

៦ អុហ្វសិត ៣

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

ជួរឈរសំបុក

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

ជួរទី 1

កម្រិត 2

<div class = "row" > 
  <div class = "span9" > 
    ជួរទី 1
    <div class = "row" > 
      <div class = "span6" > កម្រិត 2 </div> 
      <div class = "span3" > កម្រិត 2 </div> 
    </div>
  </div>
</div>

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

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

១

៤

៨

៦

១២

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

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

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

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

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

៤

៤ អុហ្វសិត ៤

៣ អុហ្វសិត ៣

៦ អុហ្វសិត ៦

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

សំបុករាវ

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

សារធាតុរាវ ១២

សារធាតុរាវ ៦

<div class = "row-fluid" > 
  <div class = "span12" > 
    សារធាតុរាវ ១២
    <div class = "row-fluid" > 
      <div class = "span6" > 
        សារធាតុរាវ ៦
        <div class = "row-fluid" > 
          <div class = "span6" > វត្ថុរាវ ៦ </div> 
          <div class = "span6" > វត្ថុរាវ ៦ </div> 
        </div>
      </div>
      <div class = "span6" > វត្ថុរាវ ៦ </div> 
    </div>
  </div>
</div>

ប្លង់ថេរ

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

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
<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 និងខាងក្រោម	ជួរឈររាវ គ្មានទទឹងថេរ

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

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

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

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

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

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

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

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

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

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

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

លាក់នៅ...

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

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

ការកំណត់សកល

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

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

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

ប្រព័ន្ធក្រឡាចត្រង្គលំនាំដើម

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

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

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

ជួរឈរសំបុក

ប្រព័ន្ធក្រឡាចត្រង្គរាវ

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

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

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

សំបុករាវ

ប្លង់

ប្លង់ថេរ

ប្លង់រាវ

ការរចនាឆ្លើយតប

ការបើកមុខងារឆ្លើយតប

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

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

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

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

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

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

លាក់នៅ...

ការកំណត់សកល

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

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

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

ប្រព័ន្ធក្រឡាចត្រង្គលំនាំដើម

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

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

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

ជួរឈរសំបុក

ប្រព័ន្ធក្រឡាចត្រង្គរាវ

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

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

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

សំបុករាវ

ប្លង់

ប្លង់ថេរ

ប្លង់រាវ

ការរចនាឆ្លើយតប

ការបើកមុខងារឆ្លើយតប

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

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

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

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

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

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

លាក់​នៅ...

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

លាក់នៅ...