Source

ប៊ូតុង

ប្រើរចនាប័ទ្មប៊ូតុងផ្ទាល់ខ្លួនរបស់ Bootstrap សម្រាប់សកម្មភាពក្នុងទម្រង់ ប្រអប់ និងអ្វីៗជាច្រើនទៀតដោយមានការគាំទ្រសម្រាប់ទំហំ រដ្ឋ និងច្រើនទៀត។

ឧទាហរណ៍

Bootstrap រួមបញ្ចូលរចនាប័ទ្មប៊ូតុងដែលបានកំណត់ជាមុនជាច្រើន ដែលនីមួយៗបម្រើគោលបំណងផ្ទាល់ខ្លួនរបស់វា ជាមួយនឹងការបន្ថែមមួយចំនួនដែលត្រូវបានបោះចោលសម្រាប់ការគ្រប់គ្រងបន្ថែមទៀត។

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>
ការ​បង្ហាញ​អត្ថន័យ​ទៅ​កាន់​បច្ចេកវិទ្យា​ជំនួយ

ការប្រើពណ៌ដើម្បីបន្ថែមអត្ថន័យផ្តល់នូវការចង្អុលបង្ហាញដែលមើលឃើញតែប៉ុណ្ណោះ ដែលនឹងមិនត្រូវបានបញ្ជូនទៅកាន់អ្នកប្រើប្រាស់នៃបច្ចេកវិទ្យាជំនួយ ដូចជាកម្មវិធីអានអេក្រង់ជាដើម។ ត្រូវប្រាកដថាព័ត៌មានដែលតំណាងដោយពណ៌គឺច្បាស់ពីខ្លឹមសារខ្លួនវា (ឧ. អត្ថបទដែលមើលឃើញ) ឬត្រូវបានរួមបញ្ចូលតាមរយៈមធ្យោបាយជំនួស ដូចជាអត្ថបទបន្ថែមដែលលាក់ជាមួយ .sr-onlyថ្នាក់។

ស្លាកប៊ូតុង

ថ្នាក់ .btnត្រូវបានរចនាឡើងដើម្បីប្រើជាមួយ <button>ធាតុ។ ទោះយ៉ាងណាក៏ដោយ អ្នកក៏អាចប្រើថ្នាក់ទាំងនេះនៅលើ <a>ឬ <input>ធាតុ (ទោះបីជាកម្មវិធីរុករកមួយចំនួនអាចអនុវត្តការបង្ហាញខុសគ្នាបន្តិចក៏ដោយ)។

នៅពេលប្រើថ្នាក់ប៊ូតុងនៅលើ <a>ធាតុដែលត្រូវបានប្រើដើម្បីកេះមុខងារនៅក្នុងទំព័រ (ដូចជាការបង្រួមមាតិកា) ជាជាងការភ្ជាប់ទៅទំព័រថ្មី ឬផ្នែកនៅក្នុងទំព័របច្ចុប្បន្ន តំណភ្ជាប់ទាំងនេះគួរតែត្រូវបានផ្តល់ឱ្យ role="button"ដើម្បីបង្ហាញពីគោលបំណងរបស់ពួកគេយ៉ាងសមស្របទៅនឹងបច្ចេកវិទ្យាជំនួយដូចជា អ្នកអានអេក្រង់។

តំណភ្ជាប់ 
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

ប៊ូតុងគ្រោង

ត្រូវការប៊ូតុងមួយ ប៉ុន្តែមិនមានពណ៌ផ្ទៃខាងក្រោយខ្លាំងដែលពួកគេនាំយកមកមែនទេ? ជំនួសថ្នាក់កែប្រែលំនាំដើមជាមួយនឹងថ្នាក់ .btn-outline-*ដើម្បីលុបរូបភាព និងពណ៌ផ្ទៃខាងក្រោយទាំងអស់នៅលើប៊ូតុងណាមួយ។

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

ទំហំ

ចង់បានប៊ូតុងធំ ឬតូចជាងនេះទេ? បន្ថែម .btn-lgឬ .btn-smសម្រាប់ទំហំបន្ថែម។

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

បង្កើតប៊ូតុងកម្រិតប្លុក—ដែលលាតសន្ធឹងទទឹងពេញរបស់មេ—ដោយបន្ថែម .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

ស្ថានភាពសកម្ម

ប៊ូតុង​នឹង​លេច​ឡើង​ដោយ​ចុច (ជាមួយ​ផ្ទៃ​ខាង​ក្រោយ​ងងឹត ស៊ុម​ងងឹត និង​ស្រមោល​បញ្ចូល) ពេល​សកម្ម។ មិនចាំបាច់បន្ថែមថ្នាក់ទៅ <button>s ដូចដែលពួកគេប្រើ pseudo-class ទេ។ ទោះយ៉ាងណាក៏ដោយ អ្នកនៅតែអាចបង្ខំរូបរាងសកម្មដូចគ្នាជាមួយ .active(និងរួមបញ្ចូល aria-pressed="true"គុណលក្ខណៈ) ប្រសិនបើអ្នកត្រូវការចម្លងស្ថានភាពតាមកម្មវិធី។

តំណភ្ជាប់បឋម តំណភ្ជាប់ 
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

រដ្ឋពិការ

ធ្វើឱ្យប៊ូតុងមើលទៅអសកម្មដោយបន្ថែម disabledគុណលក្ខណៈប៊ូលីនទៅ <button>ធាតុណាមួយ។

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

ប៊ូតុងបិទដោយប្រើ <a>ធាតុមានឥរិយាបទខុសគ្នាបន្តិច៖

  • <a>s មិន​គាំទ្រ disabled​គុណលក្ខណៈ​ទេ ដូច្នេះ​អ្នក​ត្រូវ​តែ​បន្ថែម .disabled​ថ្នាក់​ដើម្បី​ធ្វើ​ឱ្យ​វា​មើល​ឃើញ​បិទ។
  • រចនាប័ទ្មដែលងាយស្រួលនាពេលអនាគតមួយចំនួនត្រូវបានរួមបញ្ចូលដើម្បីបិទទាំងអស់ pointer-eventsនៅលើប៊ូតុងយុថ្កា។ នៅក្នុងកម្មវិធីរុករកតាមអ៊ីនធឺណិតដែលគាំទ្រទ្រព្យសម្បត្តិនោះ អ្នកនឹងមិនឃើញទស្សន៍ទ្រនិចដែលត្រូវបានបិទទាល់តែសោះ។
  • ប៊ូតុងបិទគួរតែរួមបញ្ចូល aria-disabled="true"គុណលក្ខណៈដើម្បីបង្ហាញពីស្ថានភាពនៃធាតុទៅនឹងបច្ចេកវិទ្យាជំនួយ។
តំណភ្ជាប់បឋម តំណភ្ជាប់ 
<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

.disabledclass ប្រើ pointer-events: noneដើម្បីព្យាយាមបិទមុខងារ link របស់ s <a>ប៉ុន្តែលក្ខណៈសម្បត្តិ CSS នោះមិនទាន់មានលក្ខណៈស្តង់ដារនៅឡើយ។ លើសពីនេះ សូម្បីតែនៅក្នុងកម្មវិធីរុករកតាមអ៊ីនធឺណិតដែលគាំទ្រ pointer-events: noneក៏ដោយ ការរុករកតាមក្តារចុចនៅតែមិនមានផលប៉ះពាល់ មានន័យថាអ្នកប្រើប្រាស់ក្តារចុចដែលបានមើលឃើញ និងអ្នកប្រើប្រាស់បច្ចេកវិទ្យាជំនួយនឹងនៅតែអាចដំណើរការតំណទាំងនេះបាន។ ដូច្នេះ ដើម្បី​ឱ្យ​មាន​សុវត្ថិភាព សូម​បន្ថែម tabindex="-1"​លក្ខណៈ​មួយ​នៅ​លើ​តំណ​ទាំង​នេះ (ដើម្បី​ការពារ​មិន​ឱ្យ​ពួកគេ​ទទួល​បាន​ការ​ផ្តោត​លើ​ក្ដារចុច) ហើយ​ប្រើ JavaScript ផ្ទាល់ខ្លួន ដើម្បី​បិទ​មុខងារ​របស់​ពួកគេ។

កម្មវិធីជំនួយប៊ូតុង

ធ្វើច្រើនទៀតដោយប្រើប៊ូតុង។ ស្ថានភាពប៊ូតុងគ្រប់គ្រង ឬបង្កើតក្រុមនៃប៊ូតុងសម្រាប់សមាសធាតុជាច្រើនទៀតដូចជារបារឧបករណ៍ជាដើម។

បិទ/បើក រដ្ឋ

បន្ថែម data-toggle="button"ដើម្បីបិទ/បើកស្ថានភាពប៊ូតុង active។ ប្រសិនបើអ្នកកំពុងបិទបើកប៊ូតុងជាមុន អ្នកត្រូវតែបន្ថែម .activeថ្នាក់ ដោយដៃ និង aria-pressed="true" ទៅកាន់ <button>.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

ប្រអប់ធីក និងប៊ូតុងវិទ្យុ

រចនាប័ទ្ម របស់ Bootstrap .buttonអាចត្រូវបានអនុវត្តទៅធាតុផ្សេងទៀតដូចជា <label>s ដើម្បីផ្តល់នូវប្រអប់ធីក ឬប៊ូតុងបិទបើករចនាប័ទ្មវិទ្យុ។ បន្ថែម data-toggle="buttons"ទៅ .btn-groupដែលមានប៊ូតុងដែលបានកែប្រែទាំងនោះ ដើម្បីបើកឥរិយាបថបិទបើករបស់ពួកគេតាមរយៈ JavaScript និងបន្ថែម .btn-group-toggleទៅរចនាប័ទ្ម <input>s នៅក្នុងប៊ូតុងរបស់អ្នក។ ចំណាំថាអ្នកអាចបង្កើតប៊ូតុងដែលបញ្ចូលថាមពលតែមួយ ឬក្រុមនៃពួកវា។

ស្ថានភាពដែលបានធីកសម្រាប់ប៊ូតុងទាំងនេះត្រូវ បានអាប់ដេតតាមរយៈ clickព្រឹត្តិការណ៍ នៅលើប៊ូតុងប៉ុណ្ណោះ។ ប្រសិនបើអ្នកប្រើវិធីសាស្រ្តផ្សេងទៀតដើម្បីធ្វើបច្ចុប្បន្នភាពការបញ្ចូល - ឧ ដោយមាន <input type="reset">ឬដោយការអនុវត្ត checkedទ្រព្យសម្បត្តិរបស់ធាតុបញ្ចូលដោយដៃ - អ្នកនឹងត្រូវបិទបើក .activeដោយ <label>ដៃ។

ចំណាំថាប៊ូតុងដែលបានពិនិត្យជាមុនតម្រូវឱ្យអ្នកបន្ថែម .activeថ្នាក់ដោយដៃទៅធាតុបញ្ចូល <label>។

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked autocomplete="off"> Checked
  </label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

វិធីសាស្រ្ត

វិធីសាស្រ្ត ការពិពណ៌នា
$().button('toggle') បិទបើកស្ថានភាពរុញ។ ផ្តល់ឱ្យប៊ូតុងនូវរូបរាងដែលវាត្រូវបានធ្វើឱ្យសកម្ម។
$().button('dispose') បំផ្លាញប៊ូតុងរបស់ធាតុមួយ។