बूस्ट्रैप 5 बटन

बटन शैली

Bootstrap 5 विभिन्न शैली के बटन प्रदान करता हैः

उदाहरण

<button type="button" class="btn">बेसिक</button>
<button type="button" class="btn btn-primary">प्रमुख</button>
<button type="button" class="btn btn-secondary">द्वितीयक</button>
<button type="button" class="btn btn-success">सफल</button>
<button type="button" class="btn btn-info">सूचना</button>
<button type="button" class="btn btn-warning">चेतावनी</button>
<button type="button" class="btn btn-danger">खतरा</button>
<button type="button" class="btn btn-dark">गहरा</button>
<button type="button" class="btn btn-light">हल्का</button>
<button type="button" class="btn btn-link">लिंक</button>

अपने आप प्रयास करें

बटन क्लास का उपयोग किया जा सकता है <a>、<button> या <input> एलीमेंटः

उदाहरण

<a href="#" class="btn btn-success">लिंक बटन</a>
<button type="button" class="btn btn-success">बटन</button>
<input type="button" class="btn btn-success" value="इनपुट बटन">
<input type="submit" class="btn btn-success" value="सबमिट बटन">
<input type="reset" class="btn btn-success" value="पुनर्सेट बटन">

अपने आप प्रयास करें

इसलिए हम लिंक के href अटिला में # क्यों लिखते हैं?}

चूंकि हम किसी जोड़ने वाले पृष्ठ कोई नहीं हैं और हम "404" संदेश नहीं प्राप्त करना चाहते हैं, इसलिए हम # को लिंक के रूप में लिखते हैं। वास्तविक जीवन में, यह "सर्च" पृष्ठ की वास्तविक URL होनी चाहिए。

बटन रूपांकन

Bootstrap 5 आठ रूपांकन/किनारा बटन भी प्रदान करता है。

उनके ऊपर माउस ले जाकर, अतिरिक्त "हॉवर" प्रभाव देखा जा सकता है:

उदाहरण

<button type="button" class="btn btn-outline-primary">मुख्य</button>
<button type="button" class="btn btn-outline-secondary">द्वितीयक</button>
<button type="button" class="btn btn-outline-success">सफल</button>
<button type="button" class="btn btn-outline-info">सूचना</button>
<button type="button" class="btn btn-outline-warning">चेतावनी</button>
<button type="button" class="btn btn-outline-danger">खतरा</button>
<button type="button" class="btn btn-outline-dark">गहरा</button>
<button type="button" class="btn btn-outline-light text-dark">हल्का</button>

अपने आप प्रयास करें

बटन आकार

बड़े बटन के लिए उपयोग करें .btn-lg श्रेणी, छोटे बटन के लिए उपयोग करें .btn-sm श्रेणी:

उदाहरण

<button type="button" class="btn btn-primary btn-lg">बड़ा</button>
<button type="button" class="btn btn-primary">मूलभूत</button>
<button type="button" class="btn btn-primary btn-sm">सूक्ष्म</button>

अपने आप प्रयास करें

ब्लॉक बटन

अगर आप पैर तत्व पूरे चौड़ाई में भागते बटन बनाना चाहते हैं, तो कृपया पैर तत्व पर .d-grid का उपयोग करें .d-grid श्रेणी "helper":

उदाहरण

<div class="d-grid">
  <button type="button" class="btn btn-primary btn-block">पूर्ण चौड़ाई बटन</button>
</div>

अपने आप प्रयास करें

अगर आपके पास कई ब्लॉक बटन हैं, तो आप .gap-* क्लास उनके बीच की दूरी को नियंत्रित करती है:

उदाहरण

<div class="d-grid gap-3">
  <button type="button" class="btn btn-primary btn-block">पूर्ण चौड़ाई बटन</button>
  <button type="button" class="btn btn-primary btn-block">पूर्ण चौड़ाई बटन</button>
  <button type="button" class="btn btn-primary btn-block">पूर्ण चौड़ाई बटन</button>
</div>

अपने आप प्रयास करें

सक्रिय/डिसेबल बटन

बटन को सक्रिय (दबाए हुए दिखाने) या डिसेबल (अक्षम) स्थिति में सेट किया जा सकता है:

क्लास .active बटन को दबाए हुए दिखाने के लिए डिसेबल प्रतियोगिता बटन को अक्षम करती है।ध्यान दें कि <a> एलीमेंट डिसेबल प्रतियोगिता नहीं समर्थित करता, इसलिए .disabled क्लास इसे दृश्यमान रूप से डिसेबल करती है。

उदाहरण

<button type="button" class="btn btn-primary active">एक्टिव प्राइमरी</button>
<button type="button" class="btn btn-primary" disabled>डिसेबल प्राइमरी</button>
<a href="#" class="btn btn-primary disabled">डिसेबल लिंक</a>

अपने आप प्रयास करें

लोडर बटन

आप बटन में "स्पिनर" भी जोड़ सकते हैं, आपको हमारे BS5 स्पिनर शिक्षण में अधिक जानकारी मिलेगी:

उदाहरण

<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>
  लोडिंग..
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  लोडिंग..
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
  लोडिंग..
</button>

अपने आप प्रयास करें