मुख्य सामग्री पर जाओ डॉक्स नेविगेशन पर जाओ
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क्लास जोड़ी सकदे ओ। 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>s विशेषता दा समर्थन नेईं करदे , इसलेई तुसें गी क्लास गी disabledजोड़ना होग तां जे एह् दृष्टिगत रूप कन्नै अक्षम दिक्खेआ जा..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 इक तत्व दा बटन नष्ट करदा ऐ। (डीओएम तत्व पर संग्रहीत डेटा गी हटांदा ऐ)
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);
  }
}