बटन समूह के साथ एक पंक्ति में बटनों की एक श्रृंखला को समूहबद्ध करें, और उन्हें जावास्क्रिप्ट के साथ सुपर-पावर करें।
मूल उदाहरण
.btnके साथ बटनों की एक श्रृंखला लपेटें .btn-group. हमारे बटन प्लगइन के साथ वैकल्पिक JavaScript रेडियो और चेकबॉक्स शैली व्यवहार जोड़ें ।
सही सुनिश्चित करें roleऔर एक लेबल प्रदान करें
सहायक तकनीकों (जैसे स्क्रीन रीडर) को यह बताने के लिए कि बटनों की एक श्रृंखला समूहीकृत है, एक उपयुक्त roleविशेषता प्रदान करने की आवश्यकता है। बटन समूहों के लिए, यह होगा role="group", जबकि टूलबार में एक होना चाहिए role="toolbar"।
इसके अलावा, समूहों और टूलबार को एक स्पष्ट लेबल दिया जाना चाहिए, क्योंकि अधिकांश सहायक प्रौद्योगिकियां सही भूमिका विशेषता की उपस्थिति के बावजूद, अन्यथा उनकी घोषणा नहीं करेंगी। यहां दिए गए उदाहरणों में, हम उपयोग करते हैं aria-label, लेकिन विकल्प जैसे कि aria-labelledbyभी इस्तेमाल किया जा सकता है।
बटन टूलबार
अधिक जटिल घटकों के लिए बटन समूहों के सेट को बटन टूलबार में संयोजित करें। समूहों, बटनों, और बहुत कुछ को खाली करने के लिए आवश्यकतानुसार उपयोगिता वर्गों का उपयोग करें।
अपने टूलबार में इनपुट समूहों को बटन समूहों के साथ बेझिझक मिलाएं। ऊपर दिए गए उदाहरण के समान, चीजों को ठीक से स्थान देने के लिए आपको कुछ उपयोगिताओं की आवश्यकता होगी।
@
@
आकार
समूह में प्रत्येक बटन पर बटन आकार देने वाली कक्षाएं लागू करने के बजाय, एकाधिक समूहों को नेस्ट करते समय बस .btn-group-*प्रत्येक में जोड़ें .btn-group, जिसमें प्रत्येक एक भी शामिल है।
घोंसला करने की क्रिया
जब आप ड्रॉपडाउन मेनू को बटनों की एक श्रृंखला के साथ मिश्रित करना चाहते हैं, तो .btn-groupदूसरे के भीतर रखें ।.btn-group