बटन के बा

कई गो आकार, राज्य आ अउरी बहुत कुछ के समर्थन के साथ फॉर्म, डायलॉग, आ अउरी बहुत कुछ में क्रिया सभ खातिर बूटस्ट्रैप के कस्टम बटन शैली सभ के इस्तेमाल करीं।

उदाहरण खातिर दिहल गइल बा

बूटस्ट्रैप में कई गो पहिले से परिभाषित बटन शैली सभ के सामिल कइल गइल बा, हर एक आपन सिमेंटिक उद्देश्य के पूरा करे ला, कुछ एक्स्ट्रा सभ के अउरी नियंत्रण खातिर फेंकल जाला।

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

टेक्स्ट रैपिंग के अक्षम करीं

अगर रउआँ नइखीं चाहत कि बटन के पाठ लपेटे, त रउआँ .text-nowrapबटन में क्लास जोड़ सकत बानी। सास में, रउआँ $btn-white-space: nowrapहर बटन खातिर टेक्स्ट रैपिंग के अक्षम करे खातिर सेट कर सकत बानी।

बटन के टैग कइल जाला

.btnक्लास सभ के डिजाइन तत्व के साथ इस्तेमाल करे खातिर बनावल गइल बा <button>। <a>हालाँकि, आप एह क्लास सभ के या तत्व सभ पर भी इस्तेमाल क सकत बानी <input>(हालांकि कुछ ब्राउजर सभ में तनिका अलग रेंडरिंग लागू हो सके ला)।

जब अइसन तत्व सभ पर बटन क्लास <a>सभ के इस्तेमाल कइल जाला जे पन्ना में कामकाज के ट्रिगर करे खातिर इस्तेमाल होखे लें (जइसे कि संकुचित सामग्री), वर्तमान पन्ना के भीतर नया पन्ना भा खंड सभ से लिंक करे के बजाय, एह लिंक सभ के एगो दिहल जाय role="button"ताकि ऊ लोग अपना उद्देश्य के उचित तरीका से सहायक टेक्नालॉजी सभ के पहुँचा सके जइसे कि... स्क्रीन रीडर के इस्तेमाल कइल जाला.

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

रूपरेखा बटन के बा

बटन के जरूरत बा, लेकिन उ लोग ले आवे वाला भारी बैकग्राउंड रंग ना? डिफ़ॉल्ट संशोधक क्लास सभ के ओह लोग से बदल दीं जेह से .btn-outline-*कौनों बटन पर मौजूद सगरी बैकग्राउंड इमेज आ रंग सभ के हटावल जा सके ला।

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

साइज के बा

फैंसी बड़ बटन बा कि छोट? जोड़ल जाला .btn-lgया .btn-smअतिरिक्त आकार खातिर।

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

ब्लॉक लेवल बटन बनाईं-जवन कवनो पैरेंट के पूरा चौड़ाई में फैलल होखे-जोड़ के .btn-block।

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

सक्रिय अवस्था में बा

बटन दबा के देखाई दिही जब सक्रिय होखे त गहिरा बैकग्राउंड, गहिरा सीमा, आ जब छाया सक्षम होखे त इनसेट छाया होखे। s में कवनो क्लास जोड़ला के जरूरत नइखे <button>काहे कि ऊ लोग छद्म वर्ग के इस्तेमाल करेला . हालाँकि, अगर रउआँ के प्रोग्रामेटिक तरीका से स्टेट के रिप्लिकेट करे के जरूरत होखे तब भी आप एकही सक्रिय रूप के साथ .active(आ बिसेसता के शामिल करे ) के साथ मजबूर क सकत बानी।aria-pressed=“true”

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

अक्षम अवस्था में बा

कवनो तत्व में disabledबूलियन विशेषता जोड़ के बटन के निष्क्रिय देखाई दिही ।<button>

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

तत्व के इस्तेमाल करे वाला अक्षम बटन सभ के <a>व्यवहार तनी अलग होला:

• <a>s disabledएट्रिब्यूट के सपोर्ट ना करे ला, एह से रउआँ के क्लास के जोड़ल जरूरी बा जेह .disabledसे कि ई विजुअल रूप से अक्षम लउके।
• कुछ भविष्य के अनुकूल शैली सभ pointer-eventsके एंकर बटन सभ पर सभ के अक्षम करे खातिर शामिल कइल गइल बा। जवन ब्राउजर ओह गुण के सपोर्ट करेला ओहमें रउरा अक्षम कर्सर बिल्कुल ना लउकी.
• इस्तेमाल करे वाला अक्षम बटन सभ में सहायक टेक्नोलॉजी सभ के तत्व के स्थिति के बतावे खातिर बिसेसता <a>सामिल होखे के चाहीं ।aria-disabled="true"
• इस्तेमाल करे वाला अक्षम बटन सभ में बिसेसता के सामिल <a> ना कइल जाय ।href

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

लिंक कार्यक्षमता के चेतावनी बा

hrefअइसन मामिला सभ के कवर करे खातिर जहाँ रउआँ के बिसेसता के अक्षम लिंक पर रखे के पड़े ला, .disabledक्लास s pointer-events: noneके लिंक कामकाज के अक्षम करे के कोसिस करे खातिर इस्तेमाल करे ला <a>। ध्यान दीं कि ई CSS गुण अभी HTML खातिर मानकीकृत नइखे भइल, बाकी सभ आधुनिक ब्राउजर एकरा के सपोर्ट करे लें। एकरे अलावा, ब्राउजर सभ में भी जे सपोर्ट करे लें pointer-events: none, कीबोर्ड नेविगेशन अप्रभावित रहे ला, मने कि दृष्टिवान कीबोर्ड यूजर आ सहायक टेक्नोलॉजी सभ के यूजर अबहियों एह लिंक सभ के सक्रिय क सके लें। त सुरक्षित होखे खातिर, के अलावा , एह लिंक सभ पर aria-disabled="true"एगो एट्रिब्यूट भी शामिल करीं जेह से कि इनहन के कीबोर्ड फोकस ना मिले, आ इनहन के कामकाज के पूरा तरीका से अक्षम करे खातिर कस्टम जावास्क्रिप्ट के इस्तेमाल करीं।tabindex="-1"

<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

बटन प्लगइन के बा

बटन के साथे अउरी काम करीं। कंट्रोल बटन स्टेट करे ला या टूलबार नियर अउरी घटक सभ खातिर बटन सभ के समूह बनावे ला।

राज्यन के टॉगल कइल जाला

data-toggle="button"कवनो बटन के activeस्थिति टॉगल करे खातिर जोड़ल जाला। अगर रउआँ कवनो बटन के प्री-टॉगल कर रहल बानी, त रउआँ के मैन्युअल रूप से .activeक्लास आ .aria-pressed="true"<button>

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

चेकबॉक्स आ रेडियो बटन के इस्तेमाल कइल जाला

बूटस्ट्रैप के .buttonस्टाइल सभ के अउरी तत्व सभ पर लागू कइल जा सके ला, जइसे कि <label>s, ताकि चेकबॉक्स भा रेडियो स्टाइल बटन टॉगलिंग उपलब्ध करावल जा सके। जावास्क्रिप्ट के माध्यम से इनहन के टॉगलिंग व्यवहार के सक्षम करे खातिर ओह संशोधित बटन सभ के समाहित data-toggle="buttons"करे खातिर एगो में जोड़ीं आ अपना बटन सभ के भीतर s के स्टाइल करे खातिर जोड़ीं। ध्यान दीं कि रउआँ एकल इनपुट से चले वाला बटन भा इनहन के समूह बना सकत बानी।.btn-group.btn-group-toggle<input>

एह बटन सभ खातिर चेक कइल गइल स्थिति खाली बटन पर इवेंट के माध्यम से अपडेट कइल जालाclick । अगर रउआँ इनपुट के अपडेट करे खातिर कौनों अउरी तरीका के इस्तेमाल करीं-जइसे कि, <input type="reset">इनपुट के गुण के मैन्युअल रूप से लागू क के -त रउआँ के मैन्युअल रूप checkedसे टॉगल करे के पड़ी ।.active<label>

ध्यान दीं कि पहिले से चेक कइल बटन सभ खातिर रउआँ के मैन्युअल रूप से .activeक्लास के इनपुट के <label>.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

विधियन के बारे में बतावल गइल बा