باز بدە بۆ ناوەڕۆکی سەرەکی باز بدە بۆ گەشتکردن بە دۆکیومێنتەکان
in English

دوگمەکان

شێوازەکانی دوگمەی تایبەتمەندی 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لەسەر دوگمەکانی ئەنکر.
  • دوگمەکانی لەکارخراو دەبێ 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>

پۆلەکە .disabledبەکاریدەهێنێت pointer-events: noneبۆ هەوڵدان بۆ لەکارخستنی کارایی بەستەری <a>s، بەڵام ئەو تایبەتمەندییە CSS هێشتا ستاندارد نەکراوە. سەرەڕای ئەوە، تەنانەت لەو وێبگەڕانەی کە پشتگیری دەکەن pointer-events: none، گەشتکردن بە کیبۆرد بێ کاریگەری دەمێنێتەوە، واتە بەکارهێنەرانی کیبۆرد بینراو و بەکارهێنەرانی تەکنەلۆژیا یارمەتیدەرەکان هێشتا دەتوانن ئەم بەستەرانە چالاک بکەن. بۆیە بۆ ئەوەی سەلامەت بیت، جگە لە aria-disabled="true", هەروەها tabindex="-1"تایبەتمەندییەک لەسەر ئەم بەستەرانە دابنێ بۆ ئەوەی ڕێگرییان لێبکات لە وەرگرتنی فۆکۆسی کیبۆرد، و بەکارهێنانی جاڤاسکڕێپتی تایبەتمەند بۆ لەکارخستنی کاراییەکانیان بە تەواوی.

دوگمەکانی بلۆک بکە

دروستکردنی ستێکی وەڵامدەرەوەی تەواو پانایی، "دوگمەی بلۆک" وەک ئەوانەی لە 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 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);
  }
}