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