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.

<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

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

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

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

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.

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

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.
O'chirilgan tugmalar aria-disabled="true"yordamchi texnologiyalarga element holatini ko'rsatish uchun atributni o'z ichiga olishi kerak.

Asosiy havola Havola

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

Havola funksionalligi haqida ogohlantirish

Sinf s ning havola funksiyasini o'chirishga harakat qiladi .disabled, ammo bu CSS xususiyati hali standartlashtirilmagan. Bundan tashqari, qo'llab-quvvatlaydigan brauzerlarda ham klaviatura 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 , klaviatura fokuslarini olishning oldini olish uchun ushbu havolalarga atributni qo'shing va ularning funksiyalarini butunlay o'chirish uchun maxsus JavaScript-dan foydalaning.pointer-events: none<a>pointer-events: nonearia-disabled="true"tabindex="-1"

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.

<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

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

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

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

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

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

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

Usullari

Siz tugma konstruktori yordamida tugma namunasini yaratishingiz mumkin, masalan:

var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)

Usul	Tavsif
`toggle`	Bosish holatini almashtiradi. Tugma faollashtirilgan ko'rinishni beradi.
`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)`

Masalan, barcha tugmalarni almashtirish uchun

var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
  var button = new bootstrap.Button(button)
  button.toggle()
})

Sass

O'zgaruvchilar

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

Aralashmalar

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)
) {
  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);
}

Looplar

$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} {
    @include button-variant($value, $value);
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}