Bootstrap 5 প্রগতি পটি
বেসিক প্রগ্রেস বার
প্রগ্রেস বার ব্যবহার করা যায় কোনো প্রক্রিয়ায় ব্যবহারকারীর প্রগ্রেস দেখানোর জন্য。
ডিফল্ট প্রগ্রেস বার তৈরি করতে, .progress ক্লাস এক্সটেন্ড করে কনটেনার ইলিমেন্টকে এবং .progress-bar ক্লাস এক্সটেন্ড করে এটা সাব-এলিমেন্ট করা।CSS width এটা পরিবর্তন করুন:
উদাহরণ
<div class="progress"> <div class="progress-bar" style="width:70%"></div> </div>
প্রগ্রেস বার উচ্চতা
প্রগ্রেস বারের উচ্চতা ডিফল্টে 1rem（সাধারণত, 16px）。CSS ব্যবহার করে অবশ্যই এটা পরিবর্তন করুন: height এটা পরিবর্তন করুন。
পরামর্শ:পরামর্শ: আপনাকে প্রগ্রেস কনটেনার এবং প্রগ্রেস বারকে একই উচ্চতা নিয়ে সেট করতে হবে:
উদাহরণ
<div class="progress" style="height:20px"> <div class="progress-bar" style="width:40%;height:20px"></div> </div>
প্রগ্রেস বার ট্যাগ
প্রগ্রেস বারের ভিতরে টেক্সট যোগ করে, যাতে দেখা যায় প্রকৃত পারসেন্ট:
উদাহরণ
<div class="progress"> <div class="progress-bar" style="width:70%">70%</div> </div>
কালো প্রগ্রেস
ডিফল্টে, প্রগ্রেস বার নীল রঙের (মূল) হয়। কোনো কনটেক্সট ব্যাকগ্রাউন্ড ক্লাস ব্যবহার করে এটা রঙ পরিবর্তন করুন:
উদাহরণ
<-- Blue --> <div class="progress"> <div class="progress-bar" style="width:10%"></div> </div> <-- Green --> <div class="progress"> <div class="progress-bar bg-success" style="width:20%"></div> </div> <-- Turquoise --> <div class="progress"> <div class="progress-bar bg-info" style="width:30%"></div> </div> <-- Orange --> <div class="progress"> <div class="progress-bar bg-warning" style="width:40%"></div> </div> <-- Red --> <div class="progress"> <div class="progress-bar bg-danger" style="width:50%"></div> </div> <-- White --> <div class="progress border"> <div class="progress-bar bg-white" style="width:60%"></div> </div> <!-- গ্রীন --> <div class="progress"> <div class="progress-bar bg-secondary" style="width:70%"></div> </div> <!-- কমল গ্রীন --> <div class="progress border"> <div class="progress-bar bg-light" style="width:80%"></div> </div> <!-- গাঢ় গ্রীন --> <div class="progress"> <div class="progress-bar bg-dark" style="width:90%"></div> </div>
চুলযুক্ত প্রগতি পটি
অনুমোদন করুন .progress-bar-striped পটির চুল যোগ করতে এই ক্লাস ব্যবহার করুন:
উদাহরণ
<div class="progress"> <div class="progress-bar progress-bar-striped" style="width:40%"></div> </div>
প্রগতি পটির অ্যানিমেশন
অনুমোদন করুন .progress-bar-animated প্রগতি পটির অ্যানিমেশন তৈরি করতে এই ক্লাস ব্যবহার করুন:
উদাহরণ
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
একাধিক প্রগতি পটি
প্রগতি পটি মাথায় স্থাপন করা হয়:
উদাহরণ
<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>
