बटन दे

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

उदाहरण दे

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

<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" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" 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शैलियें गी होर तत्वें पर लागू कीता जाई सकदा ऐ, जिऱयां s. जावास्क्रिप्ट दे राहें उंदे टॉगलिंग व्यवहार गी सक्षम करने आस्तै उनें संशोधित बटनें गी शामल करने आह् ले इक च <label>जोड़ो ते अपने बटनें दे अंदर 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>

विधियां