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एंकर बटनहरूमा सबै असक्षम पार्न केही भविष्य-अनुकूल शैलीहरू समावेश गरिएका छन् ।
असक्षम गरिएका बटनहरूले 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"एउटा विशेषता पनि समावेश गर्नुहोस् , र तिनीहरूको कार्यक्षमता पूर्ण रूपमा असक्षम गर्न अनुकूलन JavaScript प्रयोग गर्नुहोस्।tabindex="-1"

ब्लक बटनहरू

हाम्रो डिस्प्ले र ग्याप उपयोगिताहरूको मिश्रणको साथ 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);
  }
}