របៀបប្រើ Dropdown នៅក្នុង Bootstrap
ម៉ឺនុយទម្លាក់ចុះ (dropdown menu) មួយគឺជាម៉ឺនុយ toggleable មួយដែលអនុញ្ញាតឱ្យអ្នកប្រើ ជ្រើសតម្លៃមួយពីបញ្ជីដែលបានកំណត់ជាមុន:
- .dropdown class បង្ហាញម៉ឺនុយទម្លាក់ចុះ។
- ដើម្បីបើកម៉ឺនុយទម្លាក់ចុះ, ប្រើប៊ូតុងមួយ ឬ តំណភ្ជាប់ជាមួយនឹង class នៃការ .dropdown-toggle និង data-toggle= “dropdown” attribute។
- .caret class បង្កើតរូបតំណាងសញ្ញាព្រួញ (), ដែលបង្ហាញថាប៊ូតុងទម្លាក់ចុះ។
- ដើម្បីបង្កើតម៉ឺនុយទម្លាក់ចុះត្រូវបន្ថែម .dropdown-menu class ទៅក្នុងធាតុ <ul> ។
១) បែងចែកទម្លាក់ចុះ (Dropdown Divider)
.divider class ត្រូវបានប្រើដើម្បីចែកតំណភ្ជាប់ដោយឡែកពីគ្នានៅក្នុងម៉ឺនុយទម្លាក់ចុះផ្ដេក:
យើងបានលទ្ធផលដូចខាងក្រោម
២) Header ម៉ឺនុយទម្លាក់ចុះ (Dropdown Header)
.dropdown-header class បានប្រើដើម្បីបន្ថែម headers នៅក្នុងម៉ឺនុយទម្លាក់ចុះ:
យើងបានលទ្ធផលដូចខាងក្រោម
៣) បិទធាតុ (Disable an Item)
ដើម្បីបិទធាតុនៅក្នុងម៉ឺនុយទម្លាក់ចុះប្រើ .disabled class:
យើងបានលទ្ធផលដូចខាងក្រោម
៤) ទីតាំងទម្លាក់ចុះ (Dropdown Position)
ដើម្បី right-align ទម្លាក់ចុះ ត្រូវបន្ថែម .dropdown-menu-right ទៅក្នុងធាតុ .dropdown-menu:
យើងបានលទ្ធផលដូចខាងក្រោម
៥) ទម្លាក់ឡើង (Dropup)
ប្រសិនបើអ្នកចង់ម៉ឺនុយទម្លាក់ចុះដើម្បីជំនួសឱ្យការធ្លាក់ចុះ ទៅជាទម្លាក់ឡើង ផ្លាស់ប្តូរធាតុ <div> ជាមួយ class= “dropdown” ទៅជា “dropup”:
យើងបានលទ្ធផលដូចខាងក្រោម
