አዝራሮች
ለብዙ መጠኖች፣ ግዛቶች እና ሌሎችም ላሉ ድርጊቶች የ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
ክፍሉን ወደ አዝራሩ ማከል ይችላሉ። $btn-white-space: nowrap
በ Sass ውስጥ ለእያንዳንዱ አዝራር የጽሑፍ መጠቅለያን ለማሰናከል ማዘጋጀት ይችላሉ።
የአዝራር መለያዎች
.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>
የአካል ጉዳተኛ ሁኔታ
disabled
የቦሊያንን ባህሪ ወደ ማንኛውም <button>
አካል በማከል አዝራሮች የቦዘኑ እንዲመስሉ ያድርጉ ። የተሰናከሉ አዝራሮች pointer-events: none
ተተግብረዋል፣ ማንዣበብ እና ንቁ ግዛቶች እንዳይቀሰቀሱ ይከለክላሉ።
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
ኤለመንቱን በመጠቀም የተሰናከሉ አዝራሮች <a>
ባህሪያቸው ትንሽ የተለየ ነው፡-
<a>
s አይነታውን አይደግፍምdisabled
፣ ስለዚህ.disabled
ክፍሉን በምስሉ የተበላሸ እንዲመስል ማከል አለብህ።pointer-events
ሁሉንም መልህቅ ቁልፎችን ለማሰናከል አንዳንድ ለወደፊት ተስማሚ የሆኑ ቅጦች ተካትተዋል ።aria-disabled="true"
የተሰናከሉ አዝራሮች የንጥሉን ሁኔታ ለረዳት ቴክኖሎጂዎች ለማመልከት ባህሪውን ማካተት አለባቸው ።
<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
የአገናኝ ተግባራዊነት ማስጠንቀቂያ
ክፍሉ የ s አገናኝ ተግባርን ለማሰናከል ለመሞከር .disabled
ይጠቀማል ፣ ነገር ግን የCSS ንብረት እስካሁን ደረጃውን የጠበቀ አይደለም። በተጨማሪም ድጋፍ በሚሰጡ አሳሾች ውስጥ እንኳን የቁልፍ ሰሌዳ አሰሳ ምንም አልተነካም ማለት ነው፣ ይህ ማለት ማየት የተሳናቸው የቁልፍ ሰሌዳ ተጠቃሚዎች እና አጋዥ ቴክኖሎጂ ተጠቃሚዎች አሁንም እነዚህን አገናኞች ማግበር ይችላሉ። ስለዚህ ለደህንነት ሲባል ፣ በተጨማሪም፣ በእነዚህ ማገናኛዎች ላይ የኪቦርድ ትኩረትን እንዳይቀበሉ ለመከላከል ባህሪን ያካትቱ እና ተግባራቸውን ሙሉ በሙሉ ለማሰናከል ብጁ ጃቫ ስክሪፕትን ይጠቀሙ።pointer-events: none
<a>
pointer-events: none
aria-disabled="true"
tabindex="-1"
አዝራሮች አግድ
ልክ እንደ ቡትስትራፕ 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-grid
gap-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" autocomplete="off">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">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 href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
ዘዴዎች
በአዝራሩ ገንቢ የአዝራር ምሳሌ መፍጠር ይችላሉ፣ ለምሳሌ፡-
var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
ዘዴ | መግለጫ |
---|---|
toggle |
የግፋ ሁኔታን ይቀያይራል። አዝራሩ የነቃውን መልክ ይሰጣል። |
dispose |
የአንድ ንጥረ ነገር አዝራር ያጠፋል. (የተከማቸ ውሂብ በ DOM አባል ላይ ያስወግዳል) |
getInstance |
ከDOM ኤለመንት ጋር የተገናኘውን የአዝራር ምሳሌ እንዲያገኙ የሚያስችልዎ የማይንቀሳቀስ ዘዴ፣ እንደዚህ ሊጠቀሙበት ይችላሉ።bootstrap.Button.getInstance(element) |
getOrCreateInstance |
ከDOM ኤለመንት ጋር የተያያዘ የአዝራር ምሳሌን የሚመልስ ወይም ካልተጀመረ አዲስ የሚፈጥር የማይንቀሳቀስ ዘዴ። እንደሚከተለው ሊጠቀሙበት ይችላሉ:bootstrap.Button.getOrCreateInstance(element) |
ለምሳሌ፣ ሁሉንም አዝራሮች ለመቀየር
var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
var button = new bootstrap.Button(button)
button.toggle()
})
ሳስ
ተለዋዋጮች
$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: $link-color;
$btn-link-hover-color: $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)
) {
color: $color;
@include gradient-bg($background);
border-color: $border;
@include box-shadow($btn-box-shadow);
&:hover {
color: $hover-color;
@include gradient-bg($hover-background);
border-color: $hover-border;
}
.btn-check:focus + &,
&:focus {
color: $hover-color;
@include gradient-bg($hover-background);
border-color: $hover-border;
@if $enable-shadows {
@include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
}
}
.btn-check:checked + &,
.btn-check:active + &,
&:active,
&.active,
.show > &.dropdown-toggle {
color: $active-color;
background-color: $active-background;
// Remove CSS gradients if they're enabled
background-image: if($enable-gradients, none, null);
border-color: $active-border;
&:focus {
@if $enable-shadows {
@include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
}
}
}
&:disabled,
&.disabled {
color: $disabled-color;
background-color: $disabled-background;
// Remove CSS gradients if they're enabled
background-image: if($enable-gradients, none, null);
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)
) {
color: $color;
border-color: $color;
&:hover {
color: $color-hover;
background-color: $active-background;
border-color: $active-border;
}
.btn-check:focus + &,
&:focus {
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
}
.btn-check:checked + &,
.btn-check:active + &,
&:active,
&.active,
&.dropdown-toggle.show {
color: $active-color;
background-color: $active-background;
border-color: $active-border;
&:focus {
@if $enable-shadows {
@include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
}
}
}
&:disabled,
&.disabled {
color: $color;
background-color: transparent;
}
}
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
padding: $padding-y $padding-x;
@include font-size($font-size);
// Manually declare to provide an override to the browser default
@include border-radius($border-radius, 0);
}
ቀለበቶች
$theme-colors
የአዝራር ተለዋጮች (ለመደበኛ እና የዝርዝር አዝራሮች) በ ውስጥ የመቀየሪያ ክፍሎችን ለማመንጨት የየራሳቸውን ድብልቅ ከካርታችን ጋር ይጠቀማሉ scss/_buttons.scss
።
@each $color, $value in $theme-colors {
.btn-#{$color} {
@include button-variant($value, $value);
}
}
@each $color, $value in $theme-colors {
.btn-outline-#{$color} {
@include button-outline-variant($value);
}
}