बटनहरू
धेरै आकारहरू, राज्यहरू, र थपका लागि समर्थनको साथ फारमहरू, संवादहरू, र थप कार्यहरूका लागि बुटस्ट्र्यापको अनुकूलन बटन शैलीहरू प्रयोग गर्नुहोस्।
बुटस्ट्र्यापले धेरै पूर्वनिर्धारित बटन शैलीहरू समावेश गर्दछ, प्रत्येकले यसको आफ्नै अर्थपूर्ण उद्देश्यको सेवा गर्दछ, थप नियन्त्रणको लागि केही अतिरिक्तहरू समावेश गर्दछ।
सहयोगी टेक्नोलोजीहरूको अर्थ बुझाउँदै
अर्थ थप्न रङको प्रयोगले मात्र दृश्य सङ्केत प्रदान गर्दछ, जुन सहायक प्रविधिहरूका प्रयोगकर्ताहरूलाई जानकारी दिइने छैन - जस्तै स्क्रिन रिडरहरू। सुनिश्चित गर्नुहोस् कि रङद्वारा संकेत गरिएको जानकारी या त सामग्रीबाट नै स्पष्ट छ (जस्तै देखिने पाठ), वा वैकल्पिक माध्यमहरू मार्फत समावेश गरिएको छ, जस्तै .sr-only
कक्षासँग लुकेको अतिरिक्त पाठ।
कक्षाहरू तत्वसँग .btn
प्रयोग गर्न डिजाइन गरिएका छन् । <button>
यद्यपि, तपाइँ यी कक्षाहरू <a>
वा <input>
तत्वहरूमा पनि प्रयोग गर्न सक्नुहुन्छ (यद्यपि केही ब्राउजरहरूले अलि फरक रेन्डरिङ लागू गर्न सक्छन्)।
हालको पृष्ठ भित्रका नयाँ पृष्ठहरू वा खण्डहरूमा लिङ्क गर्नुको सट्टा इन-पेज कार्यक्षमता ट्रिगर गर्न प्रयोग हुने तत्वहरूमा बटन वर्गहरू प्रयोग गर्दा, यी लिङ्कहरूलाई सहयोगी प्रविधिहरूमा उनीहरूको उद्देश्यलाई उचित रूपमा व्यक्त गर्न <a>
दिइनु पर्छ। role="button"
स्क्रिन रिडरहरू।
एउटा बटन चाहिन्छ, तर तिनीहरूले ल्याएका भारी पृष्ठभूमि रंगहरू होइनन्? .btn-outline-*
कुनै पनि बटनमा सबै पृष्ठभूमि छविहरू र रङहरू हटाउनको लागि पूर्वनिर्धारित परिमार्जक वर्गहरूलाई बदल्नुहोस् ।
फ्यान्सी ठूला वा सानो बटनहरू? थप्नुहोस् .btn-lg
वा .btn-sm
थप आकारहरूको लागि।
ब्लक लेभल बटनहरू सिर्जना गर्नुहोस्—जो अभिभावकको पूर्ण चौडाइमा फैलिन्छ—थप्दै .btn-block
।
सक्रिय हुँदा बटनहरू थिचिएको देखिन्छ (गाढा पृष्ठभूमि, गाढा किनारा र इनसेट छायाँको साथ)। s मा क्लास थप्न आवश्यक छैन <button>
किनकि तिनीहरूले छद्म-वर्ग प्रयोग गर्छन् । यद्यपि, तपाइँ अझै पनि उही सक्रिय उपस्थिति .active
(र aria-pressed="true"
विशेषता समावेश) को साथ बलियो बनाउन सक्नुहुन्छ यदि तपाइँले राज्य कार्यक्रमको रूपमा नक्कल गर्न आवश्यक छ।
कुनै पनि तत्वमा disabled
बुलियन विशेषता थपेर बटनहरूलाई निष्क्रिय देखाउनुहोस्।<button>
तत्व प्रयोग गरेर असक्षम गरिएका बटनहरू <a>
अलि फरक व्यवहार गर्छन्:
<a>
s ले विशेषतालाई समर्थन गर्दैनdisabled
, त्यसैले तपाईंले.disabled
यसलाई दृश्यात्मक रूपमा असक्षम देखाउनको लागि कक्षा थप्नु पर्छ।pointer-events
एंकर बटनहरूमा सबै असक्षम पार्न केही भविष्य-अनुकूल शैलीहरू समावेश गरिएका छन् । त्यो गुणलाई समर्थन गर्ने ब्राउजरहरूमा, तपाईंले असक्षम कर्सरलाई देख्नुहुने छैन।- असक्षम गरिएका बटनहरूले
aria-disabled="true"
सहायक प्रविधिहरूमा तत्वको अवस्था संकेत गर्न विशेषता समावेश गर्नुपर्छ।
लिङ्क कार्यक्षमता चेतावनी
.disabled
वर्गले s को लिङ्क कार्यक्षमता असक्षम पार्न प्रयास गर्न प्रयोग गर्दछ , pointer-events: none
तर <a>
त्यो CSS गुण अझै मानकीकृत गरिएको छैन। थप रूपमा, समर्थन गर्ने ब्राउजरहरूमा पनि pointer-events: none
, किबोर्ड नेभिगेसन अप्रभावित रहन्छ, यसको अर्थ किबोर्ड प्रयोगकर्ताहरू र सहायक प्रविधिहरूका प्रयोगकर्ताहरूले अझै पनि यी लिङ्कहरू सक्रिय गर्न सक्षम हुनेछन्। त्यसैले सुरक्षित हुन, tabindex="-1"
यी लिङ्कहरूमा विशेषता थप्नुहोस् (उनीहरूलाई किबोर्ड फोकस प्राप्त गर्नबाट रोक्न) र तिनीहरूको कार्यक्षमता असक्षम गर्न अनुकूलन JavaScript प्रयोग गर्नुहोस्।
बटनहरूसँग थप गर्नुहोस्। कन्ट्रोल बटन राज्यहरू वा उपकरणपट्टीहरू जस्तै थप घटकहरूको लागि बटनहरूको समूह सिर्जना गर्नुहोस्।
data-toggle="button"
बटनको active
स्थिति टगल गर्न थप्नुहोस् । यदि तपाइँ बटन पूर्व-टगल गर्दै हुनुहुन्छ भने, तपाइँले म्यानुअल रूपमा .active
कक्षा र aria-pressed="true"
मा थप्नु पर्छ <button>
।
बुटस्ट्र्यापको .button
शैलीहरू अन्य तत्वहरूमा लागू गर्न सकिन्छ, जस्तै <label>
s, चेकबक्स वा रेडियो शैली बटन टगलिङ प्रदान गर्न। जाभास्क्रिप्ट मार्फत तिनीहरूको टगल गर्ने व्यवहार सक्षम गर्न ती परिमार्जित बटनहरू समावेश भएकोमा थप्नुहोस् र data-toggle="buttons"
तपाईंको बटनहरूमा s शैली थप्नुहोस्। ध्यान दिनुहोस् कि तपाइँ एकल इनपुट-संचालित बटन वा ती समूहहरू सिर्जना गर्न सक्नुहुन्छ।.btn-group
.btn-group-toggle
<input>
यी बटनहरूको लागि जाँच गरिएको स्थिति बटनमा भएको घटना मार्फत मात्र अद्यावधिक गरिन्छclick
। यदि तपाइँ इनपुट अद्यावधिक गर्न अर्को विधि प्रयोग गर्नुहुन्छ - जस्तै, <input type="reset">
म्यानुअल रूपमा इनपुटको गुण लागू गरेर checked
- तपाइँ म्यानुअल रूपमा टगल गर्न आवश्यक .active
छ <label>
।
नोट गर्नुहोस् कि पूर्व-जाँच गरिएका बटनहरूले तपाईंलाई म्यानुअल रूपमा .active
क्लासलाई इनपुटमा थप्न आवश्यक छ <label>
।
विधि | विवरण |
---|---|
$().button('toggle') |
टगल पुश स्थिति। बटनलाई सक्रिय गरिएको जस्तो देखिन्छ। |
$().button('dispose') |
तत्वको बटनलाई नष्ट गर्छ। |