बूटस्ट्रैप जे एस बटन
जे एस बटन (बटन.जेएस)
यदि आप अपने बटनों पर अधिक नियंत्रण रखना चाहते हैं तो इस प्लगइन का उपयोग करें।
बटन के बारे में एक ट्यूटोरियल के लिए, हमारा बूटस्ट्रैप बटन ट्यूटोरियल पढ़ें ।
बटन प्लगइन क्लासेस
नीचे दी गई कक्षाओं का उपयोग किसी भी <a>, <button>, या <input> तत्व को स्टाइल करने के लिए किया जा सकता है:
| Class | Description | Example |
|---|---|---|
| .btn | Adds basic styling to any button | |
| .btn-default | Indicates a default/standard button | |
| .btn-primary | Provides extra visual weight and identifies the primary action in a set of buttons | |
| .btn-success | Indicates a successful or positive action | |
| .btn-info | Contextual button for informational alert messages | |
| .btn-warning | Indicates caution should be taken with this action | |
| .btn-danger | Indicates a dangerous or potentially negative action | |
| .btn-link | Makes a button look like a link (will still have button behavior) | |
| .btn-lg | Makes a large button | |
| .btn-sm | Makes a small button | |
| .btn-xs | Makes an extra small button | |
| .btn-block | Makes a block-level button (spans the full width of the parent element) | |
| .active | Makes the button appear pressed | |
| .disabled | Makes the button disabled |
जावास्क्रिप्ट के माध्यम से
इसके साथ मैन्युअल रूप से सक्षम करें:
$('.btn').button();
बटन विकल्प
| None |
बटन के तरीके
निम्न तालिका सभी उपलब्ध बटन विधियों को सूचीबद्ध करती है।
नोट: इस प्लगइन के लिए, डेटा विशेषताओं के माध्यम से विधियों को भी पारित किया जा सकता है; डेटा-टॉगल या डेटा-लोडिंग के रूप में विधि नाम को डेटा में जोड़ें।
| Method | Description | Try it |
|---|---|---|
| .button("toggle") | Makes the button look pressed | |
| .button("loading") | Disables the button and changes the button text to "loading..." | |
| .button("reset") | Changes the button text to original text (if changed) | |
| .button("string") | Specifies a new button text |
और ज्यादा उदाहरण
बटन को अनुकूलित करने के लिए CSS का उपयोग करना
गोलाकार सीमाओं को कैसे हटाएं:
उदाहरण
.btn-default {
border-radius: 0;
}
एक विशिष्ट रंग कैसे जोड़ें:
उदाहरण
.btn-default {
background: #000;
color: #fff;
}
.btn-default:hover {
background: #fff;
color: #000;
}
छाया कैसे जोड़ें:
उदाहरण
.btn-default {
box-shadow: 1px 2px 5px #000000;
}