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