پنل‌ها

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp3-menu.png
موارد آموزشی
۱خانه
۲شروع
۳شبکه‌بندی ساده
۴تایپوگرافی
۵جدول‌ها
۶تصویر‌ها
۷Jumbotron
۸Well‌ها
۹هشدارها
۱۰کلیدها
۱۱گروه‌های کلید
۱۲گلیف آیکون‌ها
۱۳نشان‌ها/برچسب‌ها
۱۴نوار پیشرفت
۱۵صفحه‌بندی
۱۶Pager
۱۷گروه‌های لیست
۱۸پنل‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱تب‌ها/Pillها
۲۲نوار راهبری
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵ورودی‌ها ۲
۲۶سایزدهی ورودی
۲۷Media Objectها
۲۸Carousel
۲۹Modal
۳۰راهنمای ابزار
۳۱Popover
۳۲Scrollspy
۳۳Affix
۳۴فیلترها
شبکه‌بندی
زمینه‌ها
مثال‌ها
مرجع JavaScrpit در بوت‌استرپ ۳
مرجع CSS در بوت‌استرپ ۳

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


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

مثال

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


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


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

عنوان پنل

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

مثال

1 <div class="panel panel-default">
2   <div class="panel-heading">Panel Heading</div>
3   <div class="panel-body">Panel Content</div>
4 </div>


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


پاورقی پنل

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

مثال

1 <div class="panel panel-default">
2   <div class="panel-body">Panel Content</div>
3   <div class="panel-footer">Panel Footer</div>
4 </div>


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


گروه پنل

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

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

مثال

1 <div class="panel-group">
2   <div class="panel panel-default">
3     <div class="panel-body">Panel Content</div>
4   </div>
5   <div class="panel panel-default">
6     <div class="panel-body">Panel Content</div>
7   </div>
8 </div>


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


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

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

مثال


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


منابع آموزشی