ღილაკები
გამოიყენეთ 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);
}
}