ارسال نظر برای این مطلب
سید محمد میرعالی
امیدوارم مطالب خوب و کاربردی رو بتونم در سایتم برای شما دوستان قرار بدم.
دسته بندی مطالب
آمار سایت
کل مطالب : 39
کل نظرات : 6
افراد آنلاین : 1
تعداد اعضا : 0
آی پی امروز : 20
آی پی دیروز : 98
بازدید امروز : 112
باردید دیروز : 114
گوگل امروز : 0
گوگل دیروز : 0
بازدید هفته : 112
بازدید ماه : 364
بازدید سال : 10,484
بازدید کلی : 248,232
آموزش کار با Progress Bar در Bootstrap 4
در اين مطلب از سايت ميرممد با Progress Bar در بوتسترپ نسخه چهار كار خواهيم كرد.كلاس Progress Bar براي نمايش مقدار باقيمانده از يك فرايند استفاده ميشه.نمونه كد Progress Bar در بوتسترپ :
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
خروجي كد بالا :
براي تغيير اندازه درصد پيشرفت بايد مقدار width:70% را تغيير دهيم و براي تغيير متن درون Progress Bar بايد 70% را تغيير دهيم.Progress Bar داراي رنگ بندي هاي بوتسترپي نيز هست كه در ادامه توضيح ميدم.
افزايش ارتفاع Progress Bar در بوتسترپ :
فقط كافيه بخش سبز رنگ در كد زير رو روي يك عدد دلخواه تنظيم كنيد.
<div class="progress" style="height:20px">
<div class="progress-bar" style="width:40%;height:20px">40%</div>
</div>
خروجي كد بالا :
رنگ بندي Progress Bar در بوتسترپ :
رنگ پيشفرض براي Progress Bar در بوتسترپ آبي هستش كه ميتونيد مثل كد زير رنگ اونو تغيير بديد.
<!-- آبي-->
<div class="progress">
<div class="progress-bar" style="width:10%">10%</div>
</div>
<!-- سبز-->
<div class="progress">
<div class="progress-bar bg-success" style="width:20%">20%</div>
</div>
<!-- آبي كمرنگ-->
<div class="progress">
<div class="progress-bar bg-info" style="width:30%">30%</div>
</div>
<!-- نارنجي-->
<div class="progress">
<div class="progress-bar bg-warning" style="width:40%">40%</div>
</div>
<!-- قرمز-->
<div class="progress">
<div class="progress-bar bg-danger" style="width:50%">50%</div>
</div>
<!-- سفيد-->
<div class="progress border">
<div class="progress-bar bg-white" style="width:60%">60%</div>
</div>
<!-- خاكستري-->
<div class="progress">
<div class="progress-bar bg-secondary" style="width:70%">70%</div>
</div>
<!--خاكستري روشن-->
<div class="progress border">
<div class="progress-bar bg-light" style="width:80%">80%</div>
</div>
<!-- خاكستري تيره -->
<div class="progress">
<div class="progress-bar bg-dark" style="width:90%">90%</div>
</div>
خروجي كد بالا :
كلاس progress-bar-striped در بوتسترپ :
براي راه راه كردن progress-bar در بوتسترپ استفاده ميشه.
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width:40%">40%</div>
</div>
خروجي كد بالا :
كلاس progress-bar-animated در بوتسترپ :
براي انيميشن دادن به progress-bar در بوتسترپ استفاده ميشه.
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 40%">40%</div>
خروجي كد بالا :
progress-bar چند بخشي در بوتسترپ :
براي بخش بندي progress-bar در بوتسترپ از روش زير استفاده ميشه.
<div class="progress">
<div class="progress-bar bg-success" style="width:40%">
سبز
</div>
<div class="progress-bar bg-warning" style="width:10%">
نارنجي
</div>
<div class="progress-bar bg-danger" style="width:20%">
قرمز
</div>
</div>
خروجي كد بالا :
اگر سوالي داشتيد ميتونيد از بخش نظرات كه پايين هستش سوالتونو بپرسيد
ممنون بابت وقتي كه براي خوندن مطلب گذاشتيد.
پيشنهاد ميكنم از مطالب زير نيز استفاده كنيد :