ወደ ዋናው ይዘት ዝለል ወደ ሰነዶች ዳሰሳ ዝለል
Check
in English

አዝራሮች

ለብዙ መጠኖች፣ ግዛቶች እና ሌሎችም ላሉ ድርጊቶች የ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: nowrapበ Sass ውስጥ ለእያንዳንዱ አዝራር የጽሑፍ መጠቅለያን ለማሰናከል ማዘጋጀት ይችላሉ።

የአዝራር መለያዎች

.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>ይህ የሲኤስኤስ ንብረት ለኤችቲኤምኤል ገና ደረጃውን ያልጠበቀ መሆኑን ልብ ይበሉ፣ ግን ሁሉም ዘመናዊ አሳሾች ይደግፋሉ። በተጨማሪም፣ በሚደግፉ አሳሾች ውስጥ እንኳን pointer-events: none፣ የቁልፍ ሰሌዳ አሰሳ ሳይነካ ይቀራል፣ ይህም ማለት ማየት የተሳናቸው የቁልፍ ሰሌዳ ተጠቃሚዎች እና አጋዥ ቴክኖሎጂ ተጠቃሚዎች አሁንም እነዚህን አገናኞች ማግበር ይችላሉ። ስለዚህ ለደህንነት ሲባል aria-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>

አዝራሮች አግድ

ልክ እንደ ቡትስትራፕ 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-gridgap-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 ከ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);

እያንዳንዱ የመቀየሪያ ክፍል በእኛ ፣፣ እና ድብልቅ .btn-*ነገሮች ተጨማሪ የሲኤስኤስ ህጎችን ለመቀነስ ተገቢውን የ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};
}

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