Товчлуурууд

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>

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

Аливаа элементэд disabledboolean шинж чанарыг нэмж товчлууруудыг идэвхгүй болгох. <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Зангууны товчлуур дээрх бүгдийг идэвхгүй болгохын тулд ирээдүйд ээлтэй зарим загваруудыг оруулсан болно .
Идэвхгүй болсон товчлуурууд нь aria-disabled="true"туслах технологийн элементийн төлөвийг харуулах шинж чанарыг агуулсан байх ёстой.

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

<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>

Холбоосын үйл ажиллагааны анхааруулга

Анги .disabledнь s- pointer-events: noneийн холбоосын функцийг идэвхгүй болгохыг оролддог <a>боловч CSS-ийн шинж чанар хараахан стандартчилагдаагүй байна. Нэмж дурдахад, дэмждэг хөтчүүдэд ч pointer-events: noneгарны навигаци нөлөөлөлгүй хэвээр байгаа бөгөөд энэ нь хараатай гар хэрэглэгчид болон туслах технологи ашигладаг хүмүүс эдгээр холбоосыг идэвхжүүлэх боломжтой хэвээр байх болно. Тиймээс аюулгүй байхын тулд -аас гадна гарын фокусыг хүлээн авахаас сэргийлэхийн тулд эдгээр холбоосууд дээр шинж чанаруудыг оруулаад, тэдгээрийн функцийг бүхэлд нь идэвхгүй болгохын тулд захиалгат JavaScript ашиглана уу aria-disabled="true".tabindex="-1"

Блок товчлуурууд

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 href="#" class="btn btn-primary disabled" tabindex="-1" 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);
  }
}