बटन दे

कई आकारें, राज्यें, ते होर मते आस्तै समर्थन कन्नै फार्म, संवाद, ते होर मते च कार्रवाईयें आस्तै बूटस्ट्रैप दी कस्टम बटन शैलियें दा इस्तेमाल करो.

उदाहरण दे

बूटस्ट्रैप च केईं पूर्व-निर्धारित बटन शैलियां शामल न, हर इक अपने-अपने शब्दार्थ उद्देश्य दी सेवा करदा ऐ, जिसदे कन्नै होर नियंत्रण आस्तै किश अतिरिक्त बी फेंके गेदे न.

<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शैलियें गी होर तत्वें पर लागू कीता जाई सकदा ऐ, जिऱयां s. जावास्क्रिप्ट दे राहें उंदे टॉगलिंग व्यवहार गी सक्षम करने आस्तै ते अपने बटनें दे अंदर s गी शैली च जोड़ने आस्तै उनें संशोधित बटनें गी शामल करने आस्तै इक च <label>जोड़ो . ध्यान रक्खो जे तुस इकल इनपुट-पावर बटन जां उंदे समूह बनाई सकदे ओ.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>

विधियां