twitter-bootstrap
बटन
खोज…
वाक्य - विन्यास
- वर्ग: .btn-default | .btn- प्राथमिक | .btn- सफलता | .btn- जानकारी | .btn- चेतावनी | .btn-danger .btn- लिंक;
- आकार: .btn-lg | .btn-md | .btn-sm | .btn-XS;
- राज्य: सक्रिय | dissabled।
बटन कक्षाएं
बूटस्ट्रैप स्टाइलिंग बटन के लिए कई कक्षाएं प्रदान करता है और उन्हें बाहर खड़ा करता है।
बूटस्ट्रैप बटन को एक तत्व में .btn वर्ग जोड़कर बनाया जा सकता है।
| बूटस्ट्रैप क्लास | भूमिका (रंग) |
|---|---|
.btn-default | मानक बटन (सफेद) |
.btn-primary | अतिरिक्त दृश्य भार प्रदान करता है और प्राथमिक क्रिया (नीला) की पहचान करता है |
.btn-success | एक सफल कार्रवाई (हरा) इंगित करने के लिए उपयोग किया जाता है |
.btn-info | जानकारी प्रदान करने के लिए प्रासंगिक बटन (हल्का नीला) |
.btn-warning | इंगित करता है कि उपयोगकर्ता द्वारा सावधानी बरती जानी चाहिए (पीला) |
.btn-danger | एक खतरनाक या नकारात्मक कार्रवाई (लाल) इंगित करता है |
.btn-link | आप बटन को एक एंकर टैग की तरह बनाएं। |
बटन आकार
आप .btn-size वर्गों के साथ विभिन्न आकारों के बटन भी बना सकते हैं
| बूटस्ट्रैप क्लास | परिणाम |
|---|---|
.btn-lg | एक बड़े आकार का बटन बनाता है |
.btn-sm | एक छोटे आकार का बटन बनाता है |
.btn-xs | एक अतिरिक्त-छोटा बटन बनाता है |
.btn-block | बटन ब्लॉक-स्तरीय तत्व बन जाते हैं और अपने माता-पिता की पूरी चौड़ाई का विस्तार करते हैं |
बटन सक्रिय करें
active वर्ग एक बटन दबाया हुआ दिखाई देगा।
<button type="button" class="btn btn-primary active">Active Primary</button>
एक बटन अक्षम करें
एक बटन में disabled वर्ग को जोड़ने से बटन अन-क्लिक करने योग्य होगा और इसके ऊपर मँडराते समय निषिद्ध कर्सर दिखाएगा।
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
क्षैतिज रूप से एक साथ रेंडर बटन
कई बटन को .btn-group वर्ग के साथ क्षैतिज रूप से प्रस्तुत किया जा सकता है। बस एक कंटेनर तत्व के अंदर अपने बटन लपेटें और उस तत्व को btn-group क्लास दें।
<div class="btn-group">
<button type="button" class="btn btn-primary">Apples</button>
<button type="button" class="btn btn-primary">Oranges</button>
<button type="button" class="btn btn-primary">Pineapples</button>
</div>
लंबवत बटन रेंडर करें
कंटेनर तत्व में .btn-group-vertical वर्ग लागू करें
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apples</button>
<button type="button" class="btn btn-primary">Oranges</button>
<button type="button" class="btn btn-primary">Pineapples</button>
</div>
बटन समूह बनाओ पूरी चौड़ाई ले लो
एक .btn-group एलिमेंट के अंदर लिपटे बटन केवल उतनी ही चौड़ाई लेते हैं जितनी जरूरत होती है। समूह को स्क्रीन की पूरी चौड़ाई में .btn-group-justified इसके बजाय .btn-group-justified उपयोग करें।
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apples</a>
<a href="#" class="btn btn-primary">Oranges</a>
<a href="#" class="btn btn-primary">Pineapples</a>
</div>