in English

பொத்தான்கள்

பல அளவுகள், நிலைகள் மற்றும் பலவற்றிற்கான ஆதரவுடன் படிவங்கள், உரையாடல்கள் மற்றும் பலவற்றில் செயல்களுக்கு பூட்ஸ்டார்ப்பின் தனிப்பயன் பொத்தான் பாணிகளைப் பயன்படுத்தவும்.

இந்தப் பக்கத்தில்

எடுத்துக்காட்டுகள்

பூட்ஸ்டார்ப் பல முன் வரையறுக்கப்பட்ட பொத்தான் பாணிகளை உள்ளடக்கியது, ஒவ்வொன்றும் அதன் சொந்த சொற்பொருள் நோக்கத்திற்காக சேவை செய்கின்றன, மேலும் கட்டுப்பாட்டிற்காக சில கூடுதல் அம்சங்கள் உள்ளன.

<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>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முடக்கப்பட்ட இணைப்பில் நீங்கள் பண்புக்கூறை வைத்திருக்க வேண்டிய நிகழ்வுகளை மறைக்க , .disabledவகுப்பு s pointer-events: noneஇன் இணைப்பு செயல்பாட்டை முடக்க முயற்சிக்கிறது . <a>இந்த CSS பண்பு இன்னும் HTML க்கு தரப்படுத்தப்படவில்லை, ஆனால் அனைத்து நவீன உலாவிகளும் இதை ஆதரிக்கின்றன. கூடுதலாக, ஆதரிக்கும் உலாவிகளில் கூட pointer-events: none, விசைப்பலகை வழிசெலுத்தல் பாதிக்கப்படாமல் உள்ளது, அதாவது பார்வையுள்ள விசைப்பலகை பயனர்கள் மற்றும் உதவி தொழில்நுட்பங்களைப் பயன்படுத்துபவர்கள் இந்த இணைப்புகளை இன்னும் செயல்படுத்த முடியும். எனவே பாதுகாப்பாக இருக்க, கூடுதலாக, aria-disabled="true"இந்த tabindex="-1"இணைப்புகளில் விசைப்பலகை ஃபோகஸ் பெறுவதைத் தடுக்க, அவற்றின் செயல்பாட்டை முழுவதுமாக முடக்க தனிப்பயன் JavaScript ஐப் பயன்படுத்தவும்.

முதன்மை இணைப்பு இணைப்பு

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

தடுப்பு பொத்தான்கள்

எங்கள் காட்சி மற்றும் இடைவெளி பயன்பாடுகளின் கலவையுடன் பூட்ஸ்டார்ப் 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 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);
  }
}