Buttons

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

Бул бетте

Мисалдар

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

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>

Көмөкчү технологияларга маани берүү

Маани кошуу үчүн түстү колдонуу визуалдык көрсөткүчтү гана камсыз кылат, ал жардамчы технологиялардын колдонуучуларына – мисалы, экранды окугучтарга жеткирилбейт. Түс менен белгиленген маалымат мазмундун өзүнөн (мисалы, көрүнүүчү текст) ачык-айкын болушун же .visually-hiddenкласс менен жашырылган кошумча текст сыяктуу альтернативалуу каражаттар аркылуу камтылганын текшериңиз.

Текстти ороону өчүрүү

Эгер сиз баскычтын текстинин оролушун каалабасаңыз, .text-nowrapклассты баскычка кошсоңуз болот. Sassда сиз $btn-white-space: nowrapар бир баскыч үчүн текстти ороп коюуну өчүрө аласыз.

Баскыч тегдери

Класстар элемент .btnменен колдонуу үчүн иштелип чыккан . <button>Бирок, сиз бул класстарды <a>же <input>элементтерде да колдонсоңуз болот (бирок кээ бир браузерлер бир аз башкача көрсөтүүнү колдонушу мүмкүн).

<a>Учурдагы барактын ичиндеги жаңы барактарга же бөлүмдөргө шилтеме кылуунун ордуна, барак ичиндеги функцияларды ишке киргизүү үчүн колдонулган элементтерде баскыч класстарын колдонууда (мисалы, мазмунду жыйыштыруу), бул шилтемелерге role="button"алардын максатын, мисалы, жардамчы технологияларга туура жеткирүү үчүн берилиши керек. экран окурмандары.

Шилтеме

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

Контур баскычтары

кнопкага муктаж, бирок алар алып келген зор фон түстөр эмес? .btn-outline-*Каалаган баскычтагы бардык фондо сүрөттөрдү жана түстөрдү алып салуу үчүн демейки өзгөрткүч класстарды класстарга алмаштырыңыз .

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>

Кээ бир баскычтардын стилдери салыштырмалуу ачык түстү колдонушат жана жетиштүү контрастка ээ болуу үчүн караңгы фондо гана колдонулушу керек.

Өлчөмдөрү

Чоңураак же кичине баскычтарды жактырасызбы? Кошумча .btn-lgже .btn-smкошумча өлчөмдөр үчүн.

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>

Сиз CSS өзгөрмөлөрү менен өзүңүздүн ыңгайлаштырылган өлчөмүңүздү жылдырсаңыз болот:

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>

Өчүрүлгөн абал

Кайсы бир элементке disabledлогикалык атрибутун кошуу менен баскычтарды жигердүү кылбаңыз. <button>Өчүрүлгөн баскычтар pointer-events: noneколдонулуп, кыймылдуу жана активдүү абалдардын ишке киришине жол бербейт.

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>

Элементти колдонгон өчүрүлгөн баскычтар <a>бир аз башкачараак иштешет:

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

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

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>

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

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

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

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>

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

Биздин дисплей жана боштук утилиталарынын аралашмасы менен Bootstrap 4дегидей толук кеңдиктеги “бөгөттөө баскычтарынын” жооп берүүчү стектерин түзүңүз. Белгилүү класстардын баскычтарынын ордуна утилиталарды колдонуу менен, биз аралыкты, тегиздөөнү жана жооп берүүчү жүрүм-турумду көбүрөөк көзөмөлдөйбүз.

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>

Бул жерде биз классты алмаштырган mdүзгүлтүккө чейин вертикалдуу тизилген баскычтардан баштап жооп берүүчү вариацияны түзүп , утилитаны жокко чыгарабыз . Алардын өзгөрүшүн көрүү үчүн браузериңиздин өлчөмүн өзгөртүңүз..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>

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

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

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>

Button плагин

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

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

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

data-bs-toggle="button"баскычтын activeабалын которуу үчүн кошуу . Эгер баскычты алдын ала которуштуруп жатсаңыз, .activeклассты кол менен aria-pressed="true" кошуп, анын жардамчы технологияларга туура жеткирилишин камсыз кылышыңыз керек.

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>

Шилтемени которуштуруу Активдүү которуштуруу шилтемеси Өчүрүлгөн шилтеме

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>

Методдор

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

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

Метод	Description
`dispose`	Элементтин баскычын жок кылат. (DOM элементинде сакталган маалыматтарды жок кылат)
`getInstance`	DOM элементине байланышкан баскычтын инстанциясын алууга мүмкүндүк берген статикалык ыкма, сиз аны төмөнкүдөй колдоно аласыз: `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	Статикалык ыкма, ал DOM элементине байланышкан баскычтын инстанциясын кайтарат же ал инициализацияланбаган учурда жаңысын түзөт. Сиз аны төмөнкүдөй колдоно аласыз: `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	Басуу абалын которуштуруу. Баскычка ал иштетилгендей көрүнүштү берет.

Мисалы, бардык баскычтарды которуштуруу үчүн

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

CSS

Өзгөрмөлөр

v5.2.0 кошулган

Bootstrap өнүгүп жаткан CSS өзгөрмөлөрүнүн бир бөлүгү катары, баскычтар эми .btnреалдуу убакыт режиминде жакшыртылган ыңгайлаштыруу үчүн жергиликтүү CSS өзгөрмөлөрүн колдонушат. CSS өзгөрмөлөрүнүн маанилери Sass аркылуу коюлат, ошондуктан Sass ыңгайлаштыруу дагы деле колдоого алынат.

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

Ар бир өзгөрткүч класс биздин , , жана аралашмалар .btn-*менен кошумча CSS эрежелерин азайтуу үчүн тиешелүү CSS өзгөрмөлөрүн жаңылайт .button-variant()button-outline-variant()button-size()

.btn-*Бул жерде Bootstrapтин CSS өзгөрмөлөрүн өзүбүздүн CSS жана Sass өзгөрмөлөрүнүн аралашмасы менен кайра дайындоо аркылуу биздин документтерибизге уникалдуу баскычтар үчүн жасагандай, ыңгайлаштырылган өзгөрткүч классын куруунун мисалы келтирилген .

.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 өзгөрмөлөрү

$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 аралашмасы

Баскычтар үчүн үч микс бар: баскыч жана баскыч контурунун варианты аралашмалары (экөө тең ге негизделген $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)
) {
  --#{$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 циклдери

Баскычтын варианттары (кадимки жана контур баскычтары үчүн $theme-colors) 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);
  }
}