बटन के बा
कई गो आकार, राज्य आ अउरी बहुत कुछ के समर्थन के साथ फॉर्म, डायलॉग, आ अउरी बहुत कुछ में क्रिया सभ खातिर बूटस्ट्रैप के कस्टम बटन शैली सभ के इस्तेमाल करीं।
बूटस्ट्रैप में कई गो पहिले से परिभाषित बटन शैली सभ के सामिल कइल गइल बा, हर एक आपन सिमेंटिक उद्देश्य के पूरा करे ला, कुछ एक्स्ट्रा सभ के अउरी नियंत्रण खातिर फेंकल जाला।
सहायक प्रौद्योगिकी के अर्थ संप्रेषित कइल
अर्थ जोड़े खातिर रंग के इस्तेमाल से खाली एगो दृश्य संकेत मिलेला, जवन सहायक तकनीक के प्रयोगकर्ता लोग के ना पहुँचावल जाई – जइसे कि स्क्रीन रीडर। सुनिश्चित करीं कि रंग से चिन्हित जानकारी या त खुद सामग्री से स्पष्ट होखे (जइसे कि दृश्यमान पाठ), या फिर वैकल्पिक तरीका से शामिल कइल गइल होखे, जइसे कि .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>
sdisabled
एट्रिब्यूट के सपोर्ट ना करे ला, एह से रउआँ के क्लास के जोड़ल जरूरी बा जेह.disabled
से कि ई विजुअल रूप से अक्षम लउके।- कुछ भविष्य के अनुकूल शैली सभ
pointer-events
के एंकर बटन सभ पर सभ के अक्षम करे खातिर शामिल कइल गइल बा। जवन ब्राउजर ओह गुण के सपोर्ट करेला ओहमें रउरा अक्षम कर्सर बिल्कुल ना लउकी. - अक्षम बटन सभ में
aria-disabled="true"
सहायक प्रौद्योगिकी सभ के तत्व के स्थिति के बतावे खातिर बिसेसता सामिल होखे के चाहीं।
लिंक कार्यक्षमता के चेतावनी बा
.disabled
क्लास s के लिंक फंक्शनलिटी के अक्षम करे के कोसिस करे खातिर इस्तेमाल करे pointer-events: none
ला <a>
, बाकी ऊ CSS गुण अबहिन ले मानकीकरण नइखे भइल। एकरे अलावा, ब्राउजर सभ में भी जे सपोर्ट करे लें pointer-events: none
, कीबोर्ड नेविगेशन अप्रभावित रहे ला, मने कि दृष्टिवान कीबोर्ड यूजर आ सहायक टेक्नोलॉजी सभ के यूजर अबहियों एह लिंक सभ के सक्रिय क सके लें। त सुरक्षित रहे खातिर tabindex="-1"
एह लिंक सभ पर एगो एट्रिब्यूट जोड़ीं (एह सभ के कीबोर्ड फोकस ना मिले से रोके खातिर) आ इनहन के कामकाज के अक्षम करे खातिर कस्टम जावास्क्रिप्ट के इस्तेमाल करीं।
बटन के साथे अउरी काम करीं। कंट्रोल बटन स्टेट करे ला या टूलबार नियर अउरी कंपोनेंट सभ खातिर बटन सभ के समूह बनावे ला।
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') |
कवनो तत्व के बटन के नष्ट कर देला। |