اصلي منځپانګې ته لاړ شئ د اسنادو نیویګیشن ته لاړشئ
in English

تڼۍ

د بټسټریپ دودیز بټن سټایلونه په فارمونو ، ډیالوګونو او نورو کې د عملونو لپاره د ډیری اندازو ، حالتونو او نورو لپاره ملاتړ سره وکاروئ.

مثالونه

په بوټسټریپ کې د تڼۍ ډیری ډیزاین شوي سټایلونه شامل دي، هر یو خپل سیمانټیک هدف ته خدمت کوي، د یو څو اضافي اضافو سره د ډیر کنټرول لپاره اچول شوي.

<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د هرې تڼۍ لپاره د متن ریپینګ غیر فعال کړئ.

تڼۍ ټګ

ټولګي د عنصر .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په لنگر بټونو کې غیر فعال کړي.
  • د کارونې معیوب شوي بټن <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ټولګی د s pointer-events: noneلینک فعالیت غیر فعالولو هڅه کوي . <a>په یاد ولرئ چې دا سی ایس ایس ملکیت لاهم د 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>

د بلاک بټن

زموږ د ښودنې او تشې اسانتیاو ترکیب سره د بشپړ چوکۍ ځواب ورکوونکي سټیکونه رامینځته کړئ ، د "بلاک بټن" په څیر په بوټسټریپ 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-gridgap-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);
  }
}