دوگمەکان
شێوازەکانی دوگمەی تایبەتمەندی 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>
ئەو توخمانەی کە بەکاردەهێنرێن بۆ دەستپێکردنی کارایی ناو لاپەڕە (وەک داڕمانی ناوەڕۆک)، لەبری بەستنەوە بە لاپەڕە یان بەشە نوێیەکان لەناو لاپەڕەی ئێستادا، ئەم بەستەرانە پێویستە 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
لەسەر دوگمەکانی ئەنکر. - دوگمەکانی لەکارخراو کە بەکاردەهێنن
<a>
دەبێتaria-disabled="true"
تایبەتمەندییەکە لەخۆ بگرن بۆ ئاماژەدان بە دۆخی توخمەکە بۆ تەکنەلۆژیا یارمەتیدەرەکان. - دوگمەکانی لەکارخراو کە بەکاردەهێنن
<a>
نابێتhref
تایبەتمەندییەکە لەخۆ بگرن .
<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
ئاگادارکردنەوەی کارایی بەستەر
بۆ داپۆشینی ئەو حاڵەتانەی کە دەبێت href
تایبەتمەندییەکە لەسەر بەستەرێکی لەکارخراو بهێڵیتەوە، .disabled
پۆلەکە بەکاریدەهێنێت pointer-events: none
بۆ هەوڵدان بۆ لەکارخستنی کارایی بەستەرەکەی <a>
s. تێبینی بکە کە ئەم تایبەتمەندییە CSS هێشتا ستاندارد نەکراوە بۆ HTML، بەڵام هەموو وێبگەڕە مۆدێرنەکان پشتگیری دەکەن. سەرەڕای ئەوە، تەنانەت لەو وێبگەڕانەی کە پشتگیری دەکەن pointer-events: none
، گەشتکردن بە کیبۆرد بێ کاریگەری دەمێنێتەوە، واتە بەکارهێنەرانی کیبۆرد بینراو و بەکارهێنەرانی تەکنەلۆژیا یارمەتیدەرەکان هێشتا دەتوانن ئەم بەستەرانە چالاک بکەن. بۆیە بۆ ئەوەی سەلامەت بیت، جگە لە aria-disabled="true"
, هەروەها tabindex="-1"
تایبەتمەندییەک لەسەر ئەم بەستەرانە دابنێ بۆ ئەوەی ڕێگرییان لێبکات لە وەرگرتنی فۆکۆسی کیبۆرد، و بەکارهێنانی جاڤاسکڕێپتی تایبەتمەند بۆ لەکارخستنی کاراییەکانیان بە تەواوی.
<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>
دوگمەکانی بلۆک بکە
دروستکردنی ستێکی وەڵامدەرەوەی تەواو پانایی، "دوگمەی بلۆک" وەک ئەوانەی لە 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-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 class="btn btn-primary disabled" 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);
}
}