बटन के
फॉर्म, संवाद, आओर बेसी मे क्रिया क लेल बूटस्ट्रैप क कस्टम बटन शैली क उपयोग कई आकार, राज्य आओर बेसी क समर्थन क संग करू.
उदाहरण के लिये
बूटस्ट्रैप म॑ कई पूर्व परिभाषित बटन शैली शामिल छै, जेकरा म॑ हर एक अपनऽ शब्दार्थ उद्देश्य क॑ पूरा करै छै, जेकरा म॑ कुछ अतिरिक्त क॑ अधिक नियंत्रण लेली फेंकलऽ जाय छै ।
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
सहायक प्रौद्योगिकी के अर्थ संप्रेषित करब
अर्थ जोड़य कें लेल रंग कें उपयोग करनाय केवल एकटा दृश्य संकेत प्रदान करय छै, जे सहायक प्रौद्योगिकी कें उपयोगकर्ताक कें – जेना स्क्रीन रीडर – कें संप्रेषित नहि कैल जेतय. सुनिश्चित करूं कि रंग सं संकेत कैल गेल जानकारी या त सामग्री सं ही स्पष्ट छै (जैना दृश्यमान पाठ), या वैकल्पिक साधन कें माध्यम सं शामिल कैल गेल छै, जेना कि .visually-hidden
वर्ग कें साथ छिपल अतिरिक्त पाठ.
पाठ लपेटब अक���षम करू
यदि अहां बटन टेक्स्ट लपेटय नहि चाहय छी त अहां बटन मे .text-nowrap
क्लास जोड़ सकय छी. Sass मे, अहां $btn-white-space: nowrap
प्रत्येक बटन कें लेल टेक्स्ट रैपिंग कें अक्षम करय कें लेल सेट कयर सकय छी.
बटन टैग
कक्षाक कें .btn
डिजाइन <button>
तत्व कें साथ उपयोग करय कें लेल कैल गेल छै. लेकिन, आप ई वर्गऽ के उपयोग <a>
या <input>
तत्वऽ प॑ भी करी सकै छियै (हालांकि कुछ ब्राउज़र कनी अलग रेंडरिंग लागू करी सकै छै) ।
जखन तत्वक पर बटन वर्गक <a>
कें उपयोग करय छै जे पृष्ठ मे कार्यक्षमता कें ट्रिगर करय कें लेल उपयोग कैल जायत छै (जैना संकुचित सामग्री), वर्तमान पृष्ठ कें भीतर नय पन्नाक या खंडक सं लिंक करय कें बजाय, इ लिंकक कें एकटा देल जैबाक चाहि role="button"
जे सहायक प्रौद्योगिकी जैना की अपन उद्देश्य कें उचित रूप सं संप्रेषित करय कें लेल स्क्रीन रीडर।
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
रूपरेखा बटन
बटन के जरूरत अछि, मुदा ओ सब जे भारी बैकग्राउंड रंग लाबैत छथि से नहि? .btn-outline-*
कोनो बटन पर सभ पृष्ठभूमि छवि आओर रंग हटाबय लेल डिफ़ॉल्ट संशोधक वर्ग कए बदलू .
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
आकार के
फैंसी पैघ या छोट बटन? अतिरिक्त आकारक लेल .btn-lg
वा जोड़ू ।.btn-sm
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
अक्षम अवस्था
disabled
कोनो <button>
तत्व मे बूलियन विशेषता जोड़ि कए बटन कए निष्क्रिय देखाउ । अक्षम बटन पर pointer-events: none
लागू करलऽ गेलऽ छै, जेकरा स॑ होवर आरू सक्रिय अवस्था क॑ ट्रिगर होय स॑ रोकलऽ गेलऽ छै ।
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
तत्व क उपयोग करय वाला अक्षम बटन <a>
कनि अलग व्यवहार करैत अछि:
<a>
sdisabled
विशेषता क' समर्थन नहि करैत अछि, तेँ अहाँकेँ.disabled
वर्गकेँ जोड़बाक चाही जाहिसँ ओ दृश्य रूपसँ अक्षम प्रतीत हो.pointer-events
एंकर बटन पर सब कें अक्षम करय कें लेल किछ भविष्य कें अनुकूल शैली शामिल छै .- अक्षम बटन मे
aria-disabled="true"
सहायक प्रौद्योगिकी कें तत्व कें स्थिति कें संकेत करय कें लेल विशेषता शामिल होबाक चाही.
<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
लिंक कार्यक्षमता चेतावनी
.disabled
वर्ग s क' लिंक कार्यक्षमता क' अक्षम करबाक प्रयास करबाक लेल उपयोग करैत अछि pointer-events: none
, <a>
मुदा ओ CSS गुण एखन धरि मानकीकृत नहि अछि. एकरऽ अलावा, ब्राउज़र म॑ भी जे समर्थन करै छै pointer-events: none
, कीबोर्ड नेविगेशन अप्रभावित रहै छै, मतलब कि दृष्टिवान कीबोर्ड उपयोगकर्ता आरू सहायक तकनीक के उपयोगकर्ता अखनी भी ई लिंक क॑ सक्रिय करै म॑ सक्षम होतै । त सुरक्षित रहय लेल, के अलावा aria-disabled="true"
, एहि लिंक पर एकटा विशेषता सेहो शामिल tabindex="-1"
करू जे ओकरा कीबोर्ड फोकस प्राप्त करय सं रोकय, आ कस्टम जावास्क्रिप्ट के उपयोग क ओकर कार्यक्षमता के पूर्ण रूप सं अक्षम करू.
ब्लॉक बटन
हमरऽ डिस्प्ले आरू गैप उपयोगिता केरऽ मिश्रण के साथ बूटस्ट्रैप 4 म॑ जैसनऽ पूर्ण-चौड़ाई, “ब्लॉक बटन” केरऽ रिस्पांसिव स्टैक बनाबै छै । बटन विशिष्ट वर्गक कें बजाय उपयोगिताअक कें उपयोग करयत, हमरा पास स्पेसिंग, संरेखण, आ प्रतिक्रियाशील व्यवहारक पर बहुत अधिक नियंत्रण छै.
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
md
यहाँ हम एक प्रतिक्रियाशील भिन्नता बनाते हैं , ब्रेकपॉइंट तक लंबवत ढेर बटनों स॑ शुरू करी क॑ .d-md-block
, जहाँ .d-grid
क्लास क॑ बदलै छै, जेकरा स॑ gap-2
उपयोगिता क॑ शून्य करी देलऽ जाय छै । हुनका बदलैत देखबाक लेल अपन ब्राउजरक आकार बदलू.
<div class="d-grid gap-2 d-md-block">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
अहां ग्रिड कॉलम चौड़ाई वर्गक कें साथ अपन ब्लॉक बटन कें चौड़ाई कें समायोजित कयर सकय छी. जेना, आधा चौड़ाई वाला “ब्लॉक बटन” के लेल, प्रयोग करू .col-6
. एकरा क्षैतिज रूपसँ केन्द्रित करू .mx-auto
, सेहो।
<div class="d-grid gap-2 col-6 mx-auto">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
अतिरिक्त उपयोगिताक कें उपयोग क्षैतिज रहला पर बटन कें संरेखण कें समायोजित करय कें लेल कैल जा सकय छै. यहाँ हम अपनऽ पिछला रिस्पांसिव उदाहरण लेली आरू बटन प॑ कुछ फ्लेक्स यूटिलिटीज आरू एक मार्जिन यूटिलिटी जोड़ल॑ छै जेकरा स॑ बटन क॑ दाहिना तरफ संरेखित करलऽ जाय छै जब॑ वू अब॑ ढेर नै होय छै ।
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button class="btn btn-primary me-md-2" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
बटन प्लगइन
बटन प्लगइन अहां कें सरल चालू/बंद टॉगल बटन बनावा कें अनुमति देयत छै.
टॉगल राज्य
data-bs-toggle="button"
कोनो बटनक स्थिति टॉगल करबाक लेल जोड़ू active
. यदि अहां कोनों बटन कें प्री-टॉगल करय रहल छी, त अहां कें मैन्युअल रूप सं .active
क्लास जोड़नाय होयत आ aria-pressed="true"
इ सुनिश्चित करनाय होयत छै की ओकरा सहायक प्रौद्योगिकी कें लेल उचित रूप सं संप्रेषित कैल गेल छै.
<button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">Disabled toggle button</button>
<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
विधियाँ
अहां बटन कंस्ट्रक्टर कें साथ बटन इंस्टेंस बना सकय छी, उदाहरण कें लेल:
var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
तरीका | वर्णन |
---|---|
toggle |
पुश स्टेट टॉगल करैत अछि। बटन कें ओय रूप दयत छै की इ सक्रिय भ गेल छै. |
dispose |
कोनो तत्वक बटनकेँ नष्ट करैत अछि। (DOM तत्व पर संग्रहीत डेटा हटाबैत अछि) |
getInstance |
स्थिर विधि जे अहां कें कोनों DOM तत्व सं जुड़ल बटन इंस्टेंस प्राप्त करय कें अनुमति देयत छै, अहां एकर उपयोग अइ तरह कयर सकय छी:bootstrap.Button.getInstance(element) |
getOrCreateInstance |
स्थिर विधि जे कोनों DOM तत्व सं जुड़ल बटन इंस्टेंस वापस करयत छै या एकटा नव बनायत छै अगर इ आरंभ नहि कैल गेलय छल. एकर उपयोग अहां एहि तरहे क सकय छी:bootstrap.Button.getOrCreateInstance(element) |
जेना, सभ बटन टॉगल करबाक लेल
var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
var button = new bootstrap.Button(button)
button.toggle()
})
सस्स
चर
$btn-padding-y: $input-btn-padding-y;
$btn-padding-x: $input-btn-padding-x;
$btn-font-family: $input-btn-font-family;
$btn-font-size: $input-btn-font-size;
$btn-line-height: $input-btn-line-height;
$btn-white-space: null; // Set to `nowrap` to prevent text wrapping
$btn-padding-y-sm: $input-btn-padding-y-sm;
$btn-padding-x-sm: $input-btn-padding-x-sm;
$btn-font-size-sm: $input-btn-font-size-sm;
$btn-padding-y-lg: $input-btn-padding-y-lg;
$btn-padding-x-lg: $input-btn-padding-x-lg;
$btn-font-size-lg: $input-btn-font-size-lg;
$btn-border-width: $input-btn-border-width;
$btn-font-weight: $font-weight-normal;
$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
$btn-focus-width: $input-btn-focus-width;
$btn-focus-box-shadow: $input-btn-focus-box-shadow;
$btn-disabled-opacity: .65;
$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125);
$btn-link-color: $link-color;
$btn-link-hover-color: $link-hover-color;
$btn-link-disabled-color: $gray-600;
// Allows for customizing button radius independently from global border radius
$btn-border-radius: $border-radius;
$btn-border-radius-sm: $border-radius-sm;
$btn-border-radius-lg: $border-radius-lg;
$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
$btn-hover-bg-shade-amount: 15%;
$btn-hover-bg-tint-amount: 15%;
$btn-hover-border-shade-amount: 20%;
$btn-hover-border-tint-amount: 10%;
$btn-active-bg-shade-amount: 20%;
$btn-active-bg-tint-amount: 20%;
$btn-active-border-shade-amount: 25%;
$btn-active-border-tint-amount: 10%;
मिक्सिन
बटन के लेल तीन मिक्सिन छै: बटन आरू बटन रूपरेखा वेरिएंट मिक्सिन (दुनू पर आधारित छै $theme-colors
), प्लस एक बटन आकार मिक्सिन.
@mixin button-variant(
$background,
$border,
$color: color-contrast($background),
$hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
$hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
$hover-color: color-contrast($hover-background),
$active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
$active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
$active-color: color-contrast($active-background),
$disabled-background: $background,
$disabled-border: $border,
$disabled-color: color-contrast($disabled-background)
) {
color: $color;
@include gradient-bg($background);
border-color: $border;
@include box-shadow($btn-box-shadow);
&:hover {
color: $hover-color;
@include gradient-bg($hover-background);
border-color: $hover-border;
}
.btn-check:focus + &,
&:focus {
color: $hover-color;
@include gradient-bg($hover-background);
border-color: $hover-border;
@if $enable-shadows {
@include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
}
}
.btn-check:checked + &,
.btn-check:active + &,
&:active,
&.active,
.show > &.dropdown-toggle {
color: $active-color;
background-color: $active-background;
// Remove CSS gradients if they're enabled
background-image: if($enable-gradients, none, null);
border-color: $active-border;
&:focus {
@if $enable-shadows {
@include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
}
}
}
&:disabled,
&.disabled {
color: $disabled-color;
background-color: $disabled-background;
// Remove CSS gradients if they're enabled
background-image: if($enable-gradients, none, null);
border-color: $disabled-border;
}
}
@mixin button-outline-variant(
$color,
$color-hover: color-contrast($color),
$active-background: $color,
$active-border: $color,
$active-color: color-contrast($active-background)
) {
color: $color;
border-color: $color;
&:hover {
color: $color-hover;
background-color: $active-background;
border-color: $active-border;
}
.btn-check:focus + &,
&:focus {
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
}
.btn-check:checked + &,
.btn-check:active + &,
&:active,
&.active,
&.dropdown-toggle.show {
color: $active-color;
background-color: $active-background;
border-color: $active-border;
&:focus {
@if $enable-shadows {
@include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
}
}
}
&:disabled,
&.disabled {
color: $color;
background-color: transparent;
}
}
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
padding: $padding-y $padding-x;
@include font-size($font-size);
// Manually declare to provide an override to the browser default
@include border-radius($border-radius, 0);
}
लूप
$theme-colors
बटन वेरिएंट (नियमित आरू रूपरेखा बटन के लेलऽ) म॑ संशोधक वर्ग उत्पन्न करै लेली हमरऽ नक्शा के साथ अपनऽ संबंधित मिक्सिन के उपयोग करै छै scss/_buttons.scss
।
@each $color, $value in $theme-colors {
.btn-#{$color} {
@include button-variant($value, $value);
}
}
@each $color, $value in $theme-colors {
.btn-outline-#{$color} {
@include button-outline-variant($value);
}
}