বুটস্ট্রাপ বেসিক প্রোগ্রেস বার
বুটস্ট্রাপ প্রোগ্রেস বার: প্রোগ্রেস বারের মাধ্যমে ইউজার জানতে পারে তার সম্পাদিত প্রক্রিয়াটি কতটুকু সম্পন্ন হয়েছে এবং কতটুকু বাকী রয়েছে।
বুটস্ট্রাপে বিভিন্ন ধরনের প্রোগ্রেস বার রয়েছে।
বুটস্ট্রাপ বেসিক প্রোগ্রেস বার তৈরি করার জন্য <div> এলিমেন্টর মধ্যে .progress ক্লাস এবং তারমধ্যে অন্য একটি <div> এলিমেন্টে .progress-bar ক্লাস ব্যবহার করুনঃ
kt_satt_skill_example_id=962
 | নোটঃ প্রোগ্রেস বার ইন্টারনেট এক্সপ্লোরার(৯) এবং এর পূর্ববর্তী ভার্সনে সাপোর্ট করে না। কারন প্রোগ্রেস বারের ক্ষেত্রে এটি সিএসএস(৩) ট্রানজিশন এবং এনিমেশন এফেক্ট ব্যবহার করে। নোটঃ স্ক্রিন রিডারদের পড়তে সাহায্য করার জন্য aria-* এট্রিবিউট ব্যবহার করুন। |
|---|
লেবেলসহ প্রোগ্রেস বার
লেভেলসহ একটি প্রোগ্রেস বার দেখতে নিম্নরুপঃ
প্রোগ্রেস বারের পারসেন্টেজ প্রদর্শন করানোর জন্য .sr-only ক্লাস বাদ দিনঃ
kt_satt_skill_example_id=964
প্রোগ্রেস বারের কালার
প্রোগ্রেস বারকে কালার করার জন্য কনটেকচুয়াল ক্লাসগুলো ব্যবহার করতে পারেন। এছাড়াও আপনি আপনার পছন্দ মতো কালার যুক্ত করার জন্য সিএসএসের সাহায্য নিন।
কিভাবে কনটেকচুয়াল ক্লাসগুলো প্রোগ্রেস বারে ব্যবহার করা যায় তা নিচের উদাহরণে দেখানো হলোঃ
.progress-bar-success.progress-bar-info.progress-bar-warning.progress-bar-danger
kt_satt_skill_example_id=967
Striped প্রোগ্রেস বার
Striped প্রোগ্রেস বার দেখতে নিম্নরুপঃ
Striped প্রোগ্রেস বার তৈরি করার জন্য .progress-bar-striped ক্লাস ব্যবহার করুনঃ
kt_satt_skill_example_id=969
এনিমেশনযুক্ত প্রোগ্রেস বার
একটি "এনিমেশন" যুক্ত প্রোগ্রেস বারঃ
এনিমেশন যুক্ত প্রোগ্রেস বার তৈরি করার জন্য .progress-bar-striped ক্লাসের সাথে .active ক্লাস ব্যবহার করুনঃ
kt_satt_skill_example_id=971
Stacked প্রোগ্রেস বার
কয়েকটি প্রোগ্রেস বার মিলে একটি প্রোগ্রেস বার তৈরি করা যায়।
একই < div class="progress" > এর মধ্যে একাধিক প্রোগ্রেস বার যুক্ত করে stacked প্রোগ্রেস বার তৈরি করা যায়ঃ
kt_satt_skill_example_id=973
Read more
