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

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

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

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

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

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

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

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 нұсқасына қосылды

.btnBootstrap-тың дамып келе жатқан CSS айнымалы мәндерінің бір бөлігі ретінде түймелер енді нақты уақытта жақсартылған теңшеу үшін жергілікті 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);
  }
}