3.2 KiB
title, localeTitle
| title | localeTitle |
|---|---|
| Buttons | وصفت |
وصفت
يوفر لك إطار Bootstrap خيارات متعددة لتصميم الأزرار. تساعدك هذه الأنماط على توفير تمثيل مرئي للمستخدم لما قد يفعله الزر.
كيف تستعمل:
لاستخدام أزرار bootstrap ، اتبع الخطوات نفسها التي تريد إنشاء زر لها في HTML ، إلا أنك تقوم أيضًا بتطبيق فئة CSS المناسبة على الزر. تم توفير مثال على التعليمات البرمجية أدناه.
مثال الكود:
<button type="button" class="btn btn-primary">Primary</button>
ابتدائي
يمكنك أيضًا استخدام أزرار bootstrap مع عناصر <a> و <input> كما هو موضح في الأمثلة أدناه.
<a class="btn btn-primary" href="#" role="button">This button is a link</a>
<input class="btn btn-primary" type="submit" value="Submit">
Bootstrap زر قائمة الطبقة:
هذه قائمة بفئات CSS التي يوفرها bootstrap للأزرار.
.btn هذا هو الزر الأساسي في bootstrap.
الأساسية
.btn-default هذا هو الزر الافتراضي في bootstrap.
افتراضي
.btn-primary هذا هو الزر الأساسي ل bootstrap.
ابتدائي
.btn-success هذا هو زر نجاح .btn-success .
نجاح
.btn-info هذا هو زر معلومات bootstrap.
معلومات
.btn-warning وهذا هو زر التحذير في bootstrap.
تحذير
.btn-danger هذا هو زر الخطر في .btn-danger .
خطر
.btn-link هذا هو زر رابط bootstrap.
حلقة الوصل
.btn-light هذا هو زر الإضاءة في .btn-light .
ضوء
أحجام زر Bootstrap:
هذه قائمة بفئات CSS للحجم المختلف للأزرار.
.btn-lg هذا هو الزر الكبير في bootstrap.
كبير
.btn-sm هذا هو زر صغير في bootstrap.
صغير
.btn-xs هذا هو زر صغير إضافي في bootstrap.
صغير جدا
أزرار Bootstrap المحددة:
من الممكن أيضًا أن يكون لديك أزرار محددة بدلاً من تلوينها بالكامل. يتم تحقيق ذلك عن طريق وضع outline الإصلاح الأوسط بين فئة الزر الذي تريده. سيكون استخدام العينة كما يلي:
<button type="button" class="btn btn-outline-primary">Primary</button>
تعتبر الأزرار المحددة جزءًا من Bootstrap منذ الإصدار 4 ، الرجاء التأكد من أنك تستخدم الإصدار الصحيح إذا كنت غير قادر على تشغيلها.
ملاحظة: لا تقم بتضمين النقطة في سمة فئة HTML ، يتم استخدام الإشارة إلى الفئات ذات النقطة فقط عند ضبط الفئات في CSS.