Tugmalar

Bir nechta o'lchamlar, holatlar va boshqalarni qo'llab-quvvatlaydigan shakllar, dialoglar va boshqalardagi harakatlar uchun Bootstrap-ning maxsus tugma uslublaridan foydalaning.

Ushbu sahifada

Misollar

Bootstrap bir nechta oldindan belgilangan tugma uslublarini o'z ichiga oladi, ularning har biri o'zining semantik maqsadiga xizmat qiladi va ko'proq nazorat qilish uchun bir nechta qo'shimchalar kiritilgan.

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>

Yordamchi texnologiyalarga ma'no etkazish

Ma'no qo'shish uchun rangdan foydalanish faqat vizual ko'rsatkichni ta'minlaydi, bu yordamchi texnologiyalar foydalanuvchilariga, masalan, ekranni o'qiydiganlarga etkazilmaydi. Rang bilan belgilangan ma'lumotlar mazmunning o'zidan (masalan, ko'rinadigan matn) aniq bo'lishiga yoki .visually-hiddensinf bilan yashiringan qo'shimcha matn kabi muqobil vositalar orqali kiritilganligiga ishonch hosil qiling.

Matnni o'rashni o'chirib qo'ying

Agar siz tugma matnini o'rashni xohlamasangiz, .text-nowrapsinfni tugmaga qo'shishingiz mumkin. Sass-da siz $btn-white-space: nowraphar bir tugma uchun matnni o'rashni o'chirib qo'yishingiz mumkin.

Tugma teglari

Sinflar element .btnbilan foydalanish uchun mo'ljallangan . <button>Biroq, siz ushbu sinflarni <a>yoki <input>elementlarda ham foydalanishingiz mumkin (ba'zi brauzerlar biroz boshqacha ko'rsatishni qo'llashi mumkin).

Joriy sahifadagi yangi sahifalar yoki boʻlimlarga havola qilish oʻrniga sahifa ichidagi funksiyalarni ishga tushirish uchun ishlatiladigan elementlarda tugma sinflaridan foydalanilganda <a>(masalan, kontentni yigʻish), bu havolalar role="button"oʻz maqsadlarini yordamchi texnologiyalarga mos ravishda etkazish uchun berilishi kerak. ekran o'quvchilari.

Havola

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">

Kontur tugmalari

Tugma kerak, lekin ular olib keladigan katta fon ranglari emasmi? .btn-outline-*Har qanday tugmachadagi barcha fon tasvirlari va ranglarini olib tashlash uchun standart modifikator sinflarini sinflar bilan almashtiring .

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>

Ba'zi tugma uslublari nisbatan engil oldingi rangdan foydalanadi va etarli kontrastga ega bo'lish uchun faqat qorong'i fonda ishlatilishi kerak.

O'lchamlari

Kattaroq yoki kichikroq tugmalarni xohlaysizmi? Qo'shish .btn-lgyoki .btn-smqo'shimcha o'lchamlar uchun.

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>

Siz hatto o'zingizning shaxsiy o'lchamingizni CSS o'zgaruvchilari bilan o'zgartirishingiz mumkin:

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>

O'chirilgan holat

Har qanday elementga disabledmantiqiy atributni qo'shish orqali tugmalarni nofaol ko'ring . <button>O'chirilgan tugmalar pointer-events: noneqo'llanilgan bo'lib, ular hover va faol holatlarning ishga tushishini oldini oladi.

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>

Elementdan foydalangan holda o'chirilgan tugmalar <a>biroz boshqacha ishlaydi:

<a>s atributni qo'llab-quvvatlamaydi disabled, shuning .disableduchun uni vizual ravishda o'chirib qo'yish uchun sinfni qo'shishingiz kerak.
Ba'zi kelajak uchun qulay uslublar barcha pointer-eventslangar tugmachalarini o'chirish uchun kiritilgan.
Foydalanilayotgan o'chirilgan tugmalar yordamchi texnologiyalarga elementning holatini ko'rsatadigan atributni <a>o'z ichiga olishi kerak .aria-disabled="true"
Foydalanilayotgan o'chirilgan tugmalar atributni o'z ichiga <a> olmaydihref .

Asosiy havola Havola

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>

Havola funksionalligi haqida ogohlantirish

hrefAtributni o'chirilgan havolada saqlashingiz kerak bo'lgan holatlarni qoplash uchun .disabledsinf s pointer-events: nonening havola funksiyasini o'chirishga harakat qiladi <a>. E'tibor bering, ushbu CSS xususiyati hali HTML uchun standartlashtirilmagan, ammo barcha zamonaviy brauzerlar uni qo'llab-quvvatlaydi. Bundan tashqari, qo'llab-quvvatlaydigan brauzerlarda ham pointer-events: noneklaviatura navigatsiyasi ta'sir qilmaydi, ya'ni ko'rish qobiliyatiga ega bo'lgan klaviatura foydalanuvchilari va yordamchi texnologiyalar foydalanuvchilari hali ham ushbu havolalarni faollashtirishi mumkin. Xavfsiz bo'lish uchun, ga qo'shimcha ravishda aria-disabled="true", tabindex="-1"klaviatura fokuslarini olishning oldini olish uchun ushbu havolalarga atributni qo'shing va ularning funksiyalarini butunlay o'chirish uchun maxsus JavaScript-dan foydalaning.

Asosiy havola Havola

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>

Bloklash tugmalari

Bootstrap 4-dagi kabi to‘liq kenglikdagi “bloklash tugmalari”ning sezgir to‘plamlarini displey va bo‘shliq yordamchi dasturlarimiz aralashmasi bilan yarating. Muayyan tugmachalar o'rniga yordamchi dasturlardan foydalanish orqali biz oraliqlar, tekislash va sezgir xatti-harakatlar ustidan ancha katta nazoratga egamiz.

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>

Bu erda biz vertikal stacked tugmalardan boshlab , sinf o'rnini bosadigan mdto'xtash nuqtasiga qadar sezgir o'zgarishlarni yaratamiz va shu bilan yordamchi dasturni bekor qilamiz . Ularning o'zgarishini ko'rish uchun brauzeringiz hajmini o'zgartiring..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>

Blok tugmalarining kengligini panjara ustuni kengligi sinflari bilan sozlashingiz mumkin. Masalan, yarim kenglikdagi “blok tugmasi” uchun dan foydalaning .col-6. Uni ham bilan gorizontal ravishda markazlashtiring .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>

Gorizontal bo'lganda tugmalarning hizalanishini sozlash uchun qo'shimcha yordamchi dasturlardan foydalanish mumkin. Bu yerda biz oldingi javob beruvchi misolimizni oldik va tugmachalar biriktirilmaganda tugmalarni o‘ngga tekislash uchun ba’zi moslashuvchan yordamchi dasturlar va chekka yordam dasturini qo‘shdik.

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>

Plagin tugmasi

Tugma plagini sizga oddiy yoqish/o'chirish tugmalarini yaratish imkonini beradi.

Vizual ravishda, bu almashtirish tugmalari tasdiqlash qutisi bilan bir xil bo'ladi almashtirish tugmalari . Biroq, ular yordamchi texnologiyalar orqali boshqacha tarzda uzatiladi: belgilash katakchalarini almashtirish ekranni o'quvchilar tomonidan "belgilangan"/"belgilanmagan" deb e'lon qilinadi (chunki ular tashqi ko'rinishiga qaramay, ular hali ham belgilash katakchalari), holbuki bu almashtirish tugmalari sifatida e'lon qilinadi. "tugma"/"tugma bosildi". Ushbu ikki yondashuv o'rtasidagi tanlov siz yaratayotgan almashtirish turiga bog'liq bo'ladi va o'tish tugmasi tasdiqlash qutisi yoki haqiqiy tugma sifatida e'lon qilinganda foydalanuvchilarga mantiqiy bo'ladimi yoki yo'qmi.

Holatlarni almashtirish

data-bs-toggle="button"Tugma holatini almashtirish uchun qo‘shish active. Agar tugmani oldindan almashtirayotgan bo'lsangiz, .activesinfni qo'lda qo'shishingiz va aria-pressed="true" uning yordamchi texnologiyalarga mos ravishda uzatilishini ta'minlashingiz kerak.

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>

Havolani almashtirish Faol almashtirish havolasi Oʻchirish havolasi oʻchirilgan

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>

Usullari

Siz tugma konstruktori yordamida tugma namunasini yaratishingiz mumkin, masalan:

const bsButton = new bootstrap.Button('#myButton')

Usul	Tavsif
`dispose`	Elementning tugmachasini yo'q qiladi. (DOM elementida saqlangan ma'lumotlarni o'chiradi)
`getInstance`	DOM elementi bilan bog'langan tugma nusxasini olish imkonini beruvchi statik usul, uni quyidagicha ishlatishingiz mumkin: `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	DOM elementiga bog'langan tugma nusxasini qaytaradigan yoki ishga tushirilmagan bo'lsa, yangisini yaratadigan statik usul. Siz undan shunday foydalanishingiz mumkin: `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	Bosish holatini almashtiradi. Tugma faollashtirilgan ko'rinishni beradi.

Masalan, barcha tugmalarni almashtirish uchun

document.querySelectorAll('.btn').forEach(buttonElement => {
  const button = bootstrap.Button.getOrCreateInstance(buttonElement)
  button.toggle()
})

CSS

O'zgaruvchilar

5.2.0 versiyasida qo'shilgan

Bootstrap-ning rivojlanayotgan CSS o'zgaruvchilari yondashuvining bir qismi sifatida tugmalar endi .btnreal vaqt rejimini yaxshilash uchun mahalliy CSS o'zgaruvchilardan foydalanadi. CSS o'zgaruvchilari uchun qiymatlar Sass orqali o'rnatiladi, shuning uchun Sass moslashuvi hali ham qo'llab-quvvatlanadi.

  --#{$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);

Har bir modifikator klassi tegishli CSS o'zgaruvchilarini bizning , , va mixinlarimiz .btn-*bilan qo'shimcha CSS qoidalarini minimallashtirish uchun yangilaydi .button-variant()button-outline-variant()button-size()

.btn-*Bootstrap-ning CSS o'zgaruvchilarini o'zimizning CSS va Sass o'zgaruvchilari aralashmasi bilan qayta tayinlash orqali hujjatlarimizga xos tugmalar uchun qilganimiz kabi maxsus modifikator sinfini yaratish misoli bu erda .

.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 o'zgaruvchilari

$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%;

Sass aralashmalari

Tugmalar uchun uchta miks mavjud: tugma va tugma konturi varianti mikslari (ikkalasi ham ga asoslanadi $theme-colors), shuningdek, tugma oʻlchamli miksin.

@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};
}

Sass halqalari

$theme-colorsTugma variantlari (oddiy va kontur tugmalari uchun) dagi modifikator sinflarini yaratish uchun xaritamiz bilan oʻzlarining tegishli mikslaridan foydalanadi 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);
  }
}