Source

बटणे

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

उदाहरणे

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

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

सक्रिय स्थिती

सक्रिय असताना बटणे दाबलेली दिसतील (गडद पार्श्वभूमी, गडद बॉर्डर आणि इनसेट शॅडोसह). 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" 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>

.disabledवर्ग s ची लिंक कार्यक्षमता अक्षम करण्याचा प्रयत्न करते , pointer-events: noneपरंतु <a>ती CSS गुणधर्म अद्याप प्रमाणित केलेली नाही. याशिवाय, समर्थन करणाऱ्या ब्राउझरमध्येही pointer-events: noneकीबोर्ड नेव्हिगेशन अप्रभावित राहते, याचा अर्थ कीबोर्ड वापरकर्ते आणि सहाय्यक तंत्रज्ञानाचे वापरकर्ते तरीही हे दुवे सक्रिय करण्यात सक्षम असतील. त्यामुळे सुरक्षित राहण्यासाठी, tabindex="-1"या लिंक्सवर एक विशेषता जोडा (त्यांना कीबोर्ड फोकस मिळण्यापासून रोखण्यासाठी) आणि त्यांची कार्यक्षमता अक्षम करण्यासाठी सानुकूल JavaScript वापरा.

बटण प्लगइन

बटणांसह अधिक करा. कंट्रोल बटण स्टेटस किंवा टूलबार सारख्या अधिक घटकांसाठी बटणांचे गट तयार करा.

स्थिती टॉगल करा

बटणाची स्थिती 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 द्वारे त्यांचे टॉगलिंग वर्तन सक्षम करण्यासाठी त्या सुधारित बटणांचा समावेश असलेल्यामध्ये जोडा आणि तुमच्या <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>

पद्धती

पद्धत वर्णन
$().button('toggle') टॉगल पुश स्थिती. बटण सक्रिय केले आहे असे स्वरूप देते.
$().button('dispose') घटकाचे बटण नष्ट करते.