مرکزی مواد پر جائیں۔ ڈاکس نیویگیشن پر جائیں۔
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"، ان لنکس پر ایک وصف بھی شامل 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-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);
  }
}