स्प्लिट बटन ड्रॉपडाउन ड्रॉपडाउन बटन के समान सामान्य शैली का उपयोग करते हैं लेकिन ड्रॉपडाउन के साथ एक प्राथमिक क्रिया जोड़ते हैं। स्प्लिट बटन में बाईं ओर प्राथमिक क्रिया होती है और दाईं ओर एक टॉगल होता है जो ड्रॉपडाउन प्रदर्शित करता है।
उदाहरण
आप बटन ड्रॉपडाउन को विभाजित करने के लिए निम्न कोड चलाने का प्रयास कर सकते हैं -
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> <script src = "/scripts/jquery.min.js"></script> <script src = "/bootstrap/js/bootstrap.min.js"></script> </head> <body> <div class = "btn-group"> <button type = "button" class = "btn btn-default">Admissions</button> <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown"> <span class = "caret"></span> <span class = "sr-only">Toggle Dropdown</span> </button> <ul class = "dropdown-menu" role = "menu"> <li><a href = "#">Masters</a></li> <li><a href = "#">Bachelors</a></li> </ul> </div> <div class = "btn-group"> <button type = "button" class = "btn btn-primary">Faculty</button> <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown"> <span class = "caret"></span> <span class = "sr-only">Toggle Dropdown</span> </button> <ul class = "dropdown-menu" role = "menu"> <li><a href = "#">Management</a></li> <li><a href = "#">Technical</a></li> <li><a href = "#">Staff</a></li> </ul> </div> </body> </html>