با عرض سلام و صبح بخیر خدمت شما دوستان ،در این آموزش فراخواهید گرفت که چگونه با استفاده از تویتر بوت استرپ نوارهای پیشروی ایجاد کنید. ایجاد نوار پیشروی با استفاده از تویتربوت استرپ نوارهای پیشروی برای نمایش بارگذاری، جهت گذاری و یا وضعیت فعالیت به یوزر به کار می روند. مثال زیر به شما نشان خواهد داد که چگونه با استفاده از گرادیانت عمودی می توان یک نوار پیشروی ساده ایجاد کرد.
مثال:
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
<div class=”progress”>
<div class=”progress-bar” style=”width: 60%;”>
<span class=”sr-only”>60% Complete</span>
</div>
</div>
خروجی مثال بالا مانند زیر می باشد .
Bootstrap
ایجاد نوار پیشروی خط دار
برای ایجاد نوار پیشروی خط دار گروه .progress-striped را به گروه پایه ی .progress اضافه کنید.
مثال:
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
<div class=”progress progress-striped”>
<div class=”progress-bar” style=”width: 60%;”>
<span class=”sr-only”>
۶۰% Complete
</span>
</div>
</div>
خروجی مثال بالا مانند تصویر زیر خواهد بود .
Bootstrap
توجه:
نوار پیشروی خط دار از یک گرادیانت برای ایجاد این افکت استفاده می کند. نوار پیشروی خط دار درIE7- 8پشتیبانی نمی شود. به طور مشابه شما می توانید یک نوار پیشروی متحرک ایجاد کنید. کافیست گروه .activeرا به .progress- stripped اضافه کنید. گروه .active خط ها را از راست به چپ متحرک می کند.
مثال:
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
<div class=”progress progress-striped active”>
<div class=”progress-bar” style=”width: 60%;”>
<span class=”sr-only”>
۶۰% Complete
</span>
</div>
</div>
توجه:
به خاطر پشتیبانی نشدن ویژگی های انیمیشن CSS3 ، نوار پیشروی در هیچ کدام از ورژن های IE تا IE9 پشتیبانی نمی شود. ایجاد نوار پیشروی هم پوشانی شده همچنین می توانید چند نوار پیشروی را در یک نوار قرار داده تا روی یکدیگر قرار بگیرند.
مثال:
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
<div class=”progress”>
</div>
خروجی مثال بالا تصویر زیر خواهد بود .
Bootstrap
نوارهای پیشروی با گروه های تاکید
بوت استرپ همچنین چند گروه کاربردی تاکید را برای نوارهای پیشروی ارائه می دهد که می توانند از طریق رنگ معنا را منتقل کنند.
مثال:
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
<div class=”progress”>
<div class=”progress-bar progress-bar-info” style=”width: 20%;”>
<span class=”sr-only”>
۲۰% Complete
</span>
</div>
</div>
<div class=”progress”>
<div class=”progress-bar progress-bar-success” style=”width: 40%;”>
<span class=”sr-only”>
۴۰% Complete
</span>
</div>
</div>
<div class=”progress”>
<div class=”progress-bar progress-bar-warning” style=”width: 60%;”>
<span class=”sr-only”>
۶۰% Complete
</span>
</div>
</div>
<div class=”progress”>
<div class=”progress-bar progress-bar-danger” style=”width: 80%;”>
<span class=”sr-only”>
۸۰% Complete
</span>
</div>
</div>
خروجی مثال بالا مانند تصویر زیر خواهد بود .
Bootstrap
نوارهای پیشروی خط دار با گروه های تاکید مانند رنگ های ثابت، شما هم می توانید نوارهای پیشروی خط دار متنوعی ایجاد کنید.
مثال:
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
<div class=”progress progress-striped”>
<div class=”progress-bar progress-bar-info” style=”width: 20%;”>
<span class=”sr-only”>
۲۰% Complete
</span>
</div>
</div>
<div class=”progress progress-striped”>
<div class=”progress-bar progress-bar-success” style=”width: 40%;”>
<span class=”sr-only”>
۴۰% Complete
</span>
</div>
</div>
<div class=”progress progress-striped”>
<div class=”progress-bar progress-bar-warning” style=”width: 60%;”>
<span class=”sr-only”>
۶۰% Complete
</span>
</div>
</div>
<div class=”progress progress-striped”>
<div class=”progress-bar progress-bar-danger” style=”width: 80%;”>
<span class=”sr-only”>
۸۰% Complete
</span>
</div>
</div>
خروجی مثال بالا مانند تصویر زیر خواهد بود.
Bootstrap
