बूटस्ट्रैप 4 बटन समूह
बटन समूह
बूटस्ट्रैप 4 आपको एक बटन समूह में बटनों की एक श्रृंखला को एक साथ (एक पंक्ति पर) समूहित करने की अनुमति देता है:
बटन समूह बनाने के लिए <div>कक्षा के साथ एक तत्व का प्रयोग करें :.btn-group
उदाहरण
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
युक्ति: समूह में प्रत्येक बटन पर बटन आकार लागू करने के बजाय, .btn-group-lgबड़े बटन समूह के .btn-group-smलिए वर्ग या छोटे बटन समूह के लिए उपयोग करें:
बड़े बटन:
डिफ़ॉल्ट बटन:
छोटे बटन:
उदाहरण
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
लंबवत बटन समूह
बूटस्ट्रैप 4 लंबवत बटन समूहों का भी समर्थन करता है:
.btn-group-verticalलंबवत बटन समूह बनाने के लिए कक्षा का प्रयोग करें :
उदाहरण
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
नेस्टिंग बटन समूह और ड्रॉपडाउन मेनू
ड्रॉपडाउन मेनू बनाने के लिए नेस्ट बटन समूह (आप बाद के अध्याय में ड्रॉपडाउन के बारे में अधिक जानेंगे):
उदाहरण
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
स्प्लिट बटन ड्रॉपडाउन
उदाहरण
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle
dropdown-toggle-split"
data-toggle="dropdown">
<span class="caret"></span>
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
लंबवत बटन समूह डब्ल्यू / ड्रॉपडाउन
उदाहरण
<div class="btn-group-vertical">
<button type="button" class="btn
btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
बटन समूह कंधे से कंधा मिलाकर
बटन समूह डिफ़ॉल्ट रूप से "इनलाइन" होते हैं, जो आपके एकाधिक समूह होने पर उन्हें साथ-साथ प्रदर्शित करता है:
उदाहरण
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">BMW</button>
<button type="button" class="btn btn-primary">Mercedes</button>
<button type="button" class="btn btn-primary">Volvo</button>
</div>