बटन दे
कई आकारें, राज्यें, ते होर मते आस्तै समर्थन कन्नै फार्म, संवाद, ते होर मते च कार्रवाईयें आस्तै बूटस्ट्रैप दी कस्टम बटन शैलियें दा इस्तेमाल करो.
उदाहरण दे
बूटस्ट्रैप च केईं पूर्व-निर्धारित बटन शैलियां शामल न, हर इक अपने-अपने शब्दार्थ उद्देश्य दी सेवा करदा ऐ, जिस च होर नियंत्रण आस्तै किश अतिरिक्त बी फेंके गेदे न.
सहायक प्रौद्योगिकियें गी अर्थ संप्रेषित करना
अर्थ जोड़ने आस्तै रंग दा उपयोग करना सिर्फ इक दृश्य संकेत दिंदा ऐ, जेह् ड़ा सहायक तकनीकें दे बरतूनकर्ताएं गी नेईं पजाया जाग – जि’यां स्क्रीन रीडर। एह् सुनिश्चत करो जे रंग कन्नै दर्शाए गेदे जानकारी गी या तां सामग्री थमां गै स्पष्ट ऐ (जियां दिक्खने आह् ला पाठ), जां वैकल्पिक साधनें राहें शामल कीता जा, जि’यां .sr-only
वर्ग कन्नै छिपे दा अतिरिक्त पाठ।
पाठ लपेटने गी अक्षम करो
जेकर तुस बटन पाठ लपेटना नेईं चांह् दे ओ तां तुस बटन च .text-nowrap
क्लास जोड़ी सकदे ओ। Sass च, तुस $btn-white-space: nowrap
हर बटन आस्तै पाठ रैपिंग गी अक्षम करने लेई सेट करी सकदे ओ.
बटन टैग करदा ऐ
कक्षाएं गी तत्व .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"
इनें लिंकें पर इक विशेषता जोड़ो (इनेंगी कीबोर्ड फोकस हासल करने थमां रोकने आस्तै) ते उंदी कार्यक्षमता गी अक्षम करने आस्तै कस्टम जावास्क्रिप्ट दा इस्तेमाल करो.
बटन प्लगइन
बटन दे नाल होर करो। नियंत्रण बटन राज्यें गी दस्सदा ऐ जां टूलबार जनेह् होर घटकें आस्तै बटनें दे समूह बनाओ.
राज्यों को टॉगल करो
data-toggle="button"
इक बटन दी active
स्थिति गी टॉगल करने लेई जोड़ो । जेकर तुस इक बटन गी प्री-टॉगल करा दे ओ तां तुसेंगी मैन्युअल रूप कन्नै .active
क्लास ते .aria-pressed="true"
<button>
चेकबॉक्स ते रेडियो बटन
चेकबॉक्स जां रेडियो शैली बटन टॉगलिंग प्रदान करने आस्तै बूटस्ट्रैप दी .button
शैलियें गी होर तत्वें पर लागू कीता जाई सकदा ऐ, जिऱयां s. जावास्क्रिप्ट दे राहें उंदे टॉगलिंग व्यवहार गी सक्षम करने आस्तै उनें संशोधित बटनें गी शामल करने आह् ले इक च <label>
जोड़ो ते अपने बटनें दे अंदर s गी शैली च जोड़ो. ध्यान रक्खो जे तुस इकल इनपुट-पावर बटन जां उंदे समूह बनाई सकदे ओ.data-toggle="buttons"
.btn-group
.btn-group-toggle
<input>
इनें बटनें आस्तै जांच कीती गेदी स्थिति गी सिर्फ बटन पर घटना दे राहें गै अपडेट कीता जंदाclick
ऐ। जेकर तुस इनपुट गी अपडेट करने आस्तै कुसै होर तरीके दा इस्तेमाल करदे ओ-जियां, <input type="reset">
इनपुट दी checked
संपत्ति गी मैन्युअल रूप कन्नै लागू करने कन्नै- तुसेंगी मैन्युअल रूप कन्नै टॉगल करने दी लोड़ .active
होग <label>
.
ध्यान रक्खो जे पूर्व-जांच कीते गेदे बटनें गी तुसेंगी मैन्युअल रूप कन्नै .active
क्लास गी इनपुट दे <label>
.
विधियां
तरीका | ब्यौरा |
---|---|
$().button('toggle') |
पुश स्टेट टॉगल करदा ऐ। बटन गी एह् दिक्खने गी दिंदा ऐ जे एह् सक्रिय होई गेदा ऐ। |
$().button('dispose') |
इक तत्व दा बटन नष्ट करदा ऐ। |