أزرار

استخدم أنماط أزرار 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>

يمكنك حتى تغيير الحجم المخصص الخاص بك باستخدام متغيرات CSS:

لغة البرمجة

<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على ، مما يمنع تشغيل حالة التمرير والحالة النشطة.

لغة البرمجة

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

الارتباط الأساسي نهاية لهذه الغاية

لغة البرمجة

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

الارتباط الأساسي نهاية لهذه الغاية

لغة البرمجة

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

أزرار الحظر

قم بإنشاء مجموعات متجاوبة من "أزرار الحظر" ذات العرض الكامل مثل تلك الموجودة في 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">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>

تبديل الارتباط رابط تبديل نشط رابط تبديل معطل

لغة البرمجة

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

طُرق

يمكنك إنشاء مثيل زر باستخدام مُنشئ الزر ، على سبيل المثال:

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

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

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

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

CSS

المتغيرات

تمت الإضافة في الإصدار 5.2.0

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

  --#{$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: #{$body-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 الإضافية باستخدام button-variant()و button-outline-variant()و button-size()mixins الخاصة بنا.

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

.btn-bd-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet);
  --bs-btn-border-color: var(--bd-violet);
  --bs-btn-border-radius: .5rem;
  --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%)};
}

متغيرات ساس

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

// 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)
) {
  --#{$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};
}

@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;
}

@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};
}

حلقات ساس

تستخدم متغيرات الأزرار (للأزرار العادية والمخططة) المزيج الخاص بها مع $theme-colorsخريطتنا لإنشاء فئات المعدل في 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);
  }
}