Товчлуурууд

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>

Идэвхгүй байдал

Аливаа элементэд disabledboolean шинж чанарыг нэмж товчлууруудыг идэвхгүй болгох. <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гарны навигаци нөлөөлөлгүй хэвээр байгаа бөгөөд энэ нь хараатай гар хэрэглэгчид болон туслах технологи ашигладаг хүмүүс эдгээр холбоосыг идэвхжүүлэх боломжтой хэвээр байх болно. Тиймээс аюулгүй байхын тулд -аас гадна гарын фокусыг хүлээн авахаас сэргийлэхийн тулд эдгээр холбоосууд дээр шинж чанаруудыг оруулаад, тэдгээрийн функцийг бүхэлд нь идэвхгүй болгохын тулд захиалгат JavaScript ашиглана уу aria-disabled="true".tabindex="-1"

Үндсэн холбоос Холбоос

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

Хувьсагч

5.2.0 хувилбар дээр нэмсэн

Bootstrap-ийн хөгжиж буй CSS хувьсагчийн аргын нэг хэсэг болгон товчлуурууд нь одоо .btnбодит цагийн сайжруулсан тохиргоонд зориулж орон нутгийн 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%;

Сасс холимог

Товчнуудад зориулсан гурван холимог байдаг: товчлуур болон товчлуурын тойм хувилбарын холимог (хоёулаа дээр суурилсан $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};
}

Сасс гогцоонууд

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