97 lines
3.2 KiB
Markdown
97 lines
3.2 KiB
Markdown
---
|
||
title: Buttons
|
||
localeTitle: وصفت
|
||
---
|
||
## وصفت
|
||
|
||
يوفر لك إطار 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._
|
||
|
||
#### معلومات اكثر:
|
||
|
||
* [وثائق أزرار Bootstrap](https://getbootstrap.com/docs/4.0/components/buttons/)
|
||
* [وثائق مجموعة زر Bootstrap](http://getbootstrap.com/docs/4.0/components/button-group/)
|
||
* [Bootstrap البدء](/articles/bootstrap/bootstrap-get-started) |