پنل ها

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


پنل ها

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

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


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

مثال

1 <div class="panel panel-default">
2   <div class="panel-body">A Basic Panel</div>
3 </div>
کلاس .panel-default برای تعیین رنگ پنل به کار می‌رود. برای فهم بیشتر کلاس‌های متنی، آخرین مثال این صفحه را مشاهده کنید.

عنوان پنل

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


کلاس .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>

پاورقی پنل

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


کلاس .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)

مثال

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.



منابع آموزشی