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