बटणे

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

उदाहरणे

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

<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बटणावर वर्ग जोडू शकता. $btn-white-space: nowrapSass मध्ये, तुम्ही प्रत्येक बटणासाठी मजकूर रॅपिंग अक्षम करण्यासाठी सेट करू शकता .

बटण टॅग

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

पद्धती