ប៊ូតុង

ប្រើរចនាប័ទ្មប៊ូតុងផ្ទាល់ខ្លួនរបស់ 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>

បិទការរុំអត្ថបទ

ប្រសិនបើ​អ្នក​មិន​ចង់​ឱ្យ​អត្ថបទ​ប៊ូតុង​រុំ​ទេ អ្នក​អាច​បន្ថែម .text-nowrap​ថ្នាក់​ទៅ​ប៊ូតុង។ នៅក្នុង Sass អ្នកអាចកំណត់ $btn-white-space: nowrapឱ្យបិទការរុំអត្ថបទសម្រាប់ប៊ូតុងនីមួយៗ។

ស្លាកប៊ូតុង

ថ្នាក់ .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នៅលើប៊ូតុងយុថ្កា។ នៅក្នុងកម្មវិធីរុករកតាមអ៊ីនធឺណិតដែលគាំទ្រទ្រព្យសម្បត្តិនោះ អ្នកនឹងមិនឃើញទស្សន៍ទ្រនិចដែលត្រូវបានបិទទាល់តែសោះ។
• ប៊ូតុងបិទដោយប្រើ <a>គួរតែរួមបញ្ចូល aria-disabled="true"គុណលក្ខណៈដើម្បីបង្ហាញពីស្ថានភាពនៃធាតុទៅនឹងបច្ចេកវិទ្យាជំនួយ។
• ប៊ូតុងបិទដោយប្រើ <a> មិនគួរ រួមបញ្ចូល hrefគុណលក្ខណៈទេ។

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

ការព្រមានអំពីមុខងារភ្ជាប់

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

<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>

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

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

បិទ/បើក រដ្ឋ

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

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  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> 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" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

វិធីសាស្រ្ត