බොත්තම්

බහු ප්‍රමාණ, ප්‍රාන්ත සහ තවත් දේ සඳහා සහය ඇතිව ආකෘති, සංවාද සහ තවත් දේවල ක්‍රියා සඳහා Bootstrap හි අභිරුචි බොත්තම් විලාස භාවිත කරන්න.

මෙම පිටුවේ

උදාහරණ

Bootstrap හි පූර්ව නිර්වචනය කරන ලද බොත්තම් මෝස්තර කිහිපයක් ඇතුළත් වන අතර, ඒ සෑම එකක්ම තමන්ගේම අර්ථකථන අරමුණු සඳහා සේවය කරයි, අමතර කිහිපයක් වැඩි පාලනයක් සඳහා දමනු ලැබේ.

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ඔබට උපලක්ෂණ අක්‍රිය සබැඳියක් මත තබා ගත යුතු අවස්ථා ආවරණය කිරීම සඳහා, s හි සබැඳි ක්‍රියාකාරීත්වය අක්‍රිය කිරීමට .disabledපන්තිය භාවිතා කරයි . මෙම CSS දේපල තවමත් HTML සඳහා ප්‍රමිතිගත කර නොමැති බව සලකන්න, නමුත් සියලුම නවීන බ්‍රව්සර් එයට සහය දක්වයි. ඊට අමතරව, සහාය දක්වන බ්‍රවුසරවල පවා , යතුරුපුවරු සංචාලනය බල නොපායි, එයින් අදහස් කරන්නේ දෘෂ්‍යමාන යතුරුපුවරු භාවිතා කරන්නන්ට සහ සහායක තාක්ෂණයන් භාවිතා කරන්නන්ට තවමත් මෙම සබැඳි සක්‍රිය කිරීමට හැකි වනු ඇති බවයි. ආරක්ෂිත වීමට, ට අමතරව , මෙම සබැඳි වලට යතුරුපුවරු නාභිගත වීම වැළැක්වීමට උපලක්ෂණයක් ද ඇතුළත් කරන්න , සහ ඒවායේ ක්‍රියාකාරීත්වය සම්පූර්ණයෙන්ම අක්‍රිය කිරීමට අභිරුචි JavaScript භාවිතා කරන්න.pointer-events: none<a>pointer-events: nonearia-disabled="true"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>

බොත්තම් අවහිර කරන්න

අපගේ සංදර්ශකය සහ ගැප් උපයෝගිතා මිශ්‍රණයක් සමඟ Bootstrap 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>

තිරස් වූ විට බොත්තම් පෙළගැස්ම සකස් කිරීමට අමතර උපයෝගිතා භාවිතා කළ හැක. මෙන්න අපි අපගේ පෙර ප්‍රතිචාරාත්මක උදාහරණය ගෙන බොත්තම් තව දුරටත් ගොඩගැසී නොමැති විට ඒවා දකුණට පෙළගස්වා ගැනීමට බොත්තම මත flex උපයෝගිතා කිහිපයක් සහ ආන්තික උපයෝගීතාවයක් එක් කර ඇත.

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`	DOM මූලද්‍රව්‍යයකට සම්බන්ධ බොත්තම් අවස්ථාවක් ආපසු ලබා දෙන ස්ථිතික ක්‍රමය හෝ එය ආරම්භ නොකළහොත් නව එකක් සාදන්න. ඔබට එය මේ ආකාරයෙන් භාවිතා කළ හැකිය: `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	තල්ලු තත්ත්වය ටොගල් කරයි. බොත්තමට එය සක්රිය කර ඇති පෙනුමක් ලබා දෙයි.

උදාහරණයක් ලෙස, සියලු බොත්තම් ටොගල් කිරීමට

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

CSS

විචල්යයන්

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

අපගේ , , සහ mixins .btn-*සමඟ අමතර CSS රීති අවම කිරීම සඳහා සෑම විකරණයක පන්තියක්ම සුදුසු CSS විචල්‍යයන් යාවත්කාලීන කරයි.button-variant()button-outline-variant()button-size()

.btn-*Bootstrap හි CSS විචල්‍යයන් අපගේම CSS සහ Sass විචල්‍ය මිශ්‍රණයකින් නැවත පැවරීමෙන් අපගේ ලේඛනවලට අනන්‍ය බොත්තම් සඳහා අප කරන ආකාරයට අභිරුචි විකරණය කිරීමේ පන්තියක් ගොඩනැගීමේ උදාහරණයක් මෙන්න .

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

සාස් ලූප

බොත්තම් ප්‍රභේද (සාමාන්‍ය සහ ලුහුඬු බොත්තම් සඳහා) $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);
  }
}