in English

Копчиња

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

Примарна врска Врска

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-gridкласата, со што се поништува gap-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>

Приклучок за копчиња

Приклучокот за копчиња ви овозможува да креирате едноставни копчиња за вклучување/исклучување.

Визуелно, овие копчиња за вклучување се идентични со полето за избор копчиња за менување . Сепак, тие се пренесуваат поинаку со помошните технологии: менувачите на полето за избор ќе бидат објавени од читателите на екранот како „проверено“/„непроверено“ (бидејќи, и покрај нивниот изглед, тие во основа сè уште се полиња за избор), додека овие копчиња за вклучување ќе бидат објавени како „копче“/„копче притиснато“. Изборот помеѓу овие два пристапа ќе зависи од типот на менувачот што го креирате и дали преклопувањето ќе има смисла за корисниците кога ќе биде објавено како поле за избор или како вистинско копче.

Вклучи состојби

Додај 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')

Метод	Опис
`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

Како дел од пристапот на еволуирачки CSS променливи на Bootstrap, копчињата сега користат локални CSS променливи .btnза подобрено прилагодување во реално време. Вредностите за променливите 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-*класа на модификатори како што правиме за копчињата единствени за нашите документи со преназначување на CSS променливите на Bootstrap со мешавина од нашите сопствени 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 mixins

Постојат три миксини за копчиња: миксови со варијанти на копчиња и контури (и двете базирани на $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);
  }
}