پنل‌ها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< Bootstrap:Tutorial(تغییرمسیر از Bootstrap:پنل‌ها)
پرش به ناوبری پرش به جستجو

پنل در بوت استرپ یک جعبهٔ کادر دار با لایه‌ای در اطراف محتوای آن است:[۱]

پنل‌ها با کلاس .panel ایجاد می‌شوند و محتوای داخل پنل یک کلاس .panel-body دارند:

مثال

<div class="panel panel-default">
  <div class="panel-body">A Basic Panel</div>
</div>


مشاهدهٔ نتیجه


کلاس .panel-default برای تعیین رنگ پنل به کار می‌رود. برای فهم بیشتر کلاس‌های متنی، آخرین مثال این صفحه را مشاهده کنید.

عنوان پنل

کلاس .panel-heading یک عنوان را به پنل اضافه می‌کند:

مثال

<div class="panel panel-default">
  <div class="panel-heading">Panel Heading</div>
  <div class="panel-body">Panel Content</div>
</div>


مشاهدهٔ نتیجه


پاورقی پنل

کلاس .panel-footer یک پاورقی به پنل اضافه می‌کند:

مثال

<div class="panel panel-default">
  <div class="panel-body">Panel Content</div>
  <div class="panel-footer">Panel Footer</div>
</div>


مشاهدهٔ نتیجه


گروه پنل

برای دسته بندی چند پنل با هم، آنها را در یک <div> با کلاس .panel-group قرار دهید.

کلاس .panel-group حاشیه پایین (bottom-margin) هر پنل را حذف می‌کند:

مثال

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-body">Panel Content</div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">Panel Content</div>
  </div>
</div>


مشاهدهٔ نتیجه


پنل های دارای کلاس های متنی

برای رنگ کردن پنل‌ها، از کلاس‌های متنی استفاده می‌شود: (.panel-default ،.panel-primary ،.panel-success ،.panel-info ،.panel-warning یا .panel-danger)

مثال


مشاهدهٔ نتیجه


منابع آموزشی