الأزرار وتنسيقاتها في إطار العمل Bootstrap
تعرَّف على تنسيقات الأزرار المُخصَّصة في إطار العمل Bootstrap بحالاتها وقياساتها المختلفة لتطبيقها على الإجراءات في الاستمارات Forms، ونوافذ الحوار وأكثر.
أمثلة
يتضمَّن إطار العمل Bootstrap تنسيقات متعدِّدة للأزرار، لكلّ منها غرضه الدلالي الخاصّ؛ كما تتوفّر إضافات كثيرة لتحكّم أكبر في التنسيق.
<button type="button" class="btn btn-primary">أوّليّ</button>
<button type="button" class="btn btn-secondary">ثانويّ</button>
<button type="button" class="btn btn-success">نجاح</button>
<button type="button" class="btn btn-danger">خطر</button>
<button type="button" class="btn btn-warning">تحذير</button>
<button type="button" class="btn btn-info">معلومة</button>
<button type="button" class="btn btn-light">خفيف</button>
<button type="button" class="btn btn-dark">غامق</button>
<button type="button" class="btn btn-link">رابط</button>
تنبيه:توصيل المعنى إلى التقنيّات المساعدة
يقتصر المعنى - عند الاقتصار على استخدام اللّون لنقله – على الدّلالة البصريّة، وبالتالي لن يصل المعنى المطلوب إلى التقنيّات المساعدة للزوّار (مثل قارئات الشاشة). تأكّد من أنّ المعلومة التي يشير إليها اللّون إمّا بديهيّة من المحتوى نفسِه (أيّ النصّ المرئي)أو أنّها أُضيفت بوسائل بديلة مثل نصّ مخفيّ بالصّنف .sr-only.
وسوم الأزرار
صُمِّمت الأصناف .btn لتُستخدَم مع العنصُر <button>. إلّا أنّه يمكن استخدام تلك الأصناف مع العنصُر <a> أو <input> (قد تظهر هذه العناصر بشكل مختلفٍ قليلًا على بعضٍ من المتصفّحات).
يجب إعطاء دور الزرّ (role="button") إلى عناصر <a> المُستخدَمة لعمل وظيفة داخل الصّفحة (مثل تقليص محتوى) وليس للربط بصفحات جديدة أو فقرات داخل الصفحة الحاليّة؛ وذلك من أجل نقل الهدف من العناصر المذكورة للتقنيّات المساعِدة مثل قارئات الشاشة.
<a class="btn btn-primary" href="#" role="button">رابط</a>
<button class="btn btn-primary" type="submit">زرّ</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">أوّليّّ</button>
<button type="button" class="btn btn-outline-secondary">ثانويّ</button>
<button type="button" class="btn btn-outline-success">نجاح</button>
<button type="button" class="btn btn-outline-danger">خطر</button>
<button type="button" class="btn btn-outline-warning">تحذير</button>
<button type="button" class="btn btn-outline-info">معلومة</button>
<button type="button" class="btn btn-outline-light">خفيف</button>
<button type="button" class="btn btn-outline-dark">غامق</button>
القياسات
هل تفضّل أزرارً كبيرة مزخرفة أم صغيرة؟ أضف الصنف .btn-lg أو .btn-sm لقياسات إضافيّة.
<button type="button" class="btn btn-primary btn-lg">زرّ أوّليّ كبير</button>
<button type="button" class="btn btn-secondary btn-lg">زرّ ثانويّ كبير</button>
<button type="button" class="btn btn-primary btn-sm">زرّ أوّليّّ صغير</button>
<button type="button" class="btn btn-secondary btn-sm">زرّ ثانويّ صغير</button>
يمكن إنشاء أزرار كتليّة (تمتدّ على عرض العنصُر الأب كاملًا) بإضافة الصنف .btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block">زرّ أوّليّّ بعرض كامل</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">زرّ ثانويّ بعرض كامل</button>
الزر النشط Active
تظهر الأزرار مضغوطة (الخلفيّة أغمق والحدود كذلك، ويظهر ظلّ) عندما تكون نشطة. لا توجد حاجة لإضافة صنف إلى عناصر <button> إذ أنّها تستخدم أصنافًا زائفة. رغم ذلك، يمكن فرض المظهر النشِط نفسه باستخدام الصنف .active (وتضمين الخاصيّة aria-pressed="true") إنْ احتجت لمحاكاة الحالة النشطة برمجيّا.
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">رابط أوّليّ</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">رابط</a>
الزرّ المُعطَّل Disabled
تؤدّي إضافة الخاصيّة disabled إلى أيّ عنصُر <button> لجعله يبدو مُعطَّلا.
<button type="button" class="btn btn-lg btn-primary" disabled>زرّ أوّليّ</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>زرّ</button>
تتصرّف الأزرار التي تستخدم العنصُر <a> بطريقة مختلفة قليلًا:
- لا تدعم عناصر
<a>الخاصيّةdisabled، لذا تجب إضافة الصنف.disabledلجعل العنصُر يبدو معطّلًا بصريّا. - تُضمَّن بعضٌ من التنسيقات المستقبليّة لتعطيل أحداث المُؤشّر (
pointer-events) على أزرار الروابط. لن تظهر المؤشّرات إطلاقًا في المتصفّحات التي تدعم هذه الخاصيّة. - يجب أن تتضمّن الأزرار المُعطَّلة الخاصيّة
aria-disabled="true"من أجل الإشارة إلى حالة العنصُر في التقنيّات المساعدة مثل قارئات الشاشة.
<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">رابط أوّليّّ</a>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">رابط ثانويّ</a>
تنبيه بخصوص وظيفة الرابط
يستخدم الصنفُ .disabled الخاصيّةَ pointer-events: none لمحاولة تعطيل الرابط في العناصر <a>، إلّا أنّ الخاصيّة pointer-events ليست ضمن معيار CSS لحدّ الساعة. علاوةً على ذلك، لا يتأثر التصفّح بلوحة المفاتيح بهذه الخاصيّة حتى في المتصفّحات التي تدعمها؛ ممّا يعني أنّ مستخدمي لوحات المفاتيح المرئية ومستخدمي التقنيّات المساعدة في القراءة ستكون لديهم إمكانيّة تفعيل الرابط. لذا أضف الخاصيّة tabindex="-1" على هذه الروابط (لمنعها من تلقّي المؤشّر من لوحة المفاتيح) واستخدم شفرة JavaScript مُخصَّصة لتعطيل هذه الوظيفة.
مُلحَق JavaScript الخاصّ بالأزرار
استخدم مُلحق JavaScript للاستفادة أكثر من الأزرار. تحكّم في حالات الأزرار وأنشئ مجموعات أزرار لمكوِّنات أخرى مثل أشرطة الأدوات.
التبديل بين الحالات
أضف الخاصيّة data-toggle="button" لتبديل الزرّ إلى الحالة النشطة (active). تجب إضافة الصنف .active و الخاصيّة aria-pressed="true" إلى العنصُر إنْ كنت تودّ تعليم الزرّ - مسبقًا - على أنّه نشط.
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
Single toggle
</button>
صناديق التأشير Checkbox وأزرار الانتقاء Radio buttons
يمكن تطبيق تنسيقات الأزرار في Bootstrap على عناصر أخرى، مثل اللافتات (<label>) لتوفير نمط تبديل للأزرار لصناديق التأشير أو أزرار الانتقاء. أضف الخاصيّة data-toggle="buttons" إلى مجموعة أزرار (.btn-group) تضمّ تلك الأزرار المُعدَّلة لتفعيل تأثير التبديل عليها عن طريق JavaScript، وأضف التنسيق .btn-group-toggle إلى عناصر الإدخال (<input>) داخل الأزرار. لاحظ أنّه يمكنك إنشاء أزرار مُفرَدة أو مُجمَّعة تستقبل مُدخَلات.
تُحدَّث حالة التأشير على هذه الأزرار فقط عبر حدث النقر 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 autocomplete="off"> مُؤشَّر عليه
</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" autocomplete="off" checked> نشط
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> زرّ انتقاء
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off"> زرّ انتقاء
</label>
</div>
التوابع
| التابع | الوصف |
|---|---|
$().button('toggle')
|
يبدّل حالة الضّغط على الزّر. يعطي الزرّ مظهر النشاط. |
$().button('dispose')
|
يحذف العناصر button. |