64 lines
2.0 KiB
Markdown
64 lines
2.0 KiB
Markdown
---
|
|
title: Panels
|
|
localeTitle: لوحات
|
|
---
|
|
## لوحات
|
|
|
|
يوفر لك إطار Bootstrap ميزة تسمى اللوحات. اللوحة عبارة عن مربع يحتوي على عنوان منسق ومن ثم نص يسمح لك بعرض المعلومات بطريقة منظمة ، من خلال مجموعة واحدة أو أكثر من اللوحات.
|
|
|
|
#### كيف تستعمل:
|
|
|
|
لاستخدام لوحات Bootstrap ، يمكنك إضافة `<div>` مع فصل دراسي لنوع اللوحة الخاصة بك ( `panel panel-default` الصف `panel panel-default` أو شيء مشابه ، راجع أمثلة اللوحة لمزيد من المعلومات.) ثم علامتي `<div>` متداخلتين ، واحدة للعنوان ( `panel panel-heading` للفئة) وواحدة للجسم ( `panel panel-body` الصف). قد تجد أن المثال رمز أسهل للفهم من تفسير مكتوب.
|
|
|
|
**مثال الكود**
|
|
|
|
`
|
|
<div class="panel panel-primary">
|
|
<div class="panel panel-heading">Panel Primary</div>
|
|
<div class="panel panel-body"> This is a panel with the primary panel style.</div>
|
|
</div>
|
|
`
|
|
|
|
#### أمثلة على اللوحة:
|
|
|
|
هذه مجموعة من الأمثلة التي تعرض كل نوع من اللوحات. يتم عرض فئة CSS أعلى كل مثال.
|
|
|
|
`panel panel-default`
|
|
|
|
لوحة افتراضية
|
|
|
|
هذه لوحة بها نمط اللوحة الافتراضي.
|
|
|
|
`panel panel-primary`
|
|
|
|
لوحة الابتدائية
|
|
|
|
هذه لوحة بها نمط اللوحة الأساسي.
|
|
|
|
`panel panel-success`
|
|
|
|
نجاح اللوحة
|
|
|
|
هذه لوحة بها نمط لوحة النجاح.
|
|
|
|
`panel panel-info`
|
|
|
|
معلومات لوحة
|
|
|
|
هذه لوحة بها نمط لوحة المعلومات.
|
|
|
|
`panel panel-warning`
|
|
|
|
تحذير لوحة
|
|
|
|
هذه لوحة بها نمط لوحة التحذير.
|
|
|
|
`panel panel-danger`
|
|
|
|
خطر لوحة
|
|
|
|
هذه لوحة بها نمط لوحة الخطر.
|
|
|
|
### معلومات اكثر
|
|
|
|
* [وثائق منسدلة Bootstrap](https://getbootstrap.com/docs/4.0/components/dropdowns/) |