پنل های بوت استرپ (بررسی کامل پنل بوت استرپ)

در این جلسه از دوره آموزش بوت استرپ به بررسیپنل های بوت استرپ می پردازیم.

پنل های بوت استرپ :

پنل های بوت استرپ جعبه هایی از پیش تعریف شده در بوت استرپ باویژگی های خاصی هستند.زمانی که بخواهید محتویات سایت را درون جعبه نمایش دهیدمی توانید از پنل های بوت استرپ استفاده کنید.

• این جعبه ها شامل بخش های body , header و footer می باشند.
• پنل های بوت استرپ با کلاس panel ایجاد می شوند.
• برای ایجاد بدنه پنل ها از کلاس panel-body استفاده کنید.
• رنگ حاشیه پنل ها را می توان با اضافه کردن استایل های از پیش تعریف شده در بوت استرپ که در جلسات پیش درمورد آنها صحبت کردیم تغییرداد.

این استایل ها در زیر آورده شده اند :

.panel panel-success
.panel panel-default
.panel panel-info
.panel panel-warning
.panel panel-danger

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

در مثال بالا رنگ حاشیه پنل قرمز است که می توان با کلاس های بوت استرپ رنگ آن را به رنگ دلخواه تغییر داد.

نحوه ایجاد بخش هدر پنل ها در بوت استرپ :

برای ایجاد بخش هدر پنل ها باید از کلاس 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>

نحوه ایجاد پنل ها به صورت گروهی در بوت استرپ :

در بوت استرپ این امکان وجود دارد که چندین جعبه را به صورت گروهی در کنار هم قرار داد.این جعبه ها با استایل خاصی که در بوت استرپ برای آنها تعریف شده است در کنار هم قرار می گیرند.برای ایجاد پنل های گروهی از کلاس panel-group استفاده کنید.این کلاس جعبه های بوت استرپ را با فاصله از پایین مشخصی در کنار هم قرار می دهد.اگر این کلاس حذف شود فاصله از پایین جعبه ها حذف خواهد شد.

به خروجی ها با کلاس panel-group و بدون کلاس panel-group دقت کنید.

<div class="container">
<h2>Panel Group</h2>
<p>The panel-group class clears the bottom-margin. Try to remove the class and see what happens.</p>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">Panel Header</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Panel Header</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Panel Header</div>
<div class="panel-body">Panel Content</div>
</div>

همانطور که در تصویر مشخص است جعبه ها از پایین فاصله تعریف شده ای دارند.

<div class="container">
<h2>Panel Group</h2>
<p>The panel-group class clears the bottom-margin. Try to remove the class and see what happens.</p>
<div class="حذف کلاس">
<div class="panel panel-default">
<div class="panel-heading">Panel Header</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Panel Header</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Panel Header</div>
<div class="panel-body">Panel Content</div>
</div>

به تصویر دقت کنید فاصله پایینی پیش فرض که برای کلاس panel-group تعریف شده است تغییر کرده است.

نحوه تغییر رنگ پنل ها در بوت استرپ :

برای تغییررنگ پنل های بوت استرپ می توان از کلاس های متنی پیش در فرض بوت استرپ استفاده کرد.

این کلاس ها عبارتند از :

panel panel-default
panel panel-primary
panel panel-success
panel panel-info
panel panel-warning
panel panel-danger
Panels with Contextual Classes

<div class="container">
<h2>Panels with Contextual Classes</h2>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">Panel with panel-default class</div>
<div class="panel-body">Panel Content</div>
</div><div class="panel panel-primary">
<div class="panel-heading">Panel with panel-primary class</div>
<div class="panel-body">Panel Content</div>
</div><div class="panel panel-success">
<div class="panel-heading">Panel with panel-success class</div>
<div class="panel-body">Panel Content</div>
</div><div class="panel panel-info">
<div class="panel-heading">Panel with panel-info class</div>
<div class="panel-body">Panel Content</div>
</div><div class="panel panel-warning">
<div class="panel-heading">Panel with panel-warning class</div>
<div class="panel-body">Panel Content</div>
</div><div class="panel panel-danger">
<div class="panel-heading">Panel with panel-danger class</div>
<div class="panel-body">Panel Content</div>
</div>
</div>
</div>