बटणे

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

या पृष्ठावर

उदाहरणे

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

html

<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: nowrapSass मध्ये, तुम्ही प्रत्येक बटणासाठी मजकूर रॅपिंग अक्षम करण्यासाठी सेट करू शकता .

बटण टॅग

वर्ग घटक .btnवापरण्यासाठी डिझाइन केले आहेत . तथापि, तुम्ही हे वर्ग किंवा घटकांवर <button>देखील वापरू शकता (जरी काही ब्राउझर थोडे वेगळे प्रस्तुतीकरण लागू करू शकतात).<a><input>

<a>वर्तमान पृष्ठातील नवीन पृष्ठे किंवा विभागांशी दुवा साधण्याऐवजी पृष्ठातील कार्यक्षमता ट्रिगर करण्यासाठी वापरल्या जाणार्‍या घटकांवर बटण वर्ग वापरताना (जसे की सामग्री कोलॅप्स करणे), या role="button"लिंक्सना त्यांचा हेतू सहाय्यक तंत्रज्ञानापर्यंत योग्यरित्या पोहोचवण्यासाठी दिले पाहिजे जसे की स्क्रीन रीडर.

दुवा

html

<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-*कोणत्याही बटणावरील सर्व पार्श्वभूमी प्रतिमा आणि रंग काढून टाकण्यासाठी डीफॉल्ट सुधारक वर्गांना बदला .

html

<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अतिरिक्त आकारांसाठी.

html

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

html

<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 व्हेरिएबल्ससह तुमचे स्वतःचे सानुकूल आकार बदलू शकता:

html

<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लागू केली आहेत, होव्हर आणि सक्रिय स्थितींना ट्रिगर होण्यापासून प्रतिबंधित करते.

html

<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

प्राथमिक दुवा दुवा

html

<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"एक विशेषता देखील समाविष्ट करा आणि त्यांची कार्यक्षमता पूर्णपणे अक्षम करण्यासाठी सानुकूल JavaScript वापरा.tabindex="-1"

प्राथमिक दुवा दुवा

html

<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 मधील पूर्ण-रुंदीचे प्रतिसादात्मक स्टॅक तयार करा, "ब्लॉक बटणे". बटण विशिष्ट वर्गांऐवजी उपयुक्तता वापरून, आमच्याकडे अंतर, संरेखन आणि प्रतिसादात्मक वर्तनांवर अधिक नियंत्रण आहे.

html

<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युटिलिटी रद्द होते. ते बदललेले पाहण्यासाठी तुमच्या ब्राउझरचा आकार बदला.

html

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

html

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

क्षैतिज असताना बटणांचे संरेखन समायोजित करण्यासाठी अतिरिक्त उपयुक्तता वापरल्या जाऊ शकतात. येथे आम्ही आमचे पूर्वीचे प्रतिसादात्मक उदाहरण घेतले आहे आणि बटणे स्टॅक केलेली नसताना उजवीकडे संरेखित करण्यासाठी बटणावर काही फ्लेक्स युटिलिटी आणि मार्जिन युटिलिटी जोडली आहे.

html

<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" ते सहाय्यक तंत्रज्ञानापर्यंत योग्यरित्या पोहोचले आहे याची खात्री करण्यासाठी.

html

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

लिंक टॉगल करा सक्रिय टॉगल लिंक टॉगल लिंक अक्षम केली

html

<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`	स्टॅटिक पद्धत जी डीओएम घटकाशी संबंधित एक बटण उदाहरण देते किंवा ते प्रारंभ केले नसल्यास नवीन तयार करते. आपण ते याप्रमाणे वापरू शकता: `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	टॉगल पुश स्थिती. बटण सक्रिय केले आहे असे स्वरूप देते.

उदाहरणार्थ, सर्व बटणे टॉगल करण्यासाठी

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

CSS

चल

v5.2.0 मध्ये जोडले

बूटस्ट्रॅपच्या विकसित होत असलेल्या 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%)};
}

Sass चल

$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};
}

Sass loops

$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);
  }
}