نباید از خسته بودن خود شرمنده باشی بلکه فقط باید سعی کنی خسته آور نباشی.
خوش آمدید - امروز : جمعه ۱۰ فروردین ۱۴۰۳

آموزش کار با فریمورک رایگان بوت استرپ / قسمت دوازدهم

آموزش کار با فریمورک رایگان بوت استرپ / قسمت دوازدهم

http://ivahid.com/wp-content/uploads/2014/11/cover8.png

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

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

پانل ها با کلاس 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

آموزش کار با فریمورک رایگان بوت استرپ / قسمت دوازدهم