آموزش بوت استرپ
راهنمای جامع و آموزش گام به گام طراحی قالب وبسایت با bootstrap

چگونه کار می کند؟

اجزای پیشرفته با دو عنصر HTML ساخته شده اند، برخی از CSS ها برای تعیین عرض و چند ویژگی استفاده می شوند. ما از عنصر progress> HTML5> استفاده نمی کنیم، شما می توانید میله های پیشرفت را ببندید، آنها را تحریک کنید و برچسب های متن را روی آنها قرار دهید.

1-ازprogress. به عنوان یک بسته بندی برای نشان دادن حداکثر مقدار نوار پیشرفت استفاده می کنیم.

2-ما از داخل نوار پیشرفت استفاده میکنیم تا پیشرفت را تا کنون نشان دهیم.

3-نوار پیاده سازی نیاز به یک سبک درونی، کلاس ابزار و یا CSS سفارشی برای تنظیم عرض خود دارد.

4-نوار progress-bar. نیز نیاز به برخی از نقش و ویژگی های aria دارد.

همه را با هم کنار بگذارید و نمونه های زیر را داشته باشید.

 

 
 <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div>

بوت استرپ مجموعه ای از امکانات را برای تنظیم عرض فراهم می کند. با توجه به نیازهای شما، ممکن است به سرعت در تنظیم پیشرفت کمک کند.

 <div class="progress"> <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div>

 

برچسب ها

با قرار دادن متن در نوار progress-bar.، برچسب ها را به میله پیشرفت خود اضافه کنید.

 <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div> </div>

 

ارتفاع

ما فقط مقدار قد را در پیش رویی تعیین می کنیم، بنابراین اگر شما این مقدار را تغییر دهید، نوار  progress-in.  در داخلی به طور خودکار بر اساس آن تغییر اندازه می دهد.

 <div class="progress" style="height: 1px;"> <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress" style="height: 20px;"> <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div>

 

پس زمینه 

از کلاس های کاربردی پس زمینه برای تغییر ظاهر میله پیشرفت فرد استفاده کنید.

 <div class="progress"> <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div>

 

میله های متعدد

اگر شما نیاز دارید، شامل میله پیشرفت های متعدد در یک مولفه پیشرفت است.

 <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div> <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div> <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div> </div>

 

راه راه 

اضافه کردن progress-bar-bared. به هر نوار پیشرفت برای اعمال نوار از طریق شی گرا CSS بیش از رنگ پس زمینه نوار پیشرفت است.

 <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div> <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div> <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div> </div>

 

راه راه های متحرک

گرادیان راه راه نیز می تواند متحرک باشد. اضافه کردن progress-bar-animated. به progress-bar. برای تحریک نوارها به سمت راست از طریق انیمیشن CSS3 استفاده می شود.

 <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div> </div>