in English

Копчиња

Користете ги прилагодените стилови на копчиња на 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копчиња за прицврстување.
Оневозможените копчиња треба да го содржат 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>

Забелешка за функционалноста на врската

Класата .disabledкористи pointer-events: noneза да се обиде да ја оневозможи функционалноста на врската на <a>s, но тоа својство на CSS сè уште не е стандардизирано. Дополнително, дури и во прелистувачите што поддржуваат pointer-events: none, навигацијата со тастатура останува непроменета, што значи дека корисниците на тастатура со вид и корисниците на помошни технологии сè уште ќе можат да ги активираат овие врски. Така, за да бидете безбедни, покрај aria-disabled="true", вклучете и tabindex="-1"атрибут на овие врски за да ги спречите да добиваат фокус на тастатурата и користете приспособен JavaScript за целосно да ја оневозможите нивната функционалност.

Копчиња за блокирање

Создадете респонзивни купишта на „копчиња за блокирање“ со целосна ширина како оние во 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);
  }
}