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

कोर्स सिफारिश:

बटन समूह

बिस्ट्राप 5 आपको बटन समूह में एक श्रृंखला बटनों को एकत्रित करने की अनुमति देता है (एक पंक्ति में): .btn-group क्लास <div> एलीमेंट को बटन समूह बनाने के लिए उपयोग करें:

उदाहरण

<div class="btn-group">
  <button type="button" class="btn btn-primary">हाओवेई</button>
  <button type="button" class="btn btn-primary">डज़ीयू</button>
  <button type="button" class="btn btn-primary">सिलिकॉन</button>
</div>

खुद से प्रयास करें

सूचना:कृपया बटन का आकार समूह के हर बटन पर लागू न करें, बजाय वहां एक वर्ग का .btn-group-lg बड़े बटन समूह को या .btn-group-sm छोटे बटन समूह के लिए:

उदाहरण

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">हाओवेई</button>
  <button type="button" class="btn btn-primary">डज़ीयू</button>
  <button type="button" class="btn btn-primary">सिलिकॉन</button>
</div>

खुद से प्रयास करें

अड़ेसे बटन समूह

बूटस्ट्रैप 5 अड़ेसे बटन समूह का समर्थन भी करता है:

क्लास का उपयोग करें .btn-group-vertical अड़ेसे बटन समूह बनाएं:

उदाहरण

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">हाओवेई</button>
  <button type="button" class="btn btn-primary">डज़ीयू</button>
  <button type="button" class="btn btn-primary">सिलिकॉन</button>
</div>

खुद से प्रयास करें

साथ-साथ बटन समूह

डिफ़ॉल्ट में, बटन समूह "inline" है, कई बटन समूह होने पर उन्हें साथ-साथ दिखाया जाता है:

उदाहरण

<div class="btn-group">
  <button type="button" class="btn btn-primary">हाओवेई</button>
  <button type="button" class="btn btn-primary">डज़ीयू</button>
  <button type="button" class="btn btn-primary">सिलिकॉन</button>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-primary">जीली</button>
  <button type="button" class="btn btn-primary">चेंगशी</button>
  <button type="button" class="btn btn-primary">हांग्कीआई</button>
</div>

खुद से प्रयास करें

गहरी बटन समूह और ड्रॉपडाउन मेन्यू

गहरी बटन समूह, ड्रॉपडाउन मेन्यू बनाने के लिए है (आप बाद में ड्रॉपडाउन मेन्यू के बारे में अधिक जानेंगे):

उदाहरण

<div class="btn-group">
  <button type="button" class="btn btn-primary">हाओवेई</button>
  <button type="button" class="btn btn-primary">डज़ीयू</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">सिलिकॉन</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">मोबाइल</a>
      <a class="dropdown-item" href="#">टैबलेट</a>
    </div>
  </div>
</div>

खुद से प्रयास करें