බොත්තම්
බහු ප්රමාණ, ප්රාන්ත සහ තවත් දේ සඳහා සහය ඇතිව ආකෘති, සංවාද සහ තවත් දේවල ක්රියා සඳහා 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
පන්තිය බොත්තමට එක් කළ හැක. $btn-white-space: nowrap
Sass හි, ඔබට එක් එක් බොත්තම සඳහා පෙළ එතීම අක්රිය කිරීමට සැකසිය හැක .
බොත්තම් ටැග්
පන්ති නිර්මාණය කර ඇත්තේ මූලද්රව්යය .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
නැංගුරම් බොත්තම් සියල්ල අක්රිය කිරීමට සමහර අනාගත හිතකාමී මෝස්තර ඇතුළත් වේ .- භාවිතා කරන අක්රිය බොත්තම් සහායක තාක්ෂණයන්ට මූලද්රව්යයේ තත්ත්වය දැක්වීමට ගුණාංගය
<a>
ඇතුළත් කළ යුතුය .aria-disabled="true"
- භාවිතා කරන අබල බොත්තම් ගුණාංගය ඇතුළත්
<a>
නොවිය යුතුය .href
<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
සබැඳි ක්රියාකාරී අවවාදය
href
ඔබට උපලක්ෂණ අක්රිය සබැඳියක් මත තබා ගත යුතු අවස්ථා ආවරණය කිරීම සඳහා, s හි සබැඳි ක්රියාකාරීත්වය අක්රිය කිරීමට .disabled
පන්තිය භාවිතා කරයි . මෙම CSS දේපල තවමත් HTML සඳහා ප්රමිතිගත කර නොමැති බව සලකන්න, නමුත් සියලුම නවීන බ්රව්සර් එයට සහය දක්වයි. ඊට අමතරව, සහාය දක්වන බ්රවුසරවල පවා , යතුරුපුවරු සංචාලනය බල නොපායි, එයින් අදහස් කරන්නේ දෘෂ්යමාන යතුරුපුවරු භාවිතා කරන්නන්ට සහ සහායක තාක්ෂණයන් භාවිතා කරන්නන්ට තවමත් මෙම සබැඳි සක්රිය කිරීමට හැකි වනු ඇති බවයි. ආරක්ෂිත වීමට, ට අමතරව , මෙම සබැඳි වලට යතුරුපුවරු නාභිගත වීම වැළැක්වීමට උපලක්ෂණයක් ද ඇතුළත් කරන්න , සහ ඒවායේ ක්රියාකාරීත්වය සම්පූර්ණයෙන්ම අක්රිය කිරීමට අභිරුචි JavaScript භාවිතා කරන්න.pointer-events: none
<a>
pointer-events: none
aria-disabled="true"
tabindex="-1"
<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>
බොත්තම් අවහිර කරන්න
අපගේ සංදර්ශකය සහ ගැප් උපයෝගිතා මිශ්රණයක් සමඟ 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>
තිරස් වූ විට බොත්තම් පෙළගැස්ම සකස් කිරීමට අමතර උපයෝගිතා භාවිතා කළ හැක. මෙන්න අපි අපගේ පෙර ප්රතිචාරාත්මක උදාහරණය ගෙන බොත්තම් තව දුරටත් ගොඩගැසී නොමැති විට ඒවා දකුණට පෙළගස්වා ගැනීමට බොත්තම මත flex උපයෝගිතා කිහිපයක් සහ ආන්තික උපයෝගීතාවයක් එක් කර ඇත.
<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 class="btn btn-primary disabled" 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);
}
}