مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش Bootstrap 3 را دنبال می کنند. فریم ورک Bootstrap ابزارهای گسترده ای را برای تقسیم بندی و دسته بندی محتوا و عناصر صفحات وب در اختیار کاربران قرار می دهد. ابزارهای نظیر well که برای دسته بندی متن های مهم و نکته ای و list group ها که برای دسته بندی مطالب بصورت لیست ساده بکار می رود، از جمله ابزارهای دسته بندی های جزئی محسوب می شوند که در bootstrap 3 عرضه شده اند. در این آموزش نیز شما را با یکی دیگر از ابزارهای دسته بندی به نام panel در bootstrap 3 آشنا خواهیم کرد. پنل در bootstrap 3 بیشتر برای دسته بندی های کلی معرفی شده است، در ادامه مباحث برای آشنایی بیشتر با پنل (panel) در bootstrap 3 با ما همراه باشید.
پنل (panel) در bootstrap 3
یک panel در bootstrap 3 در واقع یک box ساده ی border شده است. که شامل فضای داخلی (padding) برای محتوای داخل آن است:
برای ایجاد پنل از کلاس .panel و برای محتوای داخل آن نیز از کلاس .panel-body استفاده می شود:
مثال :
| <div class="panel panel-default"> <div class="panel-body">A Basic Panel</div> </div> |
: از کلاس
.panel-default برای style و رنگ بندی محتوای پنل استفاده می شود.
سربرگ پنل (panel-heading)
Panel Heading
Panel Content
از کلاس .panel-heading برای افزودن سربرگ یا 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> |
گروه بندی پنل
برای گروه بندی تعداد زیادی panel با هم از یک عنصر <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
برای رنگ بندی پنل از کلاس های متنی (.panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, یا .panel-danger) استفاده می شود:
Panel with panel-default class
Panel Content
Panel with panel-primary class
Panel Content
Panel with panel-success class
Panel Content
Panel with panel-info class
Panel Content
Panel with panel-warning class
Panel Content
Panel with panel-danger class
Panel Content
کلام آخر
در مباحث فوق که برای آشنایی با پنل (panel) در bootstrap 3 ارائه شد، مباحثی از جمله آشنایی با کاربردهای panel ، ساختار اصلی panel و معرفی panel های متنوع بر اساس کاربرد آنها را مورد بررسی قرار دادیم.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
