الأزرار (Buttons)

استخدم أنماط الأزرار المخصصة في الـ Bootstrap للإجراءات في النماذج، والحوارات، وغيرها مع دعم لأحجام وحالات متعددة وأكثر.

في هذه الصفحة

الفئة الأساسية (Base class)

Bootstrap لديه فئة أساسية .btn تقوم بإعداد الأنماط الأساسية مثل الهامش الداخلي (padding) ومحاذاة المحتوى. بشكل افتراضي، تمتلك عناصر التحكم .btn حدوداً ولون خلفية شفافين، وتفتقر إلى أي أنماط صريحة للتركيز (focus) أو التحويم (hover).

html

<button type="button" class="btn">Base class</button>

الفئة .btn مخصصة للاستخدام بالاقتران مع متغيرات الأزرار الخاصة بنا، أو لتكون أساساً لأنماطك المخصصة.

إذا كنت تستخدم الفئة .btn بمفردها، فتذكر على الأقل تحديد بعض أنماط :focus و/أو :focus-visible الصريحة.

المتغيرات (Variants)

يتضمن Bootstrap عدة متغيرات للأزرار، كل منها يخدم غرضاً دلالياً خاصاً به، مع بعض الإضافات لمزيد من التحكم.

html

<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>

نصيحة حول إمكانية الوصول: استخدام اللون لإضافة معنى يوفر إشارة بصرية فقط، والتي لن يتم نقلها إلى مستخدمي التقنيات المساعدة مثل قارئات الشاشة. يرجى التأكد من أن المعنى واضح من المحتوى نفسه (على سبيل المثال، النص المرئي مع كافٍ تباين الألوان) أو مدرج عبر وسائل بديلة، مثل نص إضافي مخفي باستخدام الفئة (class) .visually-hidden.

تعطيل التفاف النص

إذا كنت لا تريد أن يلتف نص الزر، يمكنك إضافة الفئة .text-nowrap إلى الزر. في Sass، يمكنك تعيين $btn-white-space: nowrap لتعطيل التفاف النص لكل زر.

وسوم الأزرار (tags)

الفئات .btn مصممة للاستخدام مع عنصر <button>. ومع ذلك، يمكنك أيضاً استخدام هذه الفئات على عناصر <a> أو <input> (على الرغم من أن بعض المتصفحات قد تطبق رندرة مختلفة قليلاً).

عند استخدام فئات الأزرار على عناصر <a> التي تُستخدم لتفعيل وظائف داخل الصفحة (مثل طي المحتوى)، بدلاً من الربط بصفحات جديدة أو أقسام داخل الصفحة الحالية، يجب إعطاء هذه الروابط role="button" لنقل غرضها بشكل مناسب إلى التقنيات المساعدة مثل قارئات الشاشة.

Link

html

<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-* لإزالة جميع صور وألوان الخلفية من أي زر.

html

<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 للحصول على أحجام إضافية.

html

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

html

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

يمكنك حتى إنشاء أحجام مخصصة باستخدام متغيرات CSS:

html

<button type="button" class="btn btn-primary"
        style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
  Custom button
</button>

الحالة المعطلة

اجعل الأزرار تبدو غير نشطة عن طريق إضافة السمة المنطقية disabled إلى أي عنصر <button>. تمتلك الأزرار المعطلة خاصية pointer-events: none مطبقة عليها، مما يمنع تفعيل حالات التحويم (hover) والحالات النشطة (active).

html

<button type="button" class="btn btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary" disabled>Button</button>
<button type="button" class="btn btn-outline-primary" disabled>Primary button</button>
<button type="button" class="btn btn-outline-secondary" disabled>Button</button>

تتصرف الأزرار المعطلة التي تستخدم عنصر <a> بشكل مختلف قليلاً:

عناصر <a> لا تدعم سمة disabled، لذا يجب إضافة الفئة .disabled لجعلها تظهر بصرياً كمعطلة.
تم تضمين بعض الأنماط المتوافقة مع المستقبل لتعطيل جميع pointer-events على أزرار الروابط.
يجب أن تتضمن الأزرار المعطلة التي تستخدم <a> سمة aria-disabled="true" للإشارة إلى حالة العنصر للتقنيات المساعدة.
الأزرار المعطلة التي تستخدم <a> يجب ألا تتضمن سمة href.

Primary link Link

html

<a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary disabled" role="button" aria-disabled="true">Link</a>

تحذير حول وظيفة الروابط

لتغطية الحالات التي يتعين عليك فيها الاحتفاظ بسمة href في رابط معطل، تستخدم الفئة .disabled خاصية pointer-events: none لمحاولة تعطيل وظيفة الرابط لعناصر <a>. لاحظ أن خاصية CSS هذه ليست معيارية بعد لـ HTML، ولكن جميع المتصفحات الحديثة تدعمها. بالإضافة إلى ذلك، حتى في المتصفحات التي تدعم pointer-events: none، تظل التنقلات عبر لوحة المفاتيح غير متأثرة، مما يعني أن مستخدمي لوحة المفاتيح المبصرين ومستخدمي التقنيات المساعدة سيظلون قادرين على تفعيل هذه الروابط. لذا، ومن أجل الأمان، بالإضافة إلى aria-disabled="true"، قم أيضاً بتضمين سمة tabindex="-1" في هذه الروابط لمنعها من استقبال التركيز عبر لوحة المفاتيح، واستخدم JavaScript مخصصاً لتعطيل وظائفها تماماً.

Primary link Link

html

<a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

الأزرار الممتدة (Block buttons)

أنشئ مجموعات متوافقة مع الشاشات (Responsive) من "الأزرار الممتدة" كاملة العرض مثل تلك الموجودة في Bootstrap 4 باستخدام مزيج من أدوات العرض والفراغات (gap utilities) الخاصة بنا. من خلال استخدام الأدوات بدلاً من الفئات الخاصة بالأزرار، لدينا تحكم أكبر بكثير في التباعد والمحاذاة والسلوكيات المتوافقة مع الشاشات.

html

<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. قم بتغيير حجم متصفحك لرؤيتها تتغير.

html

<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 أيضاً.

html

<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>

يمكن استخدام أدوات إضافية لضبط محاذاة الأزرار عندما تكون أفقية. هنا أخذنا مثالنا السابق المتوافق مع الشاشات وأضفنا بعض أدوات flex وأداة هامش على الزر لمحاذاة الأزرار إلى اليمين عندما لا تكون مكدسة.

html

<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>

إضافة (plugin) الأزرار

تتيح لك إضافة الأزرار إنشاء أزرار تبديل بسيطة (on/off).

بصرياً، هذه الأزرار المبدلة مطابقة لـ أزرار تبديل مربعات الاختيار. ومع ذلك، يتم نقلها بشكل مختلف بواسطة التقنيات المساعدة: سيتم الإعلان عن مبدلات مربعات الاختيار بواسطة قارئات الشاشة على أنها "محددة"/ "غير محددة" (لأنها، على الرغم من مظهرها، لا تزال في الأساس مربعات اختيار)، بينما سيتم الإعلان عن أزرار التبديل هذه على أنها "زر"/ "زر مضغوط". سيعتمد الاختيار بين هذين النهجين على نوع التبديل الذي تقوم بإنشائه، وما إذا كان التبديل سيكون منطقياً للمستخدمين عند الإعلان عنه كمربع اختيار أو كزر فعلي.

حالات التبديل

أضف data-bs-toggle="button" لتبديل حالة الزر النشطة active. إذا كنت تقوم بتبديل زر مسبقاً، يجب عليك إضافة الفئة .active يدوياً و aria-pressed="true" لضمان نقلها بشكل مناسب إلى التقنيات المساعدة.

html

<p class="d-inline-flex gap-1">
  <button type="button" class="btn" data-bs-toggle="button">Toggle button</button>
  <button type="button" class="btn active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
  <button type="button" class="btn" disabled data-bs-toggle="button">Disabled toggle button</button>
</p>
<p class="d-inline-flex gap-1">
  <button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
  <button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
  <button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>
</p>

Toggle link Active toggle link Disabled toggle link

html

<p class="d-inline-flex gap-1">
  <a href="#" class="btn" role="button" data-bs-toggle="button">Toggle link</a>
  <a href="#" class="btn active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
  <a class="btn disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
</p>
<p class="d-inline-flex gap-1">
  <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>
</p>

الطرق، الأساليب (Methods)

يمكنك إنشاء نسخة من الزر باستخدام منشئ الأزرار (button constructor)، على سبيل المثال:

const bsButton = new bootstrap.Button('#myButton')

الأسلوب	الوصف
`dispose`	يقوم بتدمير زر العنصر. (يزيل البيانات المخزنة في عنصر الـ DOM)
`getInstance`	طريقة ثابتة (Static method) تتيح لك الحصول على نسخة الزر المرتبطة بعنصر DOM، يمكنك استخدامها على النحو التالي: `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	طريقة ثابتة (Static method) تعيد نسخة زر مرتبطة بعنصر DOM أو تنشئ واحدة جديدة في حال لم يتم تهيئتها. يمكنك استخدامها على النحو التالي: `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	يقوم بتبديل حالة الضغط. يعطي الزر مظهراً بأنه قد تم تفعيله.

على سبيل المثال، لتبديل جميع الأزرار

document.querySelectorAll('.btn').forEach(buttonElement => {
  const button = bootstrap.Button.getOrCreateInstance(buttonElement)
  button.toggle()
})

الـ (CSS)

المتغيرات (Variables)

تمت الإضافة في الإصدار v5.2.0

كجزء من نهج متغيرات الـ CSS المتطور في الـ Bootstrap، تستخدم الأزرار الآن متغيرات CSS محلية على .btn لتحسين التخصيص في الوقت الفعلي. يتم تعيين قيم متغيرات الـ CSS عبر الـ Sass، لذا فإن تخصيص الـ Sass لا يزال مدعوماً أيضاً.

scss/_buttons.scss

--#{$prefix}btn-padding-x: #{$btn-padding-x};
--#{$prefix}btn-padding-y: #{$btn-padding-y};
--#{$prefix}btn-font-family: #{$btn-font-family};
@include rfs($btn-font-size, --#{$prefix}btn-font-size);
--#{$prefix}btn-font-weight: #{$btn-font-weight};
--#{$prefix}btn-line-height: #{$btn-line-height};
--#{$prefix}btn-color: #{$btn-color};
--#{$prefix}btn-bg: transparent;
--#{$prefix}btn-border-width: #{$btn-border-width};
--#{$prefix}btn-border-color: transparent;
--#{$prefix}btn-border-radius: #{$btn-border-radius};
--#{$prefix}btn-hover-border-color: transparent;
--#{$prefix}btn-box-shadow: #{$btn-box-shadow};
--#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
--#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);

تقوم كل فئة معدلة .btn-* بتحديث متغيرات CSS المناسبة لتقليل قواعد CSS الإضافية باستخدام المزجات (mixins) button-variant() و button-outline-variant() و button-size().

إليك مثال على بناء فئة معدلة .btn-* مخصصة كما نفعل للأزرار الفريدة في مستنداتنا عن طريق إعادة تعيين متغيرات CSS الخاصة بالـ Bootstrap بمزيج من متغيرات CSS والـ Sass الخاصة بنا.

site/src/scss/_buttons.scss

.btn-bd-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet-bg);
  --bs-btn-border-color: var(--bd-violet-bg);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
}

متغيرات الـ (Sass)

scss/_variables.scss

$btn-color:                   var(--#{$prefix}body-color);
$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:              var(--#{$prefix}link-color);
$btn-link-hover-color:        var(--#{$prefix}link-hover-color);
$btn-link-disabled-color:     $gray-600;
$btn-link-focus-shadow-rgb:   to-rgb(mix(color-contrast($link-color), $link-color, 15%));

// Allows for customizing button radius independently from global border radius
$btn-border-radius:           var(--#{$prefix}border-radius);
$btn-border-radius-sm:        var(--#{$prefix}border-radius-sm);
$btn-border-radius-lg:        var(--#{$prefix}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%;

دمج/مزج الـ (Sass mixins)

هناك ثلاث مزجات (mixins) للأزرار: مزجات الأزرار ومزجات الأزرار ذات الحدود المفرغة (وكلاهما يعتمد على $theme-colors)، بالإضافة إلى مزج لحجم الزر.

scss/mixins/_buttons.scss

@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)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-bg: #{$background};
  --#{$prefix}btn-border-color: #{$border};
  --#{$prefix}btn-hover-color: #{$hover-color};
  --#{$prefix}btn-hover-bg: #{$hover-background};
  --#{$prefix}btn-hover-border-color: #{$hover-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$disabled-color};
  --#{$prefix}btn-disabled-bg: #{$disabled-background};
  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
}

scss/mixins/_buttons.scss

@mixin button-outline-variant(
  $color,
  $color-hover: color-contrast($color),
  $active-background: $color,
  $active-border: $color,
  $active-color: color-contrast($active-background)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-border-color: #{$color};
  --#{$prefix}btn-hover-color: #{$color-hover};
  --#{$prefix}btn-hover-bg: #{$active-background};
  --#{$prefix}btn-hover-border-color: #{$active-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$color};
  --#{$prefix}btn-disabled-bg: transparent;
  --#{$prefix}btn-disabled-border-color: #{$color};
  --#{$prefix}gradient: none;
}

scss/mixins/_buttons.scss

@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  --#{$prefix}btn-padding-y: #{$padding-y};
  --#{$prefix}btn-padding-x: #{$padding-x};
  @include rfs($font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-border-radius: #{$border-radius};
}

حلقات الـ (Sass loops)

تستخدم متغيرات الأزرار (سواء للأزرار العادية أو المفرغة) المزجات (mixins) الخاصة بها مع الخريطة (map) $theme-colors لإنشاء الفئات (classes) المعدلة في scss/_buttons.scss.

scss/_buttons.scss

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @if $color == "light" {
      @include button-variant(
        $value,
        $value,
        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
        $active-background: shade-color($value, $btn-active-bg-shade-amount),
        $active-border: shade-color($value, $btn-active-border-shade-amount)
      );
    } @else if $color == "dark" {
      @include button-variant(
        $value,
        $value,
        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
        $active-background: tint-color($value, $btn-active-bg-tint-amount),
        $active-border: tint-color($value, $btn-active-border-tint-amount)
      );
    } @else {
      @include button-variant($value, $value);
    }
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}