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>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એવા કિસ્સાઓને આવરી લેવા માટે જ્યાં તમારે અક્ષમ કરેલ લિંક પર વિશેષતા રાખવાની હોય , .disabledવર્ગ s pointer-events: noneની લિંક કાર્યક્ષમતાને અક્ષમ કરવાનો પ્રયાસ કરવા માટે ઉપયોગ કરે છે <a>. નોંધ કરો કે આ CSS ગુણધર્મ હજુ સુધી HTML માટે પ્રમાણિત નથી, પરંતુ તમામ આધુનિક બ્રાઉઝર તેને સમર્થન આપે છે. વધુમાં, બ્રાઉઝર્સમાં પણ જે સપોર્ટ કરે છે pointer-events: none, કીબોર્ડ નેવિગેશન અપ્રભાવિત રહે છે, મતલબ કે દેખાતા કીબોર્ડ વપરાશકર્તાઓ અને સહાયક તકનીકોના વપરાશકર્તાઓ હજી પણ આ લિંક્સને સક્રિય કરવામાં સક્ષમ હશે. તેથી સલામત રહેવા માટે, ઉપરાંત , કીબોર્ડ ફોકસ મેળવવાથી રોકવા માટે આ લિંક્સ પર aria-disabled="true"એક વિશેષતા પણ શામેલ કરો અને તેમની કાર્યક્ષમતાને સંપૂર્ણ રીતે અક્ષમ કરવા માટે કસ્ટમ JavaScript નો ઉપયોગ કરો.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>

બ્લોક બટનો

અમારા ડિસ્પ્લે અને ગેપ યુટિલિટીઝના મિશ્રણ સાથે બુટસ્ટ્રેપ 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 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);
  }
}