دکمه ها
از سبک های دکمه سفارشی بوت استرپ برای عملکردها در فرم ها، دیالوگ ها و موارد دیگر با پشتیبانی از چندین اندازه، حالت و موارد دیگر استفاده کنید.
مثال ها
بوت استرپ شامل چندین سبک دکمه از پیش تعریف شده است، که هر کدام هدف معنایی خود را انجام می دهند، و برای کنترل بیشتر، چند مورد اضافی به کار رفته است.
<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: 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);
}
}