تخطي إلى المحتوى الرئيسي انتقل إلى ملاحة المستندات
in English

أزرار

استخدم أنماط أزرار 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>لا تدعم s disabledالسمة ، لذا يجب عليك إضافة .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);
  }
}