آموزش کار با فریمورک رایگان بوت استرپ / قسمت هشتم
در این قسمت از آموزش بوت استرپ به بررسی دو مبحث دیگر از بوت استرپ خواهیم پرداخت:
۱) Bootstrap Badges and Labels
۲) Bootstrap Progress Bars
bootstrap Badges
Badge ها نوعی شاخص عددی در بوت استرپ هستند که تعداد دیدگاه، پست یا هر چیزی که مربوط به یک لینک باشد را نمایش می دهد.
عددهایی که در تصویر رو به رو می بینید همان Badge ها می باشند.
برای ساخت Badges ها کافیست از کلاس badge در داخل یک sapn استفاده کنید.
مثال:
۱
۲
۳
|
< a href = "#" >News < span class = "badge" >5</ span ></ a >< br > < a href = "#" >Comments < span class = "badge" >10</ span ></ a >< br > < a href = "#" >Updates < span class = "badge" >2</ span ></ a > |
badge ها همچنین می توانند در داخل المان های دیگر مانند button استفاده شوند.
مثال:
۱
|
< button type = "button" class = "btn btn-primary" >Primary < span class = "badge" >7</ span ></ button > |
bootstrap Labels
Label ها برای اضافه کردن توضیحات به یک بخش خاص استفاده می شود.
برای ساخت label ها کافیست در داخل یک span از کلاس label استفاده کنید. همچنین کلاس های دیگری از label ها وجود دارد که می توانید برای سفارشی کردن label ها از آنها استفاده کنید.
۱
۲
۳
۴
۵
۶
|
< span class = "label label-default" >Default Label</ span > < span class = "label label-primary" >Primary Label</ span > < span class = "label label-success" >Success Label</ span > < span class = "label label-info" >Info Label</ span > < span class = "label label-warning" >Warning Label</ span > < span class = "label label-danger" >Danger Label</ span > |
نمونه کدهای بالا label های زیر را تولید می کند:
Bootstrap Progress Bars
نوار های پیشرفت برای نمایش مدت زمان یک عملیات بهترین گزینه هستند. بوت استرپ چند نوع از این نوارهای پیشرفت را در اختیار کاربران قرار داده است که در حالت پیشفرض نوار پیشرفت در بوت استرپ به شکل زیر است:
برای ساخت نوار پیشرفت پیشفرض کافیست کلاس progress را به یک div بدهید. مثلا:
۱
۲
۳
۴
۵
۶
|
< div class = "progress" > < div class = "progress-bar" role = "progressbar" aria-valuenow = "70" aria-valuemin = "0" aria-valuemax = "100" style = "width:70%" > < span class = "sr-only" >70% Complete</ span > </ div > </ div > |
Progress Bar With Label
نوار پیشرفت به همراه label مانند تصویر زیر:
۱
۲
۳
۴
۵
۶
|
< div class = "progress" > < div class = "progress-bar" role = "progressbar" aria-valuenow = "70" aria-valuemin = "0" aria-valuemax = "100" style = "width:70%" > ۷۰% </ div > </ div > |
نوار پیشرفت رنگی در بوت استرپ
برای ایجاد این نوع از نوارهای پیشرفت می توانید از کلاس های زیر استفاده کنید:
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
|
< div class = "progress" > < div class = "progress-bar progress-bar-success" role = "progressbar" aria-valuenow = "40" aria-valuemin = "0" aria-valuemax = "100" style = "width:40%" > ۴۰% Complete (success) </ div > </ div > < div class = "progress" > < div class = "progress-bar progress-bar-info" role = "progressbar" aria-valuenow = "50" aria-valuemin = "0" aria-valuemax = "100" style = "width:50%" > ۵۰% Complete (info) </ div > </ div > < div class = "progress" > < div class = "progress-bar progress-bar-warning" role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width:60%" > ۶۰% Complete (warning) </ div > </ div > < div class = "progress" > < div class = "progress-bar progress-bar-danger" role = "progressbar" aria-valuenow = "70" aria-valuemin = "0" aria-valuemax = "100" style = "width:70%" > ۷۰% Complete (danger) </ div > </ div > |
نوار پیشرفت راه راه در بوت استرپ
برای استفاده از نوار پیشرفت راه راه در بوت استرپ می توانید از کلاس progress-bar-striped استفاده کنید.
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
|
< div class = "progress" > < div class = "progress-bar progress-bar-success progress-bar-striped" role = "progressbar" aria-valuenow = "40" aria-valuemin = "0" aria-valuemax = "100" style = "width:40%" > ۴۰% Complete (success) </ div > </ div > < div class = "progress" > < div class = "progress-bar progress-bar-info progress-bar-striped" role = "progressbar" aria-valuenow = "50" aria-valuemin = "0" aria-valuemax = "100" style = "width:50%" > ۵۰% Complete (info) </ div > </ div > < div class = "progress" > < div class = "progress-bar progress-bar-warning progress-bar-striped" role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width:60%" > ۶۰% Complete (warning) </ div > </ div > < div class = "progress" > < div class = "progress-bar progress-bar-danger progress-bar-striped" role = "progressbar" aria-valuenow = "70" aria-valuemin = "0" aria-valuemax = "100" style = "width:70%" > ۷۰% Complete (danger) </ div > </ div > |
نوار پیشرفت متحرک در بوت استرپ
برای استفاده از این نوار پیشرفت از کلاس active بهره بگیرید.
۱
۲
۳
۴
۵
۶
|
< div class = "progress" > < div class = "progress-bar progress-bar-striped active" role = "progressbar" aria-valuenow = "40" aria-valuemin = "0" aria-valuemax = "100" style = "width:40%" > ۴۰% </ div > </ div > |
نوار پیشرفت چندتایی در بوت استرپ
نمونه کد ایجاد نوار ابزار چندتایی در زیر آمده است:
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
|
< div class = "progress" > < div class = "progress-bar progress-bar-success" role = "progressbar" style = "width:40%" > Free Space </ div > < div class = "progress-bar progress-bar-warning" role = "progressbar" style = "width:10%" > Warning </ div > < div class = "progress-bar progress-bar-danger" role = "progressbar" style = "width:20%" > Danger </ div > |