बटन के

फॉर्म, संवाद, आओर बेसी मे क्रिया क लेल बूटस्ट्रैप क कस्टम बटन शैली क उपयोग कई आकार, राज्य आओर बेसी क समर्थन क संग करू.

उदाहरण के लिये

बूटस्ट्रैप म॑ कई पूर्व परिभाषित बटन शैली शामिल छै, जेकरा म॑ हर एक अपनऽ शब्दार्थ उद्देश्य क॑ पूरा करै छै, जेकरा म॑ कुछ अतिरिक्त क॑ अधिक नियंत्रण लेली फेंकलऽ जाय छै ।

<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>

बटन टैग

कक्षाक कें .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एंकर बटन पर सब कें अक्षम करय कें लेल किछ भविष्य कें अनुकूल शैली शामिल छै . ब्राउज़र मे जे ओहि गुण केँ समर्थन करैत अछि, अहाँ केँ अक्षम कर्सर एकदम नहि देखबा मे आओत.
• अक्षम बटन मे aria-disabled="true"सहायक प्रौद्योगिकी कें तत्व कें स्थिति कें संकेत करय कें लेल विशेषता शामिल होबाक चाही.

<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" autocomplete="off">
  Single toggle
</button>

चेकबॉक्स आ रेडियो बटन

बूटस्ट्रैप कें .buttonशैली अन्य तत्वक पर लागू कैल जा सकय छै, जेना <label>s, चेकबॉक्स या रेडियो शैली बटन टॉगलिंग प्रदान करय कें लेल. जावास्क्रिप्ट के माध्यम स॑ ओकरऽ टॉगलिंग व्यवहार क॑ सक्षम करै लेली आरू अपनऽ बटन के भीतर s क॑ स्टाइल करै लेली जोड़ै लेली वू संशोधित बटन क॑ समाहित data-toggle="buttons"करलऽ गेलऽ एक म॑ जोड़ऽ । ध्यान राखू जे अहां एकल इनपुट संचालित बटन या ओकर समूह बना सकय छी..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 autocomplete="off"> 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" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

विधियाँ