آموزش کار با فریمورک رایگان بوت استرپ / قسمت دوازدهم
پانل ها در بوت استرپ
یک پانل در بوت استرپ یک جعبه مرزدار با کمی فضای خالی دور محتوای آن است به صورت شکل زیر:
پانل ها با کلاس 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