बूटस्ट्रैप 4 बटन
बटन शैलियाँ
बूटस्ट्रैप 4 विभिन्न प्रकार के बटन प्रदान करता है:
उदाहरण
<button type="button" class="btn">Basic</button>
<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-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button
type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
बटन वर्गों का उपयोग <a>, <button>, या
<input>तत्वों पर किया जा सकता है:
उदाहरण
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
हम लिंक की href विशेषता में # क्यों डालते हैं?
चूंकि हमारे पास इसे लिंक करने के लिए कोई पेज नहीं है, और हम "404" संदेश प्राप्त नहीं करना चाहते हैं, हम लिंक के रूप में # डालते हैं। वास्तविक जीवन में यह निश्चित रूप से "खोज" पृष्ठ का एक वास्तविक URL होना चाहिए।
बटन की रूपरेखा
बूटस्ट्रैप 4 आठ आउटलाइन/बॉर्डर्ड बटन प्रदान करता है:
उदाहरण
<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-info">Info</button>
<button
type="button" class="btn btn-outline-warning">Warning</button>
<button
type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button
type="button" class="btn btn-outline-light text-dark">Light</button>
बटन आकार
.btn-lgबड़े बटन के लिए वर्ग का उपयोग करें या .btn-smछोटे बटन के लिए वर्ग का उपयोग करें:
उदाहरण
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
ब्लॉक स्तर के बटन
एक ब्लॉक स्तर बटन बनाने के लिए वर्ग जोड़ें .btn-blockजो मूल तत्व की पूरी चौड़ाई तक फैला हो।
उदाहरण
<button type="button" class="btn btn-primary btn-block">Full-Width
Button</button>
सक्रिय/अक्षम बटन
एक बटन को एक सक्रिय (दबाए गए प्रकट) या एक अक्षम (अनक्लिक करने योग्य) स्थिति में सेट किया जा सकता है:
वर्ग .activeएक बटन दबाए हुए दिखाई देता है, और disabledविशेषता बटन को क्लिक करने योग्य नहीं बनाती है। ध्यान दें कि <a> तत्व अक्षम विशेषता का समर्थन नहीं करते हैं और इसलिए .disabledइसे नेत्रहीन रूप से अक्षम दिखाने के लिए वर्ग का उपयोग करना चाहिए।
उदाहरण
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary
disabled">Disabled Link</a>
स्पिनर बटन
आप एक बटन में "स्पिनर" भी जोड़ सकते हैं, जिसके बारे में आप हमारे BS4 स्पिनर ट्यूटोरियल में और जानेंगे :
उदाहरण
<button class="btn btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
</button>
<button class="btn
btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button
class="btn btn-primary" disabled>
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span
class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>