تڼۍ

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

په دې پاڼه کې

مثالونه

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

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

تڼۍ ټګ

ټولګي د عنصر .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>په یاد ولرئ چې دا د CSS ملکیت لا تر اوسه د HTML لپاره معیاري نه دی، مګر ټول عصري براوزرونه یې ملاتړ کوي. برسېره پردې، حتی په براوزرونو کې چې ملاتړ کوي 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()
})

سی ایس ایس

متغیرات

په 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);

هر ترمیم کونکي ټولګي مناسب CSS متغیرات تازه کوي ترڅو زموږ د , ، او مکسینونو .btn-*سره اضافي CSS مقررات کم کړي .button-variant()button-outline-variant()button-size()

دلته د دودیز ترمیم کونکي ټولګي رامینځته کولو مثال دی .btn-*لکه څنګه چې موږ د بټنونو لپاره زموږ د اسنادو لپاره ځانګړي کوو د بوټسټریپ 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};
}

ساس لوپونه

د تڼۍ ډولونه (د منظم او آوټ لائن بټنو لپاره) زموږ د نقشې سره خپل اړونده مکسونه کاروي $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);
  }
}