बटणां घालतात

एका परस चड आकार, स्थिती आनी हेर खातीर आदारासयत फॉर्म, संवाद, आनी चडांतल्या कृतीं खातीर Bootstrap ची सानुकूल बटण शैली वापरात.

उदाहरणां

बूटस्ट्रॅपांत जायत्यो पूर्वनिर्धारीत बटण शैली आसपावीत केल्यात, दरेक स्वताच्या अर्थपूर्ण उद्देशाची सेवा करता, चड नियंत्रणा खातीर कांय अतिरिक्त उडयतात.

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

सक्रिय अवस्था

सक्रिय आसतना बटणां दामून दिसतलीं (काळी पार्श्वभूंय, काळी शिमो, आनी इनसेट सावळी आशिल्ली). ते pseudo-class वापरतात म्हणून 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>disableds गुणधर्माक तेंको दिना , देखून .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">
  Single toggle
</button>

चेकबॉक्स आनी रेडिओ बटणां

चेकबॉक्स वा रेडिओ शैली बटण टॉगलिंग पुरवण करपाक बूटस्ट्रॅपाच्यो .buttonशैली हेर घटकांक लागू करूं येतात, जशे की s. JavaScript वरवीं तांची टॉगलिंग वागणूक सक्षम करपाक आनी तुमच्या बटणां भितर 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>

पद्दती