გადადით მთავარ შინაარსზე დოკუმენტების ნავიგაციაზე გადასვლა
in English

ღილაკები

გამოიყენეთ 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წამყვან ღილაკებზე ყველაფრის გასათიშად.
  • გამორთული ღილაკები უნდა შეიცავდეს 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, კლავიატურის ნავიგაცია უცვლელი რჩება, რაც იმას ნიშნავს, რომ მხედველობითი კლავიატურის მომხმარებლები და დამხმარე ტექნოლოგიების მომხმარებლები კვლავ შეძლებენ ამ ბმულების გააქტიურებას. ასე რომ, უსაფრთხოდ რომ ვიყოთ, გარდა ამისა aria-disabled="true", ჩართეთ tabindex="-1"ატრიბუტი ამ ბმულებზე, რათა თავიდან აიცილოთ მათ კლავიატურაზე ფოკუსირება და გამოიყენეთ მორგებული JavaScript, რომ საერთოდ გამორთოთ მათი ფუნქციონირება.

დაბლოკვის ღილაკები

შექმენით სრული სიგანის „დაბლოკვის ღილაკების“ საპასუხო დასტაები, როგორიც არის 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 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);
  }
}