إطار Bootstrap 5

الأزرار

13 دقيقة الدرس 17 من 40

مقدمة إلى أزرار Bootstrap

توفر Bootstrap تصميمًا ووظائف شاملة للأزرار. تعتبر الأزرار من أكثر المكونات استخدامًا، حيث تقدم أنماطًا وأحجامًا وحالات متنوعة لتتناسب مع احتياجات تصميمك.

ملاحظة: تعمل أزرار Bootstrap 5 بسلاسة مع واجهة برمجة التطبيقات الجديدة للأدوات المساعدة ويمكن تخصيصها بسهولة باستخدام متغيرات Sass.

أنماط الأزرار والمتغيرات

تقدم 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>
                

نصيحة: استخدم فئات الأزرار الدلالية لنقل المعنى (نجاح للإجراءات الإيجابية، خطر للإجراءات التدميرية، إلخ).

الأزرار المحددة

أنشئ أزرار شفافة بأنماط محددة من خلال استبدال btn-* بـ 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-dark">داكن</button>
                

أحجام الأزرار

توفر Bootstrap ثلاثة أحجام للأزرار: كبير، افتراضي، وصغير:

<!-- زر كبير -->
<button type="button" class="btn btn-primary btn-lg">زر كبير</button>

<!-- زر افتراضي -->
<button type="button" class="btn btn-primary">زر افتراضي</button>

<!-- زر صغير -->
<button type="button" class="btn btn-primary btn-sm">زر صغير</button>

<!-- زر كتلة (عرض كامل) -->
<div class="d-grid gap-2">
    <button class="btn btn-primary" type="button">زر كتلة</button>
    <button class="btn btn-secondary" type="button">زر كتلة</button>
</div>
                

تغيير Bootstrap 5: أصبحت أزرار الكتلة الآن تستخدم فئات المساعدة (d-grid) بدلاً من btn-block.

مجموعات الأزرار

اجمع سلسلة من الأزرار معًا على سطر واحد باستخدام مجموعات الأزرار:

<!-- مجموعة أزرار أساسية -->
<div class="btn-group" role="group" aria-label="مثال أساسي">
    <button type="button" class="btn btn-primary">يسار</button>
    <button type="button" class="btn btn-primary">وسط</button>
    <button type="button" class="btn btn-primary">يمين</button>
</div>

<!-- شريط أدوات الأزرار -->
<div class="btn-toolbar" role="toolbar" aria-label="مثال شريط الأدوات">
    <div class="btn-group me-2" role="group" aria-label="المجموعة الأولى">
        <button type="button" class="btn btn-outline-secondary">1</button>
        <button type="button" class="btn btn-outline-secondary">2</button>
        <button type="button" class="btn btn-outline-secondary">3</button>
    </div>
    <div class="btn-group me-2" role="group" aria-label="المجموعة الثانية">
        <button type="button" class="btn btn-outline-secondary">4</button>
        <button type="button" class="btn btn-outline-secondary">5</button>
    </div>
    <div class="btn-group" role="group" aria-label="المجموعة الثالثة">
        <button type="button" class="btn btn-outline-secondary">6</button>
    </div>
</div>

<!-- مجموعة أزرار عمودية -->
<div class="btn-group-vertical" role="group" aria-label="مجموعة أزرار عمودية">
    <button type="button" class="btn btn-primary">زر</button>
    <button type="button" class="btn btn-primary">زر</button>
    <button type="button" class="btn btn-primary">زر</button>
</div>
                

أزرار التبديل والحالات

أنشئ أزرار تبديل مع وظيفة خانة الاختيار أو الراديو:

<!-- أزرار تبديل خانة الاختيار -->
<div class="btn-group" role="group" aria-label="مجموعة تبديل خانة الاختيار">
    <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
    <label class="btn btn-outline-primary" for="btncheck1">خانة 1</label>

    <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
    <label class="btn btn-outline-primary" for="btncheck2">خانة 2</label>

    <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
    <label class="btn btn-outline-primary" for="btncheck3">خانة 3</label>
</div>

<!-- أزرار تبديل الراديو -->
<div class="btn-group" role="group" aria-label="مجموعة تبديل راديو">
    <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
    <label class="btn btn-outline-primary" for="btnradio1">راديو 1</label>

    <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
    <label class="btn btn-outline-primary" for="btnradio2">راديو 2</label>

    <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
    <label class="btn btn-outline-primary" for="btnradio3">راديو 3</label>
</div>
                

حالات الأزرار

يمكن أن يكون للأزرار حالات مختلفة لتفاعل المستخدم:

<!-- حالة نشطة -->
<button type="button" class="btn btn-primary active" aria-pressed="true">زر نشط</button>

<!-- حالة معطلة -->
<button type="button" class="btn btn-primary" disabled>زر معطل</button>

<!-- رابط بمظهر معطل -->
<a class="btn btn-primary disabled" role="button" aria-disabled="true">رابط معطل</a>

<!-- حالة تحميل مع دوار -->
<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
    جاري التحميل...
</button>
                

تحذير: الأزرار المعطلة باستخدام وسوم <a> يجب أن تستخدم aria-disabled="true" ومنع السلوك الافتراضي باستخدام JavaScript.

وسوم الأزرار

يمكن استخدام فئات الأزرار مع عناصر HTML المختلفة:

<!-- عنصر زر -->
<button class="btn btn-primary" type="button">زر</button>

<!-- رابط منسق كزر -->
<a class="btn btn-primary" href="#" role="button">رابط</a>

<!-- زر إدخال -->
<input class="btn btn-primary" type="button" value="إدخال">
<input class="btn btn-primary" type="submit" value="إرسال">
<input class="btn btn-primary" type="reset" value="إعادة تعيين">
                

تمرين: إنشاء شريط أدوات الأزرار

أنشئ شريط أدوات أزرار كامل بالمتطلبات التالية:

أنشئ شريط أدوات بثلاث مجموعات أزرار
المجموعة الأولى: أزرار تراجع وإعادة (outline-primary)
المجموعة الثانية: أزرار قص ونسخ ولصق (outline-secondary)
المجموعة الثالثة: أزرار تبديل غامق ومائل وتحته خط (outline-dark)
أضف مسافة مناسبة بين المجموعات
ضمّن زر "حفظ" كبير (أساسي) في النهاية
اجعل جميع الأزرار قابلة للوصول مع تسميات ARIA المناسبة

أفضل الممارسات

استخدم فئات الأزرار الدلالية للإشارة إلى أنواع الإجراءات
قم دائمًا بتضمين نص وصفي أو aria-labels للأزرار التي تحتوي على أيقونات فقط
استخدم type="button" للأزرار التي لا ترسل النماذج
وفر تعليقات بصرية واضحة للحالات التفاعلية
اجعل نص الزر موجزًا وموجهًا نحو العمل
استخدم أحجام أزرار متسقة في جميع أنحاء تطبيقك
ضع في اعتبارك أهداف النقر على الهاتف المحمول (44×44 بكسل كحد أدنى)
لا تستخدم الأزرار المحددة على خلفيات بألوان مشابهة

الخلاصة

في هذا الدرس، تعلمت عن أزرار Bootstrap بما في ذلك الأنماط المختلفة والأحجام والأزرار المحددة ومجموعات الأزرار وأشرطة الأدوات ووظيفة أزرار التبديل. تعتبر الأزرار مكونات واجهة مستخدم أساسية توفر دعوات واضحة للعمل وعناصر تفاعلية في جميع أنحاء تطبيقك.