Түймелер

Бірнеше өлшемдерге, күйлерге және т.б. қолдауы бар пішіндердегі, диалогтардағы және т.б. әрекеттер үшін 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сыныпты түймеге қосуға болады. $btn-white-space: nowrapSass қолданбасында әрбір түйме үшін мәтінді орауды өшіруді орнатуға болады.

Түйме белгілері

Сыныптар элементпен .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>disableds атрибутқа қолдау көрсетпейді , сондықтан .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"Қауіпсіз болу үшін , қосымша, 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-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>

Түйме плагині

Түймешік плагині қарапайым қосу/өшіру түймелерін жасауға мүмкіндік береді.

Көрнекі түрде бұл ауыстырып-қосқыш түймешіктер құсбелгі ауыстырып-қосқыш түймелерімен бірдей . Дегенмен, олар көмекші технологиялар арқылы басқаша жеткізіледі: құсбелгіні ауыстырып-қосқыштарды экраннан оқу бағдарламалары «белгіленген»/«белгіленбеген» деп хабарлайды (өйткені сыртқы түріне қарамастан, олар әлі де құсбелгілер болып табылады), ал бұл ауыстырып-қосқыш түймелер ретінде жарияланады. «түйме»/«түйме басылды». Осы екі тәсілдің арасындағы таңдау сіз жасап жатқан ауыстырып-қосқыштың түріне және құсбелгі немесе нақты түйме ретінде жарияланған кезде ауыстырып-қосқыштың пайдаланушыларға мағынасы бар-жоғына байланысты болады.

Күйлерді ауыстырып қосу

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