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