ساخت پنل panel بوت استرپ bootstrap

نحوه ایجاد و ساخت پنل panel در بوت استرپ bootstrap
مقالات
پنل بوت استرپ panel
یک پانل در بوت استرپ یک جعبه با border و مقداری padding اطراف محتوا ایجاد می کند.
پنل ها panels در بوت استرپ bootstrap با کلاس .panel ایجاد می شوند و محتویات داخل پنل panel دارای کلاس پنلی panel است.
مثال
1 2 3 |
<div class="panel panel-default"> <div class="panel-body">A Basic Panel</div> </div> |
کلاس “.panel-default” برای استایل رنگ پنل panel در بوت استرپ استفاده می شود. آخرین مثال در این صفحه برای کلاسهای متنی است.
Panel Heading
کلاس .panel-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
کلاس .panel-footer یک پاورقی را به پنل panel اضافه می کند:
مثال
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 Group
برای گروه بندی بسیاری از پنل ها با یکدیگر، <div> را با کلاس .panel گروه بندی کنید.
کلاس گروه پانل Panel Group، حاشیه پایین هر پانل را پاک می کند:
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):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<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> |
مطالب زیر را حتما مطالعه کنید
افزونه و کلاس Carousel در بوت استرپ bootstrap
کلاس collapse در بوت استرپ bootstrap
کلاس jumbotron در بوت استرپ
فیلترهای بوت استرپ
افزونه Affix بوت استرپ
افزونه Scrollspy بوت استرپ
1 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
Generic Fluoxetine With Doctor Consult cialis 20mg price at walmart Propecia Foro Viagra Spedizione Europa Click1market Reviews