آموزش بوت استرپ – قسمت یازدهم – 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