बटणां घालतात

एका परस चड आकार, स्थिती आनी हेर खातीर आदारासयत फॉर्म, संवाद, आनी चडांतल्या कृतीं खातीर 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एंकर बटणांचेर सगळें अक्षम करपाक कांय फुडाराक अनुकूल शैलींचो आस्पाव केला . त्या गुणधर्माक तेंको दिवपी ब्राउझरांत, तुमकां अक्षम कर्सर बिल्कुल दिसचो ना.
• वापरपी अक्षम बटणांनी सहाय्यक तंत्रज्ञानांक घटकाची स्थिती दाखोवपाक गुणधर्म <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. 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>

पद्दती