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>

आप सीएसएस चर के साथ अपना खुद का कस्टम आकार भी रोल कर सकते हैं:

एचटीएमएल

<button type="button" class="btn btn-primary"
        style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
  Custom button
</button>

अक्षम अवस्था

किसी भी तत्व में disabledबूलियन विशेषता जोड़कर बटनों को निष्क्रिय बनाएं । <button>अक्षम बटनों ने pointer-events: noneहोवर और सक्रिय अवस्थाओं को ट्रिगर होने से रोकने के लिए लागू किया है।

एचटीएमएल

<button type="button" class="btn btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary" disabled>Button</button>
<button type="button" class="btn btn-outline-primary" disabled>Primary button</button>
<button type="button" class="btn btn-outline-secondary" disabled>Button</button>

तत्व का उपयोग करने वाले अक्षम बटन <a>थोड़ा अलग व्यवहार करते हैं:

<a>s विशेषता का समर्थन नहीं करते हैं disabled, इसलिए आपको .disabledकक्षा को नेत्रहीन रूप से अक्षम दिखाने के लिए जोड़ना होगा।
कुछ भविष्य के अनुकूल शैलियों को pointer-eventsएंकर बटन पर सभी को अक्षम करने के लिए शामिल किया गया है।
उपयोग करने वाले अक्षम बटनों में सहायक तकनीकों के लिए तत्व की स्थिति को इंगित करने के <a>लिए विशेषता शामिल होनी चाहिए ।aria-disabled="true"
उपयोग करने वाले अक्षम बटन में विशेषता शामिल <a> नहीं होनी चाहिए ।href

प्राथमिक लिंक संपर्क

एचटीएमएल

<a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary disabled" role="button" aria-disabled="true">Link</a>

लिंक कार्यक्षमता चेतावनी

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

प्राथमिक लिंक संपर्क

एचटीएमएल

<a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary 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">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">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>

तरीकों

आप बटन कंस्ट्रक्टर के साथ एक बटन इंस्टेंस बना सकते हैं, उदाहरण के लिए:

const bsButton = new bootstrap.Button('#myButton')

तरीका	विवरण
`dispose`	एक तत्व के बटन को नष्ट कर देता है। (डीओएम तत्व पर संग्रहीत डेटा हटा देता है)
`getInstance`	स्टेटिक विधि जो आपको डीओएम तत्व से जुड़े बटन इंस्टेंस को प्राप्त करने की अनुमति देती है, आप इसे इस तरह उपयोग कर सकते हैं `bootstrap.Button.getInstance(element)`:।
`getOrCreateInstance`	स्टेटिक विधि जो किसी DOM तत्व से जुड़े बटन इंस्टेंस को लौटाती है या यदि इसे प्रारंभ नहीं किया गया था तो एक नया बनाएं। आप इसे इस तरह इस्तेमाल कर सकते हैं `bootstrap.Button.getOrCreateInstance(element)`:।
`toggle`	पुश स्थिति को टॉगल करता है। बटन को यह आभास देता है कि वह सक्रिय हो गया है।

उदाहरण के लिए, सभी बटनों को टॉगल करने के लिए

document.querySelectorAll('.btn').forEach(buttonElement => {
  const button = bootstrap.Button.getOrCreateInstance(buttonElement)
  button.toggle()
})

सीएसएस

चर

v5.2.0 . में जोड़ा गया

बूटस्ट्रैप के विकसित हो रहे सीएसएस चर दृष्टिकोण के हिस्से के रूप में, बटन अब .btnवास्तविक समय के अनुकूलन के लिए स्थानीय सीएसएस चर का उपयोग करते हैं। CSS वेरिएबल्स के मान Sass के माध्यम से सेट किए जाते हैं, इसलिए Sass अनुकूलन अभी भी समर्थित है।

  --#{$prefix}btn-padding-x: #{$btn-padding-x};
  --#{$prefix}btn-padding-y: #{$btn-padding-y};
  --#{$prefix}btn-font-family: #{$btn-font-family};
  @include rfs($btn-font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-font-weight: #{$btn-font-weight};
  --#{$prefix}btn-line-height: #{$btn-line-height};
  --#{$prefix}btn-color: #{$body-color};
  --#{$prefix}btn-bg: transparent;
  --#{$prefix}btn-border-width: #{$btn-border-width};
  --#{$prefix}btn-border-color: transparent;
  --#{$prefix}btn-border-radius: #{$btn-border-radius};
  --#{$prefix}btn-hover-border-color: transparent;
  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
  --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
  --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);

प्रत्येक संशोधक वर्ग हमारे , , और मिश्रणों .btn-*के साथ अतिरिक्त CSS नियमों को न्यूनतम करने के लिए उपयुक्त CSS चरों को अद्यतन करता है ।button-variant()button-outline-variant()button-size()

यहां एक कस्टम .btn-*संशोधक वर्ग बनाने का एक उदाहरण दिया गया है जैसे हम अपने स्वयं के CSS और Sass चर के मिश्रण के साथ बूटस्ट्रैप के CSS चरों को पुन: असाइन करके अपने डॉक्स के लिए अद्वितीय बटन के लिए करते हैं।

.btn-bd-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet);
  --bs-btn-border-color: var(--bd-violet);
  --bs-btn-border-radius: .5rem;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
}

सास चर

$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:              var(--#{$prefix}link-color);
$btn-link-hover-color:        var(--#{$prefix}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)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-bg: #{$background};
  --#{$prefix}btn-border-color: #{$border};
  --#{$prefix}btn-hover-color: #{$hover-color};
  --#{$prefix}btn-hover-bg: #{$hover-background};
  --#{$prefix}btn-hover-border-color: #{$hover-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$disabled-color};
  --#{$prefix}btn-disabled-bg: #{$disabled-background};
  --#{$prefix}btn-disabled-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)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-border-color: #{$color};
  --#{$prefix}btn-hover-color: #{$color-hover};
  --#{$prefix}btn-hover-bg: #{$active-background};
  --#{$prefix}btn-hover-border-color: #{$active-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$color};
  --#{$prefix}btn-disabled-bg: transparent;
  --#{$prefix}btn-disabled-border-color: #{$color};
  --#{$prefix}gradient: none;
}

@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  --#{$prefix}btn-padding-y: #{$padding-y};
  --#{$prefix}btn-padding-x: #{$padding-x};
  @include rfs($font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-border-radius: #{$border-radius};
}

सैस लूप्स

बटन वेरिएंट (नियमित और आउटलाइन बटन के लिए) $theme-colorsसंशोधक वर्ग उत्पन्न करने के लिए हमारे मानचित्र के साथ अपने संबंधित मिश्रण का उपयोग करते हैं scss/_buttons.scss।

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @if $color == "light" {
      @include button-variant(
        $value,
        $value,
        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
        $active-background: shade-color($value, $btn-active-bg-shade-amount),
        $active-border: shade-color($value, $btn-active-border-shade-amount)
      );
    } @else if $color == "dark" {
      @include button-variant(
        $value,
        $value,
        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
        $active-background: tint-color($value, $btn-active-bg-tint-amount),
        $active-border: tint-color($value, $btn-active-border-tint-amount)
      );
    } @else {
      @include button-variant($value, $value);
    }
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}