बूटस्ट्रैप बटन समूह
बटन समूह
बूटस्ट्रैप आपको एक बटन समूह में बटनों की एक श्रृंखला को एक साथ (एक पंक्ति पर) समूहित करने की अनुमति देता है:
बटन समूह बनाने के लिए <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|sm|xsसभी बटनों को आकार देने के लिए कक्षा का उपयोग करें:
उदाहरण
<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>
लंबवत बटन समूह
बूटस्ट्रैप लंबवत बटन समूहों का भी समर्थन करता है:
.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>
न्यायोचित बटन समूह
स्क्रीन की पूरी चौड़ाई का विस्तार करने के लिए, .btn-group-justified
कक्षा का उपयोग करें:
<a>तत्वों के साथ उदाहरण :
उदाहरण
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<a href="#" class="btn btn-primary">Sony</a>
</div>
नोट:<button> तत्वों के लिए , आपको प्रत्येक बटन को .btn-groupकक्षा में लपेटना होगा:
उदाहरण
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Samsung</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
</div>
</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 <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
</div>
स्प्लिट बटन ड्रॉपडाउन
उदाहरण
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>