Buttons

Формалардагы, диалогдордогу жана башкалардагы аракеттер үчүн Bootstrap'тын ыңгайлаштырылган баскыч стилдерин колдонуңуз.

Бул бетте

Мисалдар

Bootstrap бир нече алдын ала аныкталган баскыч стилдерин камтыйт, алардын ар бири өзүнүн семантикалык максатына кызмат кылат жана көбүрөөк башкаруу үчүн бир нече кошумчалар киргизилген.

<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логикалык атрибутун кошуу менен баскычтарды жигердүү кылбаңыз. <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Кээ бир келечекке ылайыктуу стилдер казык баскычтарында бардыгын өчүрүү үчүн камтылган .
Өчүрүлгөн баскычтар жардамчы технологияларга элементтин абалын көрсөтүүчү атрибутун <a>камтышы керек .aria-disabled="true"
Өчүрүлгөн баскычтар атрибутун камтыбашы <a> керек .href

Негизги шилтеме Шилтеме

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

Шилтеменин функциялык эскертүүсү

hrefӨчүрүлгөн шилтемеде атрибутту сакташыңыз керек болгон учурларды жабуу үчүн .disabledкласс s pointer-events: noneшилтемесинин функциясын өчүрүүгө аракет кылат . <a>Бул CSS касиети HTML үчүн азырынча стандартташтырылбаганын эске алыңыз, бирок бардык заманбап браузерлер аны колдойт. Кошумчалай кетсек, колдогон браузерлерде да pointer-events: none, клавиатуранын навигациясы эч кандай таасир этпейт, башкача айтканда, клавиатураны көрө албаган колдонуучулар жана жардамчы технологияларды колдонуучулар дагы эле бул шилтемелерди иштете алышат. Коопсуз болуу үчүн, андан тышкары, бул шилтемелерге клавиатуранын фокусун алуудан сактануу aria-disabled="true"үчүн атрибутун кошуңуз жана алардын функцияларын толугу менен өчүрүү үчүн ыңгайлаштырылган JavaScript колдонуңуз.tabindex="-1"

Негизги шилтеме Шилтеме

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

Блок баскычтары

Биздин дисплей жана боштук утилиталарынын аралашмасы менен 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-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>

Сиз блок баскычтарыңыздын туурасын тор мамычасынын туурасы класстары менен тууралай аласыз. Мисалы, жарым кеңдиктеги "блок баскычы" үчүн колдонуңуз .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>

Button плагин

Баскыч плагини сизге жөнөкөй күйгүзүү/өчүрүү баскычтарын түзүүгө мүмкүндүк берет.

Көрүнүп тургандай, бул которуштуруу баскычтары белгилөө кутучасынын которуштуруу баскычтарына окшош . Бирок, алар жардамчы технологиялар аркылуу ар кандай жеткирилет: кутучанын которуштуруулары экрандагы окурмандар тарабынан "текшерилген"/"белгиленген эмес" деп жарыяланат (анткени, алардын сырткы көрүнүшүнө карабастан, алар түпкүлүгүндө дагы эле белги кутучалары), ал эми бул которуштуруу баскычтары катары жарыяланат. "баскыч"/"баскыч". Бул эки ыкманын ортосундагы тандоо сиз түзүп жаткан которгучтун түрүнө жараша болот жана которуштуруу колдонуучуларга белгилөө кутучасы же иш жүзүндө баскыч катары жарыяланганда мааниге ээ болобу же жокпу.

Мамлекеттерди которуштуруу

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 class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>

Методдор

Сиз баскычтын инстанциясын баскыч конструктору менен түзө аласыз, мисалы:

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

Метод	Description
`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()
})

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:              $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);
  }
}