बूटस्ट्रैप - बटन समूह
बटन समूह एक ही पंक्ति में एक साथ कई बटनों को ढेर करने की अनुमति देते हैं। यह तब उपयोगी है जब आप संरेखण बटन जैसी वस्तुओं को एक साथ रखना चाहते हैं। आप बूटस्ट्रैप बटन प्लगइन के साथ वैकल्पिक जावास्क्रिप्ट रेडियो और चेकबॉक्स शैली के व्यवहार को जोड़ सकते हैं ।
निम्न तालिका महत्वपूर्ण वर्गों को सारांशित करती है बूटस्ट्रैप बटन समूहों का उपयोग करने के लिए प्रदान करता है -
कक्षा | विवरण | कोड नमूना |
---|---|---|
.btn-समूह | इस वर्ग का उपयोग एक मूल बटन समूह के लिए किया जाता है। वर्ग के साथ बटन की एक श्रृंखला लपेटें.btn में .btn-group। | |
.btn-उपकरण पट्टी | यह अधिक जटिल घटकों के लिए <div class = "btn-group"> के सेट को <div class = "btn-toolbar"> में संयोजित करने में मदद करता है। | |
.btn-group-lg, .btn-group-sm, .btn-group-xs | इन कक्षाओं को प्रत्येक बटन के आकार के बजाय बटन समूह पर लागू किया जा सकता है। | |
.btn-समूह खड़ी | यह कक्षा क्षैतिज रूप से खड़ी होने के बजाय बटन का एक सेट खड़ी दिखाई देती है। | |
मूल बटन समूह
निम्न उदाहरण वर्ग के उपयोग को प्रदर्शित करता है .btn-group उपरोक्त तालिका में चर्चा की गई -
<div class = "btn-group">
<button type = "button" class = "btn btn-default">Button 1</button>
<button type = "button" class = "btn btn-default">Button 2</button>
<button type = "button" class = "btn btn-default">Button 3</button>
</div>
बटन टूलबार
निम्न उदाहरण वर्ग के उपयोग को प्रदर्शित करता है .btn-toolbar उपरोक्त तालिका में चर्चा की गई -
<div class = "btn-toolbar" role = "toolbar">
<div class = "btn-group">
<button type = "button" class = "btn btn-default">Button 1</button>
<button type = "button" class = "btn btn-default">Button 2</button>
<button type = "button" class = "btn btn-default">Button 3</button>
</div>
<div class = "btn-group">
<button type = "button" class = "btn btn-default">Button 4</button>
<button type = "button" class = "btn btn-default">Button 5</button>
<button type = "button" class = "btn btn-default">Button 6</button>
</div>
<div class = "btn-group">
<button type = "button" class = "btn btn-default">Button 7</button>
<button type = "button" class = "btn btn-default">Button 8</button>
<button type = "button" class = "btn btn-default">Button 9</button>
</div>
</div>
बटन के आकार
निम्न उदाहरण वर्ग के उपयोग को प्रदर्शित करता है .btn-group-* उपरोक्त तालिका में चर्चा की गई -
<div class = "btn-group btn-group-lg">
<button type = "button" class = "btn btn-default">Button 1</button>
<button type = "button" class = "btn btn-default">Button 2</button>
<button type = "button" class = "btn btn-default">Button 3</button>
</div>
<div class = "btn-group btn-group-sm">
<button type = "button" class = "btn btn-default">Button 4</button>
<button type = "button" class = "btn btn-default">Button 5</button>
<button type = "button" class = "btn btn-default">Button 6</button>
</div>
<div class = "btn-group btn-group-xs">
<button type = "button" class = "btn btn-default">Button 7</button>
<button type = "button" class = "btn btn-default">Button 8</button>
<button type = "button" class = "btn btn-default">Button 9</button>
</div>
घोंसला करने की क्रिया
आप बटन बटन समूहों को दूसरे बटन समूह के भीतर घोंसला दे सकते हैं अर्थात, जगह दें .btn-group दूसरे के भीतर .btn-group । यह तब होता है जब आप ड्रॉपडाउन मेनू बटन की एक श्रृंखला के साथ मिश्रित करना चाहते हैं।
<div class = "btn-group">
<button type = "button" class = "btn btn-default">Button 1</button>
<button type = "button" class = "btn btn-default">Button 2</button>
<div class = "btn-group">
<button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
Dropdown
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu">
<li><a href = "#">Dropdown link 1</a></li>
<li><a href = "#">Dropdown link 2</a></li>
</ul>
</div>
</div>
वर्टिकल बटोंगग्रुप
निम्न उदाहरण वर्ग के उपयोग को प्रदर्शित करता है .btn-group-vertical उपरोक्त तालिका में चर्चा की गई -
<div class = "btn-group-vertical">
<button type = "button" class = "btn btn-default">Button 1</button>
<button type = "button" class = "btn btn-default">Button 2</button>
<div class = "btn-group-vertical">
<button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
Dropdown
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu">
<li><a href = "#">Dropdown link 1</a></li>
<li><a href = "#">Dropdown link 2</a></li>
</ul>
</div>
</div>