मुख्य सामग्री पर जाईं डॉक्स नेविगेशन पर जाईं
in English

बटन के बा

कई गो आकार, राज्य आ अउरी बहुत कुछ के समर्थन के साथ फॉर्म, डायलॉग, आ अउरी बहुत कुछ में क्रिया सभ खातिर बूटस्ट्रैप के कस्टम बटन शैली सभ के इस्तेमाल करीं।

उदाहरण खातिर दिहल गइल बा

बूटस्ट्रैप में कई गो पहिले से परिभाषित बटन शैली सभ के सामिल कइल गइल बा, हर एक आपन सिमेंटिक उद्देश्य के पूरा करे ला, कुछ एक्स्ट्रा सभ के अउरी नियंत्रण खातिर फेंकल जाला।

<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बटन में क्लास जोड़ सकत बानी। सास में, रउआँ $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>s disabledएट्रिब्यूट के सपोर्ट ना करे ला, एह से रउआँ के क्लास के जोड़ल जरूरी बा जेह .disabledसे कि ई विजुअल रूप से अक्षम लउके।
  • कुछ भविष्य के अनुकूल शैली सभ pointer-eventsके एंकर बटन सभ पर सभ के अक्षम करे खातिर शामिल कइल गइल बा।
  • इस्तेमाल करे वाला अक्षम बटन सभ में सहायक टेक्नोलॉजी सभ के तत्व के स्थिति के बतावे खातिर बिसेसता <a>सामिल होखे के चाहीं ।aria-disabled="true"
  • इस्तेमाल करे वाला अक्षम बटन सभ में बिसेसता के सामिल <a> ना कइल जाय ।href
<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

hrefअइसन मामिला सभ के कवर करे खातिर जहाँ रउआँ के बिसेसता के अक्षम लिंक पर रखे के पड़े ला, .disabledक्लास s pointer-events: noneके लिंक कामकाज के अक्षम करे के कोसिस करे खातिर इस्तेमाल करे ला <a>। ध्यान दीं कि ई CSS गुण अभी HTML खातिर मानकीकृत नइखे भइल, बाकी सभ आधुनिक ब्राउजर एकरा के सपोर्ट करे लें। एकरे अलावा, ब्राउजर सभ में भी जे सपोर्ट करे लें pointer-events: none, कीबोर्ड नेविगेशन अप्रभावित रहे ला, मने कि दृष्टिवान कीबोर्ड यूजर आ सहायक टेक्नोलॉजी सभ के यूजर अबहियों एह लिंक सभ के सक्रिय क सके लें। त सुरक्षित होखे खातिर, के अलावा , एह लिंक सभ पर aria-disabled="true"एगो एट्रिब्यूट भी शामिल करीं जेह से कि इनहन के कीबोर्ड फोकस ना मिले, आ इनहन के कामकाज के पूरा तरीका से अक्षम करे खातिर कस्टम जावास्क्रिप्ट के इस्तेमाल करीं।tabindex="-1"

<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>

बटन के ब्लॉक करीं

हमनी के डिस्प्ले आ गैप उपयोगिता के मिश्रण के साथ बूटस्ट्रैप 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-gridgap-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 class="btn btn-primary disabled" 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);
  }
}