أزرار

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

إيصال المعنى للتقنيات المساعدة

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

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

إذا كنت لا تريد التفاف نص الزر ، يمكنك إضافة .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>

قم بإنشاء أزرار مستوى الكتلة — تلك التي تمتد بالعرض الكامل لأحد الوالدين — عن طريق الإضافة .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

الحالة النشطة

ستظهر الأزرار مضغوطة (بخلفية داكنة وحد أغمق وظل داخلي) عندما تكون نشطة. ليست هناك حاجة لإضافة فصل دراسي إلى <button>s لأنهم يستخدمون فئة زائفة . ومع ذلك ، لا يزال بإمكانك فرض نفس المظهر النشط مع .active(وتضمين aria-pressed="true"السمة) إذا احتجت إلى تكرار الحالة برمجيًا.

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

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

دولة المعوقين

اجعل الأزرار تبدو غير نشطة عن طريق إضافة disabledالسمة المنطقية إلى أي <button>عنصر.

<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، يظل التنقل باستخدام لوحة المفاتيح غير متأثر ، مما يعني أن مستخدمي لوحة المفاتيح المبصرين ومستخدمي التقنيات المساعدة سيظلون قادرين على تنشيط هذه الروابط. حتى تكون آمنًا ، أضف tabindex="-1"سمة على هذه الروابط (لمنعها من تلقي تركيز لوحة المفاتيح) واستخدم JavaScript مخصصًا لتعطيل وظائفها.

المكوِّن الإضافي للزر

أنجز المزيد باستخدام الأزرار. حالات زر التحكم أو إنشاء مجموعات من الأزرار لمزيد من المكونات مثل أشرطة الأدوات.

تبديل الدول

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

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

مربع الاختيار وأزرار الاختيار

يمكن تطبيق أنماط Bootstrap .buttonعلى عناصر أخرى ، مثل <label>s ، لتوفير مربع اختيار أو زر تبديل نمط الاختيار. أضف data-toggle="buttons"إلى .btn-groupالأزرار التي تحتوي على تلك المعدلة لتمكين سلوك التبديل الخاص بهم عبر JavaScript وإضافة .btn-group-toggleنمط <input>s داخل الأزرار الخاصة بك. لاحظ أنه يمكنك إنشاء أزرار تعمل بالطاقة أو مجموعات منها.

يتم تحديث الحالة المحددة لهذه الأزرار فقط عبر clickالحدث الموجود على الزر. إذا كنت تستخدم طريقة أخرى لتحديث الإدخال - على سبيل المثال ، مع <input type="reset">أو عن طريق تطبيق checkedخاصية الإدخال يدويًا - فستحتاج إلى التبديل يدويًا .activeإلى .<label>

لاحظ أن الأزرار المحددة مسبقًا تتطلب منك إضافة .activeالفئة يدويًا إلى المدخلات <label>.

التحقق

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

نشيط مذياع مذياع

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

طُرق

طريقة	وصف
`$().button('toggle')`	يبدل حالة الدفع. يعطي الزر المظهر الذي تم تنشيطه.
`$().button('dispose')`	يدمر زر عنصر.