بٹن
بوٹسٹریپ کے حسب ضرورت بٹن اسٹائلز کو فارمز، ڈائیلاگز اور مزید میں ایکشن کے لیے استعمال کریں جس میں ایک سے زیادہ سائز، اسٹیٹس، اور مزید کے لیے سپورٹ ہے۔
مثالیں
بوٹسٹریپ میں کئی پہلے سے طے شدہ بٹن طرزیں شامل ہیں، جن میں سے ہر ایک اپنے اپنے معنوی مقصد کو پورا کرتا ہے، جس میں مزید کنٹرول کے لیے کچھ اضافی چیزیں ڈالی جاتی ہیں۔
<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>
sdisabled
انتساب کی حمایت نہیں کرتا ہے، لہذا آپ کو.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);
}
}