बटणां घालतात
एका परस चड आकार, स्थिती आनी हेर खातीर आदारासयत फॉर्म, संवाद, आनी चडांतल्या कृतीं खातीर 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>सहाय्यक तंत्रगिन्यानाक अर्थ दिवप
अर्थ जोडपाक रंग वापरप फकत एक दृश्य संकेत दिता, जो सहाय्यक तंत्रगिन्यानाच्या वापरप्यांक पावोवचो ना – जशें स्क्रीन रीडर. रंगान दाखयल्ली म्हायती एक तर सामुग्रींतल्यानच स्पश्ट आसा (देखीक दिसपी मजकूर), वा पर्यायी साधनां वरवीं आस्पाव केला हाची खात्री करात, जशे की .sr-onlyवर्गा वांगडा लिपयल्लो अतिरिक्त मजकूर.
घटकावांगडा .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" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>दुवो कार्यक्षमताय सावधानताय
.disabledवर्ग s ची दुवो कार्यक्षमताय अक्षम करपाचो यत्न करपाक वापरता , pointer-events: noneपूण <a>तो CSS गुणधर्म अजून प्रमाणीत करूंक ना. ते भायर, समर्थन करपी ब्राउझरांत लेगीत pointer-events: none, कीबोर्ड नेव्हिगेशन अप्रभावीत उरता, म्हळ्यार नदरेक पडपी कीबोर्ड वापरपी आनी सहाय्यक तंत्रगिन्यानाचे वापरपी अजूनय हे दुवे सक्रिय करूंक शकतले. तर सुरक्षीत रावपा खातीर, tabindex="-1"ह्या दुव्यांचेर एक गुणधर्म जोडात (तांकां कीबोर्ड फोकस मेळचो न्हय म्हूण) आनी तांची कार्यक्षमताय अक्षम करपाक सानुकूल जावास्क्रिप्ट वापरात.
बटणां वरवीं चड करचें. नियंत्रण बटण राज्य करता वा साधनपट्टी सारकिल्या चड घटकांखातीर बटणांचे गट तयार करतात.
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. 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 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>| पद्दत | वर्णन |
|---|---|
$().button('toggle') |
पुश स्टेट टॉगल करता. बटणाक तें सक्रिय केलां अशें दिसप दिता. |
$().button('dispose') |
एका घटकाचें बटण नश्ट करता. |