آموزش بوت استرپ – قسمت یازدهم – Panels
پانل ها در بوت استرپ
یک پانل در بوت استرپ یک جعبه مرزدار با کمی فضای خالی دور محتوای آن است به صورت شکل زیر:
پانل ها با کلاس panel ایجاد می شوند، و محتوای داخل پانل دارای یک کلاس panel-body است:
۱ ۲ ۳ ۴ ۵ ۶ ۷ | <div class="panel panel-default"><div class="panel-body">A Basic Panel</div></div> |
کلاس panel-default برای سبک رنگ پانل استفاده می شود. آخرین مثال در این صفحه را برای کلاس های متنی بیشتر ببینید.
Panel 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 یک فوتر پنل اضافه می کند:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ | <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
