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