آموزش بوت استرپ – قسمت دوازدهم – Panels

bootstrap panel

پانل ها در بوت استرپ

یک پانل در بوت استرپ یک جعبه مرزدار با کمی فضای خالی دور محتوای آن است به صورت شکل زیر:
پنل در بوت استرپ

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



<div class="panel panel-default">


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


</div>


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

Panel Heading

pannel heading
کلاس panel-heading یک عنوان به پنل می افزاید:



<div class="panel panel-default">


<div class="panel-heading">Panel Heading</div>




<div class="panel-body">Panel Content</div>


</div>


Panel Footer

panel footer
کلاس 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 حاشیه پایین هر پانل را پاک می کند:



<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, or panel-danger
bootstrap panel

برچسب ها

ممکن است به این موارد نیز علاقه مند باشید:

یک دیدگاه در “آموزش بوت استرپ – قسمت دوازدهم – Panels”

  1. webone می‌گه:

    ممنون مطلب مفیدی بود

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

کد امنیتی را در کادر زیر بنویسید *