របៀបប្រើ Dropdown នៅក្នុង Bootstrap

ម៉ឺនុយទម្លាក់ចុះ (dropdown menu) មួយគឺជាម៉ឺនុយ toggletable មួយដែលអនុញ្ញាតឱ្យអ្នកប្រើ ជ្រើសតម្លៃមួយពីបញ្ជីដែលបានកំណត់ជាមុន:

ពន្យល់ឧទាហរណ៍ខាងលើ

• .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:

យើងបានលទ្ធផលដូចខាងក្រោម

ប្រភពដើម