أزرار
استخدم أنماط أزرار Bootstrap المخصصة للإجراءات في النماذج ومربعات الحوار والمزيد مع دعم لأحجام وحالات متعددة والمزيد.
أمثلة
يتضمن Bootstrap العديد من أنماط الأزرار المحددة مسبقًا ، كل منها يخدم غرضه الدلالي الخاص ، مع عدد قليل من الإضافات لمزيد من التحكم.
<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
على أزرار التثبيت. - يجب أن تتضمن الأزرار المعطلة
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
الفئة pointer-events: none
لمحاولة تعطيل وظيفة الارتباط الخاصة بـ <a>
s ، لكن خاصية CSS هذه لم يتم توحيدها بعد. بالإضافة إلى ذلك ، حتى في المتصفحات التي تدعم pointer-events: none
، يظل التنقل باستخدام لوحة المفاتيح غير متأثر ، مما يعني أن مستخدمي لوحة المفاتيح المبصرين ومستخدمي التقنيات المساعدة سيظلون قادرين على تنشيط هذه الروابط. حتى تكون آمنًا ، بالإضافة إلى ذلك aria-disabled="true"
، قم أيضًا بتضمين tabindex="-1"
سمة على هذه الروابط لمنعها من تلقي تركيز لوحة المفاتيح ، واستخدام JavaScript مخصص لتعطيل وظائفها تمامًا.
أزرار الحظر
قم بإنشاء مجموعات متجاوبة من "أزرار الحظر" ذات العرض الكامل مثل تلك الموجودة في 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 |
طريقة Static تُرجع مثيل زر مرتبطًا بعنصر 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);
}
}