رفتن به محتوای اصلی به پیمایش اسناد بروید
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کلاس را به دکمه اضافه کنید. در Sass، می توانید تنظیم $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ویژگی Boolean به هر <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: nonearia-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);
  }
}