Bootstrap 5 الأزرار

نمط الزر

Bootstrap 5 يقدم أنواع مختلفة من الأزرار:

مثال

<button type="button" class="btn">أساسي</button>
<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-info">معلومات</button>
<button type="button" class="btn btn-warning">تحذير</button>
<button type="button" class="btn btn-danger">مخاطرة</button>
<button type="button" class="btn btn-dark">داكن</button>
<button type="button" class="btn btn-light">فاتح</button>
<button type="button" class="btn btn-link">رابط</button>

جرب بنفسك

استخدام فئة الزر <a>،<button> أو <input> العنصر:

مثال

<a href="#" class="btn btn-success">زر رابط</a>
<button type="button" class="btn btn-success">زر</button>
<input type="button" class="btn btn-success" value="إدخال">
<input type="submit" class="btn btn-success" value="إرسال">
<input type="reset" class="btn btn-success" value="إعادة التعيين">

جرب بنفسك

لماذا نكتب # في سمة الارتباط href؟

بسبب عدم وجود صفحات قابلة للروابط ولا نريد أن نحصل على رسالة "404"، سنستخدم # كرابط. في الحياة الواقعية، يجب أن يكون هذا URL حقيقي للصفحة "البحث".

حواف الزر

Bootstrap 5 يقدم أيضًا ثمانية زرافات/حواف زر.

يمكنك رؤية تأثير "السحب" الإضافي عند وضع الفأرة فوقها:

مثال

<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-info">معلومات</button>
<button type="button" class="btn btn-outline-warning">تحذير</button>
<button type="button" class="btn btn-outline-danger">مخاطرة</button>
<button type="button" class="btn btn-outline-dark">داكن</button>
<button type="button" class="btn btn-outline-light text-dark">فاتح</button>

جرب بنفسك

حجم الزر

استخدمها للزر الكبير .btn-lg استخدمها للزر الصغير .btn-sm فئة:

مثال

<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>

جرب بنفسك

زر كبير

إذا كنت ترغب في إنشاء زر كبير يغطي كامل عرض العنصر الوالدي، فاستخدمه على العنصر الوالدي .d-grid فئة "helper":

مثال

<div class="d-grid">
  <button type="button" class="btn btn-primary btn-block">زر شامل العرض</button>
</div>

جرب بنفسك

إذا كان لديك العديد من الأزرار الكبيرة، يمكنك استخدام .gap-* النوع يتحكم في المسافة بينها:

مثال

<div class="d-grid gap-3">
  <button type="button" class="btn btn-primary btn-block">زر شامل العرض</button>
  <button type="button" class="btn btn-primary btn-block">زر شامل العرض</button>
  <button type="button" class="btn btn-primary btn-block">زر شامل العرض</button>
</div>

جرب بنفسك

زر نشط/معطل

يمكن تعيين الزر إلى حالة نشطة (يظهر كأنه مُضغوط) أو معطلة (غير قابلة للنقر):

النوع .active لجعل الزر يظهر كأنه مُضغوط، بينما disabled يُمكن استخدام الخاصية لجعل الزر غير قابلة للنقر. يرجى ملاحظة أن علامة التبويب <a> لا تدعم خاصية disabled، لذا يجب استخدام .disabled النوع يجعلها تظهر كمعطلة في البصرية.

مثال

<button type="button" class="btn btn-primary active">الأساسي النشط</button>
<button type="button" class="btn btn-primary" disabled>الأساسي المعطل</button>
<a href="#" class="btn btn-primary disabled">رابط معطل</a>

جرب بنفسك

زر المحمل

يمكنك أيضًا إضافة "spinner" إلى الزر، وسوف تتعلم المزيد في دروسنا الخاصة بـ BS5 Spinner:

مثال

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
  تحميل...
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  تحميل...
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
  تحميل...
</button>

جرب بنفسك