बूटस्ट्रैप बटन
बटन शैलियाँ
बूटस्ट्रैप विभिन्न प्रकार के बटन प्रदान करता है:
उपरोक्त बटन शैलियों को प्राप्त करने के लिए, बूटस्ट्रैप में निम्नलिखित वर्ग हैं:
.btn.btn-default.btn-primary.btn-success.btn-info.btn-warning.btn-danger.btn-link
निम्न उदाहरण विभिन्न बटन शैलियों के लिए कोड दिखाता है:
उदाहरण
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
बटन वर्गों का उपयोग <a>, <button>, या
<input>तत्व पर किया जा सकता है:
उदाहरण
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
हम लिंक की href विशेषता में # क्यों डालते हैं?
चूंकि हमारे पास इसे लिंक करने के लिए कोई पेज नहीं है, और हम "404" संदेश प्राप्त नहीं करना चाहते हैं, हम अपने उदाहरणों में # को लिंक के रूप में रखते हैं। यह किसी विशिष्ट पृष्ठ का वास्तविक URL होना चाहिए।
बटन आकार
बूटस्ट्रैप चार बटन आकार प्रदान करता है:
विभिन्न आकारों को परिभाषित करने वाले वर्ग हैं:
.btn-lg.btn-sm.btn-xs
निम्न उदाहरण विभिन्न बटन आकारों के लिए कोड दिखाता है:
उदाहरण
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
ब्लॉक स्तर के बटन
एक ब्लॉक स्तर बटन मूल तत्व की पूरी चौड़ाई को फैलाता है।
.btn-blockब्लॉक स्तर बटन बनाने के लिए कक्षा जोड़ें :
उदाहरण
<button type="button" class="btn btn-primary btn-block">Button 1</button>
सक्रिय/अक्षम बटन
एक बटन को एक सक्रिय (दबाए गए प्रकट) या एक अक्षम (अनक्लिक करने योग्य) स्थिति में सेट किया जा सकता है:
वर्ग .activeएक बटन दबाए हुए दिखाई देता है, और वर्ग
एक बटन को क्लिक करने .disabled
योग्य नहीं बनाता है:
उदाहरण
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
पूरा बूटस्ट्रैप बटन संदर्भ
सभी बटन वर्गों के संपूर्ण संदर्भ के लिए, हमारे संपूर्ण बूटस्ट्रैप बटन संदर्भ पर जाएं ।