ក្រុមប៊ូតុង

ប្រើក្រុមប៊ូតុងដើម្បីភ្ជាប់ប៊ូតុងជាច្រើនរួមគ្នាជាសមាសធាតុផ្សំតែមួយ។ បង្កើតពួកវាជាមួយស៊េរី <a>ឬ <button>ធាតុ។

ការអនុវត្តល្អបំផុត

យើងសូមណែនាំការណែនាំខាងក្រោមសម្រាប់ការប្រើប្រាស់ក្រុមប៊ូតុង និងរបារឧបករណ៍៖

• តែងតែប្រើធាតុដូចគ្នានៅក្នុងក្រុមប៊ូតុងតែមួយ <a>ឬ <button>.
• កុំលាយប៊ូតុងនៃពណ៌ផ្សេងគ្នានៅក្នុងក្រុមប៊ូតុងដូចគ្នា។
• ប្រើរូបតំណាងបន្ថែមលើ ឬជំនួសឱ្យអត្ថបទ ប៉ុន្តែត្រូវប្រាកដថាបញ្ចូលអក្សរជំនួស និងចំណងជើងតាមដែលសមរម្យ។

ក្រុមប៊ូតុង ដែលទាក់ទង ជាមួយនឹងការទម្លាក់ចុះ (សូមមើលខាងក្រោម) គួរតែត្រូវបានហៅចេញដោយឡែកពីគ្នា ហើយតែងតែរួមបញ្ចូលការយកចិត្តទុកដាក់លើការទម្លាក់ចុះ ដើម្បីបង្ហាញពីអាកប្បកិរិយាដែលមានបំណង។

ឧទាហរណ៍លំនាំដើម

នេះជារបៀបដែល HTML ស្វែងរកក្រុមប៊ូតុងស្តង់ដារដែលបង្កើតដោយប៊ូតុងស្លាកយុថ្កា៖

<div class = "btn-group" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</div>

ឧទាហរណ៍របារឧបករណ៍

ផ្សំសំណុំនៃ <div class="btn-group">ទៅក្នុង a <div class="btn-toolbar">សម្រាប់សមាសធាតុស្មុគស្មាញបន្ថែមទៀត។

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

ប្រអប់ធីកនិងរសជាតិវិទ្យុ

ក្រុមប៊ូតុងក៏អាចដំណើរការជាវិទ្យុ ដែលប៊ូតុងតែមួយអាចសកម្ម ឬប្រអប់ធីក ដែលចំនួនប៊ូតុងណាមួយអាចសកម្ម។ មើល ឯកសារ Javascript សម្រាប់នោះ។

ទទួលបាន javascript »

ទម្លាក់ចុះក្នុងក្រុមប៊ូតុង

ព្រឺក្បាល! ប៊ូតុង​ដែល​មាន​ការ​ទម្លាក់​ចុះ​ត្រូវ​តែ​ត្រូវ​បាន​រុំ​ជា​លក្ខណៈ​បុគ្គល​ដោយ​ខ្លួន​ឯង .btn-group​ក្នុង .btn-toolbar​ការ​បង្ហាញ​ត្រឹមត្រូវ។

ទិដ្ឋភាពទូទៅនិងឧទាហរណ៍

ប្រើប៊ូតុងណាមួយដើម្បីកេះម៉ឺនុយទម្លាក់ចុះដោយដាក់វានៅក្នុង a .btn-groupនិងផ្តល់នូវការសម្គាល់ម៉ឺនុយត្រឹមត្រូវ។

ឧទាហរណ៍សម្គាល់

ស្រដៀងទៅនឹងក្រុមប៊ូតុងមួយ ការសម្គាល់របស់យើងប្រើការសម្គាល់ប៊ូតុងធម្មតា ប៉ុន្តែជាមួយនឹងការបន្ថែមមួយចំនួនដើម្បីកែលម្អរចនាប័ទ្ម និងគាំទ្រកម្មវិធីជំនួយ jQuery ទម្លាក់ចុះរបស់ Bootstrap ។

<div class = "btn-group" > 
  <a class="btn dropdown-toggle" data-toggle = "dropdown" href="#" > _ _ _   
    សកម្មភាព
    <span class = "caret" ></span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- តំណម៉ឺនុយទម្លាក់ចុះ -->
  </ul>
</div>

ធ្វើការជាមួយទំហំប៊ូតុងទាំងអស់។

ប៊ូតុងទម្លាក់ចុះដំណើរការគ្រប់ទំហំ។ ទំហំប៊ូតុងរបស់អ្នកទៅ .btn-largeជា .btn-small, ឬ .btn-mini.

ទាមទារ javascript

ការទម្លាក់ប៊ូតុងតម្រូវឱ្យ កម្មវិធីជំនួយទម្លាក់ចុះ Bootstrap ដើម្បីដំណើរការ។

ក្នុងករណីខ្លះ ដូចជាទូរសព្ទចល័ត ម៉ឺនុយទម្លាក់ចុះនឹងពង្រីកនៅខាងក្រៅកន្លែងមើល។ អ្នកត្រូវដោះស្រាយការតម្រឹមដោយដៃ ឬដោយប្រើ javascript ផ្ទាល់ខ្លួន។

ទិដ្ឋភាពទូទៅនិងឧទាហរណ៍

ដោយបង្កើតរចនាប័ទ្មក្រុមប៊ូតុង និងការសម្គាល់ យើងអាចបង្កើតប៊ូតុងបំបែកបានយ៉ាងងាយស្រួល។ ប៊ូតុងបំបែកមានសកម្មភាពស្តង់ដារមួយនៅខាងឆ្វេង និងទម្លាក់ចុះបិទបើកនៅខាងស្តាំជាមួយនឹងតំណភ្ជាប់បរិបទ។

ទំហំ

ប្រើថ្នាក់ប៊ូតុងបន្ថែម .btn-mini, .btn-smallឬ .btn-largeសម្រាប់ទំហំ។

<div class = "btn-group" > 
  ...
  <ul class = "dropdown-menu pull-right" > 
    <!-- តំណម៉ឺនុយទម្លាក់ចុះ -->
  </ul>
</div>

ឧទាហរណ៍សម្គាល់

យើងពង្រីកលើការទម្លាក់ចុះប៊ូតុងធម្មតា ដើម្បីផ្តល់នូវសកម្មភាពប៊ូតុងទីពីរដែលដំណើរការជាគន្លឹះទម្លាក់ចុះដាច់ដោយឡែក។

<div class = "btn-group" > 
  <button class = "btn" > សកម្មភាព </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "dropdown-menu" > 
    <!-- តំណម៉ឺនុយទម្លាក់ចុះ -->
  </ul>
</div>

ម៉ឺនុយទម្លាក់ចុះ

ម៉ឺនុយទម្លាក់ចុះក៏អាចត្រូវបានបិទបើកពីបាតឡើងលើដោយបន្ថែមថ្នាក់តែមួយទៅមេនៃ .dropdown-menu. វានឹងត្រឡប់ទិសដៅ .caretនិងកំណត់ទីតាំងម៉ឺនុយខ្លួនវាវិញ ដើម្បីផ្លាស់ទីពីបាតឡើងលើ ជំនួសឱ្យពីលើចុះក្រោម។

<div class = "btn-group dropup" > 
  <button class = "btn" > ទម្លាក់ </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "dropdown-menu" > 
    <!-- តំណម៉ឺនុយទម្លាក់ចុះ -->
  </ul>
</div>

ថ្នាក់មូលដ្ឋានដ៏មានឥទ្ធិពល

សមាសធាតុ nav ទាំងអស់នៅទីនេះ — ផ្ទាំង ថ្នាំគ្រាប់ និងបញ្ជី — ចែករំលែកការសម្គាល់មូលដ្ឋានដូចគ្នា និងរចនាប័ទ្ម តាមរយៈ .navថ្នាក់។

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

ថេប និងថ្នាំគ្រាប់គឺល្អសម្រាប់ផ្នែកនៃមាតិកា ឬរុករករវាងទំព័រនៃមាតិកាដែលពាក់ព័ន្ធ។

ការតម្រឹមសមាសធាតុ

ដើម្បីតម្រឹមតំណ nav ប្រើ .pull-leftឬ .pull-rightថ្នាក់ឧបករណ៍ប្រើប្រាស់។ ថ្នាក់ទាំងពីរនឹងបន្ថែមអណ្តែត CSS ក្នុងទិសដៅដែលបានបញ្ជាក់។

ផ្ទាំងមូលដ្ឋាន

យក <ul>តំណភ្ជាប់ធម្មតាហើយបន្ថែម .nav-tabs៖

• ផ្ទះ
• ប្រវត្តិរូប
• សារ

<ul class = "nav nav-tabs" > 
  <li class = "active" > 
    <a href="#"> ផ្ទះ </a> _ _ _ 
  </li>
  <li><a href="#" > ... </a> < / li> 
  <li><a href="#" > ... </a> < / li> 
</ul>

ថ្នាំគ្រាប់មូលដ្ឋាន

យក HTML ដូចគ្នា ប៉ុន្តែប្រើ .nav-pillsជំនួសវិញ៖

• ផ្ទះ
• ប្រវត្តិរូប
• សារ

<ul class = "nav nav-pills" > 
  <li class = "active" > 
    <a href="#"> ផ្ទះ </a> _ _ _ 
  </li>
  <li><a href="#" > ... </a> < / li> 
  <li><a href="#" > ... </a> < / li> 
</ul>

របៀបដាក់ពួកវា

ដោយសារផ្ទាំង និងថ្នាំត្រូវបានដាក់ផ្ដេកតាមលំនាំដើម គ្រាន់តែបន្ថែមថ្នាក់ទីពីរ .nav-stackedដើម្បីធ្វើឱ្យពួកវាលេចឡើងជាជង់បញ្ឈរ។

ផ្ទាំងជង់

• ផ្ទះ
• ប្រវត្តិរូប
• សារ

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

ថ្នាំគ្រាប់ជង់

• ផ្ទះ
• ប្រវត្តិរូប
• សារ

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

ម៉ឺនុយសម្បូរបែបធ្វើឱ្យងាយស្រួល

ម៉ឺនុយទម្លាក់ចុះនៅក្នុងផ្ទាំង Bootstrap និងថ្នាំគ្រាប់គឺងាយស្រួលណាស់ ហើយត្រូវការតែ HTML បន្ថែមបន្តិចបន្តួច និងកម្មវិធីជំនួយ jQuery ស្រាល។

ទៅកាន់ទំព័រ Javascript ដើម្បីអានឯកសារស្តីពីការ ចាប់ផ្តើមទម្លាក់ចុះ នៅក្នុង Bootstrap ។

ផ្ទាំងដែលមានបញ្ជីទម្លាក់ចុះ

• ផ្ទះ
• ជំនួយ
• ទម្លាក់​ចុះ
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "ទម្លាក់ចុះ"
       href = "#" >
        ទម្លាក់​ចុះ
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- តំណភ្ជាប់ -->
    </ul>
  </li>
</ul>

ថ្នាំគ្រាប់ជាមួយនឹងការទម្លាក់ចុះ

• ផ្ទះ
• ជំនួយ
• ទម្លាក់​ចុះ
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "ទម្លាក់ចុះ"
       href = "#" >
        ទម្លាក់​ចុះ
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- តំណភ្ជាប់ -->
    </ul>
  </li>
</ul>

ការរុករកតាមរចនាប័ទ្មកម្មវិធី

បញ្ជី Nav ផ្តល់នូវវិធីសាមញ្ញ និងងាយស្រួលក្នុងការបង្កើតក្រុមនៃតំណភ្ជាប់ nav ជាមួយនឹងបឋមកថាស្រេចចិត្ត។ ពួកវាត្រូវបានប្រើយ៉ាងល្អបំផុតនៅក្នុងរបារចំហៀងដូចជា Finder នៅក្នុង OS X។

តាមរចនាសម្ព័ន ពួកវាត្រូវបានបង្កើតឡើងនៅលើរចនាប័ទ្ម nav ស្នូលដូចគ្នានឹងផ្ទាំង និងថ្នាំ ដូច្នេះការប្រើប្រាស់ និងការប្ដូរតាមបំណងគឺត្រង់។

ជាមួយរូបតំណាង

បញ្ជី Nav ក៏ងាយស្រួលក្នុងការបំពាក់ជាមួយរូបតំណាងផងដែរ។ បន្ថែម <i>ស្លាកត្រឹមត្រូវជាមួយថ្នាក់ ហើយអ្នកត្រូវបានកំណត់។

ការបែងចែកផ្តេក

បន្ថែមការបែងចែកផ្តេកដោយបង្កើតធាតុបញ្ជីទទេជាមួយថ្នាក់ .dividerដូចជា៖

<ul class = "nav nav-list" > 
  ...
  <li class = "divider" ></li> 
  ...
</ul>

ឧទាហរណ៍បញ្ជី nav

យកបញ្ជីតំណ ហើយបន្ថែម class="nav nav-list"៖

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    ���ញ្ជីបឋមកថា
  </li>
  <li class = "active" > 
    <a href="#"> ផ្ទះ </a> _ _ _ 
  </li>
  <li>
    <a href="#"> បណ្ណាល័យ </a> _ _ _ 
  </li>
  ...
</ul>

ឧទាហរណ៍ជាមួយរូបតំណាង

ឧទាហរណ៍ដូចគ្នា ប៉ុន្តែមាន <i>ស្លាកសម្រាប់រូបតំណាង។

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href="#"> _ _ _ 
      <i class = "icon-book" ></i> 
      បណ្ណាល័យ
    </a>
  </li>
  ...
</ul>

អ្វីដែលរួមបញ្ចូល

ធ្វើឱ្យផ្ទាំងរបស់អ្នកមានជីវិតជាមួយនឹងកម្មវិធីជំនួយដ៏សាមញ្ញមួយដើម្បីបិទបើករវាងមាតិកាតាមរយៈផ្ទាំង។ Bootstrap រួមបញ្ចូលផ្ទាំងដែលអាចដាក់បានក្នុងរចនាប័ទ្មចំនួនបួន៖ កំពូល (លំនាំដើម) ស្តាំ បាត និងខាងឆ្វេង។

ការផ្លាស់ប្តូររវាងពួកវាគឺងាយស្រួល ហើយគ្រាន់តែត្រូវការការផ្លាស់ប្តូរការសម្គាល់តិចតួចប៉ុណ្ណោះ។

បន្ថយនៅក្នុងផ្ទាំង

ដើម្បីធ្វើឱ្យផ្ទាំងធ្លាក់ចុះ សូមបន្ថែម .fadeទៅនីមួយៗ .tab-pane។

ទាមទារកម្មវិធីជំនួយ jQuery

ផ្ទាំងដែលអាចប្រើបានទាំងអស់ត្រូវបានដំណើរការដោយកម្មវិធីជំនួយ jQuery ទម្ងន់ស្រាលរបស់យើង។ សូមអានបន្ថែមអំពីវិធីនាំយកផ្ទាំងដែលអាចដាក់បានទៅកាន់ជីវិត នៅលើទំព័រឯកសារ javascript ។

ទទួលបាន javascript →

ឧទាហរណ៍ដែលអាចនិយាយបាន។

ដើម្បីបង្កើតផ្ទាំងដែលអាចដាក់បាន សូមបង្កើត .tab-paneលេខសម្គាល់តែមួយគត់សម្រាប់ផ្ទាំងនីមួយៗ ហើយរុំពួកវាទៅក្នុង .tab-content.

សម្រាប់ផ្ទាំងដែលបានតម្រឹមស្តាំ ឬឆ្វេង រុំ .nav-tabsនិង .tab-contentចូល .tabbable។

ការសម្គាល់ដោយត្រង់

ការប្រើប្រាស់ផ្ទាំងដែលអាចដាក់បាន តម្រូវឱ្យមានការរុំឌីវ សំណុំនៃផ្ទាំង និងសំណុំនៃផ្ទាំងផ្ទាំងដែលអាចមើលបាននៃមាតិកា។

<div class = "tabbable" > <-- ទាមទារ​សម្រាប់​តែ​ផ្ទាំង​ឆ្វេង/ស្តាំ --> 
  <ul class = "nav nav-tabs" > 
    <li class = "active" > <a href="#tab1" data-toggle = "tab"> ផ្នែក ទី 1 </a></li >   
    <li><a href="#tab2" data-toggle = "tab"> ផ្នែក ទី 2 </a> < /li >  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane សកម្ម" id = "tab1" >  
      <p> ខ្ញុំ​នៅ​ផ្នែក​ទី ១។ </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> សួស្តី ខ្ញុំ​នៅ​វគ្គ ២។ </p>
    </div>
  </div>
</div>

ផ្ទាំងនៅខាងក្រោម

ត្រឡប់លំដាប់នៃ HTML ហើយបន្ថែមថ្នាក់មួយដើម្បីដាក់ផ្ទាំងនៅខាងក្រោម។

<div class = "tabbable tabs-below" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

ផ្ទាំងនៅខាងឆ្វេង

ប្តូរថ្នាក់ដើម្បីដាក់ផ្ទាំងនៅខាងឆ្វេង។

<div class = "tabbable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

ផ្ទាំងនៅខាងស្តាំ

ប្តូរថ្នាក់ដើម្បីដាក់ផ្ទាំងនៅខាងស្តាំ។

<div class = "tabbable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

រន្ទា Navbar

របារ navbar ត្រូវការតែ divs ពីរបីប៉ុណ្ណោះ ដើម្បីរៀបចំរចនាសម្ព័ន្ធវាឱ្យបានល្អសម្រាប់ការបង្ហាញឋិតិវន្ត ឬថេរ។

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
      ...
    </div>
  </div>
</div>

របាររុករកថេរ

ជួសជុលរបាររុករកទៅផ្នែកខាងលើ ឬខាងក្រោមនៃច្រកទិដ្ឋភាពជាមួយនឹងថ្នាក់បន្ថែមមួយនៅលើ div ខាងក្រៅបំផុត, .navbar.

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

<div class = "navbar navbar-fixed-bottom" > 
  ...
</div>

នៅពេលអ្នកភ្ជាប់របាររុករក សូមចងចាំថាគណនីសម្រាប់តំបន់លាក់នៅក្រោម។ បន្ថែម 40px ឬច្រើនជាងនេះនៃ padding ទៅ <body>. ត្រូវប្រាកដថាបន្ថែមវាបន្ទាប់ពី CSS ស្នូល Bootstrap និងមុនពេល CSS ឆ្លើយតបជាជម្រើស។

ឈ្មោះ​យីហោ

តំណភ្ជាប់សាមញ្ញដើម្បីបង្ហាញម៉ាក ឬឈ្មោះគម្រោងរបស់អ្នក ទាមទារតែស្លាកយុថ្កាប៉ុណ្ណោះ។

<a class="brand" href="#"> _ _ _ _ _  
  ឈ្មោះគម្រោង
</a>

ទម្រង់នៅក្នុង navbar

ដើម្បី​កំណត់​រចនាប័ទ្ម និង​កំណត់​ទីតាំង​ទម្រង់​ក្នុង​របារ​រុករក​បាន​ត្រឹមត្រូវ សូម​បន្ថែម​ថ្នាក់​សមស្រប​ដូច​បង្ហាញ​ខាងក្រោម។ សម្រាប់ទម្រង់លំនាំដើម រួមបញ្ចូល .navbar-formនិង .pull-leftឬ .pull-rightដើម្បីតម្រឹមវាឱ្យបានត្រឹមត្រូវ។

<form class = "navbar-form pull-left" > 
  < ប្រភេទ បញ្ចូល = "អត្ថបទ" class = "span2" >  
</form>

សម្រាប់ទម្រង់ស្វែងរកដែលប្ដូរតាមបំណងបន្ថែម បន្ថែម .navbar-searchទៅ formនិង .search-queryបញ្ចូលសម្រាប់រចនាប័ទ្មពិសេសនៅក្នុងរបាររុករក។

<form class = "navbar-search pull-left" > 
  < input type = "text" class = "search-query" placeholder = "ស្វែងរក" >   
</form>

បំរែបំរួលឆ្លើយតបជាជម្រើស

អាស្រ័យលើបរិមាណនៃមាតិកានៅក្នុងរបារកំពូលរបស់អ្នក អ្នកប្រហែលជាចង់អនុវត្តជម្រើសឆ្លើយតប។ ដើម្បីធ្វើដូច្នេះ សូមរុំមាតិកា nav របស់អ្នកនៅក្នុង div ដែលមាន .nav-collapse.collapseហើយបន្ថែមប៊ូតុងបិទ/បើក navbar .btn-navbar។

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar ត្រូវ​បាន​ប្រើ​ជា​បិទ/បើក​សម្រាប់​មាតិកា navbar ដែល​បាន​បង្រួម -->
      <a class="btn btn-navbar" data-toggle = "ដួលរលំ" data-target = ".nav-collapse" > _   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- ត្រូវប្រាកដថាចាកចេញពីម៉ាកនៅទីនោះ ប្រសិនបើអ្នកចង់ឱ្យវាបង្ហាញ -->
      <a class="brand" href="#"> ឈ្មោះ គម្រោង </a> _ _ _ _  
 
      <!-- អ្វីគ្រប់យ៉ាងដែលអ្នកចង់លាក់នៅ 940px ឬតិចជាងនេះ សូមដាក់នៅទីនេះ -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

តំណរុករក

ធាតុ Nav គឺសាមញ្ញក្នុងការបន្ថែមតាមរយៈបញ្ជីដែលមិនបានបញ្ជាទិញ។

<ul class = "nav" > 
  <li class = "active" > 
    <a href="#"> ផ្ទះ </a> _ _ _ 
  </li>
  <li><a href="#"> តំណ </a> < /li > 
  <li><a href="#"> តំណ </a> < /li > 
</ul>

អ្នកអាចបន្ថែមផ្នែកបែងចែកទៅតំណ nav របស់អ្នកយ៉ាងងាយស្រួលជាមួយនឹងធាតុបញ្ជីទទេ និងថ្នាក់សាមញ្ញ។ គ្រាន់តែបន្ថែមវារវាងតំណភ្ជាប់៖

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

ការតម្រឹមសមាសធាតុ

ដើម្បីតម្រឹម nav ទម្រង់ស្វែងរក ឬអត្ថបទ សូមប្រើ .pull-leftឬ .pull-rightថ្នាក់ឧបករណ៍ប្រើប្រាស់។ ថ្នាក់ទាំងពីរនឹងបន្ថែមអណ្តែត CSS ក្នុងទិសដៅដែលបានបញ្ជាក់។

ការបន្ថែមម៉ឺនុយទម្លាក់ចុះ

ការបន្ថែម dropdowns និង dropups ទៅ nav គឺសាមញ្ញណាស់ ប៉ុន្តែវាទាមទារការប្រើប្រាស់ កម្មវិធីជំនួយ javascript របស់យើង ។

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" 
          class = "dropdown-toggle"
          data-toggle = "ទម្លាក់ចុះ" >
          គណនី
          <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

ទទួលបាន javascript →

អត្ថបទនៅក្នុងរបាររុករក

រុំខ្សែអក្សរនៃអត្ថបទនៅក្នុង ជា <.navbar-text>ធម្មតានៅលើ <p>ស្លាកសម្រាប់ការនាំមុខ និងពណ៌ត្រឹមត្រូវ។

ហេតុអ្វីត្រូវប្រើពួកគេ។

ការរុករក Breadcrumb ត្រូវបានប្រើជាមធ្យោបាយដើម្បីបង្ហាញអ្នកប្រើប្រាស់នូវកន្លែងដែលពួកគេស្ថិតនៅក្នុងកម្មវិធី ឬគេហទំព័រមួយ ប៉ុន្តែមិនមែនសម្រាប់ការរុករកបឋមនោះទេ។ រក្សា​ការ​ប្រើ​ប្រាស់​របស់​ពួក​គេ​តិច​តួច​និង​សង្ខេប​ដើម្បី​ឱ្យ​មាន​ប្រសិទ្ធ​ភាព​បំផុត។

ឧទាហរណ៍

ឧទាហរណ៍តែមួយដែលបង្ហាញព្រោះវាអាចត្រូវបានបង្ហាញនៅលើទំព័រជាច្រើន។

• ផ្ទះ

• ទំព័រដើម /
• បណ្ណាល័យ

• ទំព័រដើម /
• បណ្ណាល័យ /
• ទិន្នន័យ

សម្គាល់

HTML គឺ​ជា​បញ្ជី​មិន​បាន​តម្រៀប​ស្តង់ដារ​របស់​អ្នក​ជាមួយ​នឹង​តំណ។

<ul class = "breadcrumb" > 
  <li>
    <a href="#"> ផ្ទះ </a> < span class = "divider" > / < / span>   
  </li>
  <li>
    <a href="#"> បណ្ណាល័យ </a> < span class = "divider" > / < / span>   
  </li>
  <li class = "active" > ទិន្នន័យ </li> 
</ul>

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

ទំព័រដែលមានរចនាប័ទ្មសាមញ្ញបំផុត និងតិចតួចបំផុតដែលត្រូវបានបំផុសគំនិតដោយ Rdio ដ៏អស្ចារ្យសម្រាប់កម្មវិធី និងលទ្ធផលស្វែងរក។ ប្លុកធំគឺពិបាកនឹងខកខាន ងាយស្រួលធ្វើមាត្រដ្ឋាន និងផ្តល់នូវតំបន់ចុចធំ។

តំណ​ទំព័រ​បញ្ជាក់

តំណភ្ជាប់អាចប្ដូរតាមបំណង និងដំណើរការក្នុងកាលៈទេសៈមួយចំនួនជាមួយនឹងថ្នាក់ត្រឹមត្រូវ។ .disabledសម្រាប់តំណភ្ជាប់ដែលមិនអាចចុចបាន និង .activeសម្រាប់ទំព័របច្ចុប្បន្ន។

ការតម្រឹមដែលអាចបត់បែនបាន។

បន្ថែមថ្នាក់ស្រេចចិត្តទាំងពីរ ដើម្បីផ្លាស់ប្តូរការតម្រឹមនៃតំណភ្ជាប់ទំព័រ៖ .pagination-centeredនិង .pagination-right.

ឧទាហរណ៍

សមាសភាគ pagination លំនាំដើមគឺអាចបត់បែនបាន និងដំណើរការក្នុងការប្រែប្រួលមួយចំនួន។

សម្គាល់

រុំក្នុង a <div>, pagination គឺគ្រាន់តែជា <ul>.

<div class = "pagination" > 
  <ul>
    <li><a href="#"> មុន </a> < /li > 
    <li class = "active" > 
      <a href="#"> ១ </a> _ _ _ 
    </li>
    <li><a href="#"> 2 </a> < /li > 
    <li><a href="#"> 3 </a> < /li > 
    <li><a href="#"> ៤ </a> < /li > 
    <li><a href="#"> បន្ទាប់ </a> < /li > 
  </ul>
</div>

អំពី pager

សមាសធាតុ pager គឺជាសំណុំនៃតំណភ្ជាប់សម្រាប់ការអនុវត្ត pagination សាមញ្ញជាមួយនឹងការសម្គាល់ពន្លឺ និងសូម្បីតែរចនាប័ទ្មស្រាលជាងមុន។ វាល្អណាស់សម្រាប់គេហទំព័រសាមញ្ញដូចជាប្លក់ ឬទស្សនាវដ្តីជាដើម។

ស្ថានភាពបិទជម្រើស

តំណភ្ជាប់ Pager ក៏ប្រើ .disabledថ្នាក់ទូទៅពី pagination ផងដែរ។

ឧទាហរណ៍លំនាំដើម

តាម​លំនាំដើម ទំព័រ​ហ្រ្វង់ស័រ​ភ្ជាប់​មជ្ឈមណ្ឌល។

• មុន
• បន្ទាប់

<ul class = "pager" > 
  <li>
    <a href="#"> មុន </a> _ _ _ 
  </li>
  <li>
    <a href="#"> បន្ទាប់ </a> _ _ _ 
  </li>
</ul>

តំណភ្ជាប់ដែលបានតម្រឹម

ជាជម្រើស អ្នកអាចតម្រឹមតំណនីមួយៗទៅភាគី៖

• ← ចាស់
• ថ្មីជាង →

<ul class = "pager" > 
  <li class = "មុន" > 
    <a href="#"> & larr ; _ ចាស់ </a> 
  </li>
  <li class = "next" > 
    <a href="#"> ថ្មី ជាង & rarr ; </a> 
  </li>
</ul>

អំពី

ផ្លាកសញ្ញាគឺជាសមាសធាតុដ៏សាមញ្ញតូចមួយសម្រាប់បង្ហាញសូចនាករ ឬចំនួននៃប្រភេទមួយចំនួន។ ពួកវាត្រូវបានរកឃើញជាទូទៅនៅក្នុងកម្មវិធីអ៊ីមែលដូចជា Mail.app ឬនៅលើកម្មវិធីទូរស័ព្ទសម្រាប់ការជូនដំណឹងជំរុញ។

ថ្នាក់ដែលមាន

Bootstrap ផ្តល់នូវសមាសធាតុដែលអាចបត់បែនបានទម្ងន់ស្រាល ហៅថា Hero Unit ដើម្បីបង្ហាញខ្លឹមសារនៅលើគេហទំព័ររបស់អ្នក។ វាដំណើរការបានយ៉ាងល្អនៅលើទីផ្សារ និងគេហទំព័រដែលមានមាតិកាធ្ងន់។

សម្គាល់

ចងក្រងខ្លឹមសាររបស់អ្នក divដូចតទៅ៖

<div class = "hero-unit" > 
  <h1> ក្បាល </h1>
  <p> Tagline </p>
  <p>
    <a class="btn btn-primary btn-large"> _ 
      ស្វែង​យល់​បន្ថែម
    </a>
  </p>
</div>

សែលសាមញ្ញសម្រាប់ h1ដកឃ្លាយ៉ាងសមរម្យ និងបែងចែកផ្នែកនៃមាតិកានៅលើទំព័រមួយ។ វា​អាច​ប្រើ h1​លំនាំដើម​របស់ small​ធាតុ ក៏ដូចជា​សមាសធាតុ​ផ្សេងទៀត​ភាគច្រើន (ជាមួយ​រចនាប័ទ្ម​បន្ថែម)។

<div class = "page-header" > 
  <h1> ឧទាហរណ៍បឋមកថាទំព័រ </h1>
</div>

រូបភាពតូចលំនាំដើម

��ាមលំនាំដើម រូបភាពតូចៗរបស់ Bootstrap ត្រូវបានរចនាឡើងដើម្បីបង្ហាញរូបភាពដែលបានភ្ជាប់ជាមួយនឹងការសម្គាល់ដែលត្រូវការតិចតួចបំផុត។

អាចប្ដូរតាមបំណងបានខ្ពស់។

ជាមួយនឹងការសម្គាល់បន្ថែមបន្តិច វាអាចបន្ថែមមាតិកា HTML គ្រប់ប្រភេទដូចជា ចំណងជើង កថាខណ្ឌ ឬប៊ូតុងទៅក្នុងរូបភាពតូចៗ។

• 

  ស្លាកសញ្ញារូបភាពតូច

  Cras justo odio, dapibus ac facilisis in, egestas eget quam ។ Donec id elit non mi porta gravida នៅ eget metus។ Nullam id dolor id nibh ultricies vehicula ut id elit ។

  សកម្មភាព សកម្មភាព

• 

  ស្លាកសញ្ញារូបភាពតូច

  Cras justo odio, dapibus ac facilisis in, egestas eget quam ។ Donec id elit non mi porta gravida នៅ eget metus។ Nullam id dolor id nibh ultricies vehicula ut id elit ។

  សកម្មភាព សកម្មភាព

ហេតុអ្វីត្រូវប្រើរូបភាពតូច

រូបភាពតូចៗ (ពីមុន .media-gridរហូតដល់ v1.4) គឺល្អសម្រាប់ក្រឡានៃរូបថត ឬវីដេអូ លទ្ធផលស្វែងរករូបភាព ផលិតផលលក់រាយ ផលប័ត្រ និងច្រើនទៀត។ ពួកវាអាចជាតំណភ្ជាប់ ឬខ្លឹមសារឋិតិវន្ត។

ការសម្គាល់សាមញ្ញ និងអាចបត់បែនបាន។

ការសម្គាល់រូបភាពតូចគឺសាមញ្ញ - ulជាមួយនឹងចំនួន liធាតុណាមួយគឺចាំបាច់ទាំងអស់។ វាក៏អាចបត់បែនបានផងដែរ ដែលអនុញ្ញាតឱ្យមានប្រភេទមាតិកាណាមួយ ដោយគ្រាន់តែមានសញ្ញាសម្គាល់បន្ថែមទៀត ដើម្បីរុំមាតិការបស់អ្នក។

ប្រើទំហំជួរឈរក្រឡាចត្រង្គ

ជាចុងក្រោយ សមាសធាតុរូបភាពតូចប្រើប្រាស់ថ្នាក់ប្រព័ន្ធក្រឡាចត្រង្គដែលមានស្រាប់ ដូចជា .span2ឬ .span3- សម្រាប់ការគ្រប់គ្រងទំហំរូបភាពតូច។

ការសម្គាល់

ដូចដែលបានរៀបរាប់ពីមុន ការសម្គាល់ដែលត្រូវការសម្រាប់រូបភាពតូចៗគឺស្រាល និងត្រង់។ នេះជាការកំណត់លំនាំដើម សម្រាប់រូបភាពដែលបានភ្ជាប់ ៖

<ul class = "រូបភាពតូច" > 
  <li class = "span3" > 
    <a href="#" class="thumbnail"> _ _ _ _ _  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

សម្រាប់មាតិកា HTML ផ្ទាល់ខ្លួននៅក្នុងរូបភាពតូច សញ្ញាសម្គាល់ផ្លាស់ប្តូរបន្តិច។ ដើម្បីអនុញ្ញាតឱ្យមាតិកាកម្រិតប្លុកនៅគ្រប់ទីកន្លែង យើងប្តូរទៅ <a>ដូច <div>នោះ៖

<ul class = "រូបភាពតូច" > 
  <li class = "span3" > 
    <div class = "រូបភាពតូច" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> ស្លាកសញ្ញារូបភាពតូច </h5>
      <p> ចំណងជើងរូបភាពតូចនៅទីនេះ... </p>
    </div>
  </li>
  ...
</ul>

ឧទាហរណ៍ច្រើនទៀត

រុករកជម្រើសរបស់អ្នកទាំងអស់ជាមួយនឹងថ្នាក់ក្រឡាចត្រង្គផ្សេងៗដែលមានសម្រាប់អ្នក។ អ្នកក៏អាចលាយ និងផ្គូផ្គងទំហំផ្សេងៗបានផងដែរ។

ថ្នាក់មូលដ្ឋានសរសេរឡើងវិញ

ជាមួយនឹង Bootstrap 2 យើងបានសម្រួលដល់ថ្នាក់មូលដ្ឋាន៖ .alertជំនួសឱ្យ .alert-message. យើងក៏បានកាត់បន្ថយការសម្គាល់ដែលទាមទារអប្បបរមាផងដែរ—មិន <p>តម្រូវឱ្យមានតាមលំនាំដើមទេ គ្រាន់តែផ្នែកខាងក្រៅ <div>ប៉ុណ្ណោះ។

សារដាស់តឿនតែមួយ

សម្រាប់សមាសធាតុដែលប្រើប្រាស់បានយូរជាងមុនជាមួយនឹងកូដតិច យើងបានដកចេញនូវភាពខុសគ្នានៃរូបរាងសម្រាប់ការជូនដំណឹងអំពីការទប់ស្កាត់ សារដែលភ្ជាប់មកជាមួយបន្ទះបន្ថែម និងជាធម្មតាអត្ថបទច្រើនទៀត។ ថ្នាក់ក៏បានប្តូរទៅ .alert-block។

ដំណើរការល្អជាមួយ javascript

Bootstrap ភ្ជាប់មកជាមួយកម្មវិធីជំនួយ jQuery ដ៏អស្ចារ្យដែលគាំទ្រសារដាស់តឿន ដែលធ្វើឱ្យការច្រានចោលពួកវារហ័ស និងងាយស្រួល។

ទាញយកកម្មវិធីជំនួយ »

ការជូនដំណឹងឧទាហរណ៍

រុំសាររបស់អ្នក និងរូបតំណាងបិទជាជម្រើសនៅក្នុង div ជាមួយនឹងថ្នាក់សាមញ្ញ។

<div class = "ការជូនដំណឹង" > 
  <button class = "close" data-dismiss = "alert" > × </button>  
  <strong> ព្រមាន! ពិនិត្យ​មើល​ខ្លួន​ឯង ​ឱ្យ ​បាន​ល្អ​បំផុត អ្នក​មើល​ទៅ​មិន​ល្អ​ពេក​ទេ។
</div>

ព្រឺក្បាល! ឧបករណ៍ iOS ទាមទារការ href="#"បិទការជូនដំណឹង។ ត្រូវប្រាកដថាបញ្ចូលវា និងគុណលក្ខណៈទិន្នន័យសម្រាប់រូបតំណាងបិទយុថ្កា។ ជាជម្រើស អ្នកអាចប្រើ buttonធាតុដែលមានគុណលក្ខណៈទិន្នន័យ ដែលយើងជ្រើសរើសធ្វើសម្រាប់ឯកសាររបស់យើង។

ពង្រីកសារដាស់តឿនស្ដង់ដារយ៉ាងងាយស្រួលជាមួយនឹងថ្នាក់ជម្រើសពីរ៖ .alert-blockសម្រាប់ទ្រនាប់បន្ថែម និងការគ្រប់គ្រងអត្ថបទ និង .alert-headingសម្រាប់ចំណងជើងដែលត្រូវគ្នា។

<div class = "ការជូនដំណឹង alert-block" > 
  <a class="close" data-dismiss="alert" href="#"> × </a> _ _ _ _ _ _ _   
  <h4 class = "alert-heading" > ព្រមាន! </h4> 
  ពិនិត្យ​ខ្លួន​ឯង​ឱ្យ​បាន​ល្អ​បំផុត អ្នក​មិន...
</div>

កំហុសឬគ្រោះថ្នាក់

<div class = "ការជូនដំណឹង alert-error" > 
  ...
</div>

ជោគជ័យ

<div class = "ការជូនដំណឹង alert-success" > 
  ...
</div>

ព័ត៌មាន

<div class = "ការជូនដំណឹង alert-info" > 
  ...
</div>

មូលដ្ឋាន

របារវឌ្ឍនភាពលំនាំដើមជាមួយនឹងជម្រាលបញ្ឈរ។

<div class = "វឌ្ឍនភាព" > 
  <div class = "bar" 
       style = " width : 60 %; " ></div> 
</div>

ឆ្នូត

ប្រើជម្រាលដើម្បីបង្កើតបែបផែនឆ្នូត (គ្មាន IE) ។

<div class = "progress progress-striped" > 
  <div class = "bar" 
       style = " width : 20 %; " ></div> 
</div>

មានចលនា

យកឧទាហរណ៍ឆ្នូតហើយធ្វើចលនាវា (គ្មាន IE) ។

<div class = "ដំណើរ​ការ​វឌ្ឍនភាព-ឆ្នូត 
     សកម្ម" >
  <div class = "bar" 
       style = " width : 40 %; " ></div> 
</div>

ពណ៌បន្ថែម

របារវឌ្ឍនភាពប្រើប៊ូតុងដូចគ្នាមួយចំនួន និងថ្នាក់ជូនដំណឹងសម្រាប់រចនាប័ទ្មស្របគ្នា។

របារឆ្នូត

ស្រដៀងទៅនឹងពណ៌រឹង យើងមានរបារវឌ្ឍនភាពឆ្នូតខុសៗគ្នា។

អាកប្បកិរិយា

របារវឌ្ឍនភាពប្រើការផ្លាស់ប្តូរ CSS3 ដូច្នេះប្រសិនបើអ្នកលៃតម្រូវទទឹងតាម javascript យ៉ាងស្វាហាប់ វានឹងផ្លាស់ប្តូរទំហំយ៉ាងរលូន។

ប្រសិនបើអ្នកប្រើ .activeថ្នាក់ .progress-stripedរបារវឌ្ឍនភាពរបស់អ្នកនឹងធ្វើឱ្យឆ្នូតពីឆ្វេងទៅស្តាំមានចលនា។

ការគាំទ្រកម្មវិធីរុករក

របារវឌ្ឍនភាពប្រើជម្រាល CSS3 ការផ្លាស់ប្តូរ និងចលនាដើម្បីសម្រេចបាននូវឥទ្ធិពលទាំងអស់របស់វា។ មុខងារទាំងនេះមិនត្រូវបានគាំទ្រនៅក្នុង IE7-9 ឬកំណែចាស់របស់ Firefox ទេ។

Opera និង IE មិនគាំទ្រចលនានៅពេលនេះទេ។

អណ្តូង

ប្រើអណ្តូងជាបែបផែនសាមញ្ញលើធាតុមួយ ដើម្បីផ្តល់ឱ្យវានូវឥទ្ធិពល inset ។

<div class = "ល្អ" > 
  ...
</div>

បិទរូបតំណាង

ប្រើរូបតំណាងបិទទូទៅសម្រាប់ការបិទមាតិកាដូចជាម៉ូឌុល និងការជូនដំណឹង។

×

<button class = "close" > × </button> 

ឧបករណ៍ iOS ទាមទារ href="#" សម្រាប់ព្រឹត្តិការណ៍ចុច ប្រសិនបើអ្នកចូលចិត្តប្រើយុថ្កា។

<a class="close" href="#"> & times ; _ _ _ </a>