twitter-bootstrap-3
ट्विटर-बूटस्ट्रैप -3 में बटन

ट्विटर-बूटस्ट्रैप `बीटीएन` क्लास का उपयोग करना

ट्विटर-बूटस्ट्रैप के btn वर्ग का उपयोग निम्नलिखित HTML तत्वों में से किसी के साथ किया जा सकता है।

1. लंगर
2. बटन
3. with both type="button" and type="submit" इनपुट with both type="button" and type="submit"

नीचे btn वर्ग के सभी संभव उपयोग मामलों के उदाहरण दिए गए हैं

<a class="btn" href="#" role="button">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

यद्यपि btn वर्ग उपरोक्त चार तरीकों में से किसी में भी उपयोग किया जा सकता है, लेकिन जब भी संभव हो तो यह <button> तत्व का उपयोग करने की अत्यधिक अनुशंसा करता है

उपरोक्त कोड की छवि नीचे संलग्न है

स्रोत

ट्विटर-बूटस्ट्रैप -3 में बटन के विभिन्न आकार

ट्विटर-बूटस्ट्रैप -3 ने चार अलग-अलग आकार के बटन प्रदान किए हैं

1. बड़ा बटन btn-lg
2. डिफ़ॉल्ट बटन does not require any btn size
3. छोटा बटन btn-sm
4. अतिरिक्त छोटा बटन btn-xs

 <button type="button" class="btn  btn-lg">Large button</button>
 <button type="button" class="btn">Default button</button>
 <button type="button" class="btn  btn-sm">Small button</button>
 <button type="button" class="btn  btn-xs">Extra small button</button>

उपरोक्त कोड की छवि नीचे संलग्न है

स्रोत

बटन पर ग्लिफ़िकॉन जोड़ें

ग्लिफ़िकॉन का उपयोग टेक्स्ट, बटन, टूलबार, नेविगेशन, फ़ॉर्म आदि में किया जा सकता है (स्रोत: W3Schools)। ग्लिफ़िकॉन मूल रूप से आइकन रूप हैं जिनका उपयोग उपरोक्त किसी भी शैली को करने के लिए किया जा सकता है। इन उदाहरणों में दो प्रकार के बटनों के अंदर ग्लिफ़िकॉन के उपयोग को रेखांकित किया गया है, बस बटन के अंदर एक स्पैन का उपयोग करके, जिसमें एक प्रकार का ग्लाइकॉन है:

HTML बटन

<button type="button" class="btn btn-info">
    <span class="glyphicon glyphicon-search"></span> Search
</button>

एएसपी बटन

<asp:LinkButton runat="server" CssClass="btn btn-info" >
    <span class="glyphicon glyphicon-envelope"></span> Email
</asp:LinkButton>