أزرار

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

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

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

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg 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 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>

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

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

تبديل الدول

إضافة 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>

طُرق