बटणां घालतात

एका परस चड आकार, स्थिती आनी हेर खातीर आदारासयत फॉर्म, संवाद, आनी चडांतल्या कृतीं खातीर Bootstrap ची सानुकूल बटण शैली वापरात.

ह्या पानाचेर

उदाहरणां

बूटस्ट्रॅपांत जायत्यो पूर्वनिर्धारीत बटण शैली आसपावीत केल्यात, दरेक स्वताच्या अर्थपूर्ण उद्देशाची सेवा करता, चड नियंत्रणा खातीर कांय अतिरिक्त उडयतात.

एचटीएमएल हें नांव

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

तुमी CSS चड-उणें कडेन तुमचें स्वताचें सानुकूल आकारमान लेगीत रोल करूंक शकतात:

एचटीएमएल हें नांव

<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>disableds गुणधर्माक तेंको दिना , देखून .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वर्ग s ची 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>

बटण आडावप

आमच्या प्रदर्शन आनी गॅप उपयुक्ततायांच्या मिश्रणान Bootstrap 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`	एका घटकाचें बटण नश्ट करता. (DOM घटकाचेर सांठयल्लो डेटा काडून उडयता)
`getInstance`	स्थिर पद्दत जी तुमकां DOM घटकाक संबंदीत बटण दृष्टांत मेळोवपाक परवानगी दिता, तुमी ती अशे तरेन वापरूं येता: `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 त जोडलां

Bootstrap च्या विकसीत जावपी CSS चड-उणें पद्दतीचो एक भाग म्हूण, बटणां आतां .btnवाडयल्ल्या रियल-टायम पसंतीखातीर थळाव्या CSS चड-उणें चालू वापरतात. 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 व्हेरिएबलांच्या मिश्रणान Bootstrap च्या 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);
  }
}