बटन के

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

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

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

<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क्लास जोड़ सकय छी. Sass मे, अहां $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, चेकबॉक्स या रेडियो शैली बटन टॉगलिंग प्रदान करय कें लेल. जावास्क्रिप्ट के माध्यम स॑ ओकरऽ टॉगलिंग व्यवहार क॑ सक्षम करै लेली आरू अपनऽ बटन के भीतर 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> 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>

विधियाँ