TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

কিভাবে বুটস্ট্র্যাপ 5 প্রগ্রেস বার তৈরি করবেন?

2

প্রগতি বারগুলি দক্ষতা প্রদর্শনের জন্য, প্রকল্প সমাপ্তির শতাংশ এবং অনুরূপ উদ্দেশ্যে ব্যবহার করা হয়। বুটস্ট্র্যাপ 5 এর পূর্ববর্তী সংস্করণের মতো অগ্রগতি বারের বিভিন্ন শৈলী রয়েছে। এই টিউটোরিয়ালে আসুন বুটস্ট্র্যাপ 5 এ প্রদত্ত প্রতিটি ধরণের অগ্রগতি বারের বিষয়ে আরও অন্বেষণ করি।

বুটস্ট্র্যাপ 5 প্রগ্রেস বার টিউটোরিয়াল

  1. HTML5 অগ্রগতি বার
  2. বুটস্ট্র্যাপ অগ্রগতি CSS ক্লাস বন্ধ করে দেয়
  3. ডিফল্ট অগ্রগতি বার তৈরি করা হচ্ছে
  4. বিভিন্ন ব্যাকগ্রাউন্ড রং সহ অগ্রগতি বার
  5. প্রগতি বারে লেবেল যোগ করা
  6. একাধিক অগ্রগতি বার
  7. ডোরাকাটা স্টাইল
  8. অ্যানিমেটেড ডোরাকাটা স্টাইল
  9. উচ্চতা সামঞ্জস্য করা

আসুন প্রতিটি বিষয়ে বিস্তারিত আলোচনা করি।

1 HTML5 প্রগ্রেস বার

মনে রাখবেন HTML5 এর একটি ডিফল্ট ট্যাগ আছে যা অনুভূমিক অগ্রগতি বার তৈরি করে যা বেশিরভাগ ক্ষেত্রেই যথেষ্ট। নিচে HTML5 প্রগতি বারের কোড ব্লক দেওয়া হল।

<progress value="50" max="100">50 %</progress><br /> <progress value="60" max="100">60 %</progress><br /> <progress value="70" max="100">70 %</progress><br /> <progress value="80" max="100">80 %</progress><br />

এটি ব্রাউজারে নীচের মত দেখাবে:

50 %

60%

70%

80%

বুটস্ট্র্যাপ HTML5 অগ্রগতি বার ব্যবহার করে না এবং অগ্রগতি বারের উপাদানটির নিজস্ব স্টাইল রয়েছে।

বুটস্ট্র্যাপ প্রগ্রেস বারে ব্যবহৃত 2 টি CSS ক্লাস

বুটস্ট্র্যাপ 4 অগ্রগতি বার তৈরি করতে নিম্নলিখিত CSS ক্লাস ব্যবহার করে :

  • ".Progress" ক্লাসটি অগ্রগতি বারের জন্য বাইরের মোড়কের জন্য ব্যবহৃত হয়। এটি মোড়কের মধ্যে একাধিক অগ্রগতি বার ধারণ করতে ব্যবহৃত হয়।
  • ".Progress-bar" শ্রেণীটি প্রগতির শতাংশ দেখানোর জন্য প্রকৃত অগ্রগতি বার তৈরি করতে ব্যবহৃত হয়।
  • প্রতিটি অগ্রগতি বারের প্রস্থ স্পষ্টভাবে অতিরিক্ত সিএসএস ক্লাসের সাথে সংজ্ঞায়িত করা উচিত।
  • অতিরিক্তভাবে আপনি পঠনযোগ্যতার উদ্দেশ্যে অগ্রগতি বারে "ভূমিকা" এবং "আরিয়া" বৈশিষ্ট্য যুক্ত করতে পারেন।
  • বর্তমান অগ্রগতির মান নির্দেশ করতে "আরিয়া-ভ্যালিউনো" ব্যবহার করা হয়, "আরিয়া-ভ্যালুয়ামিন" হল সর্বনিম্ন মান যা 0 এবং "আরিয়া-ভ্যালুম্যাক্স" সর্বোচ্চ মান যা 100।

আসুন এই ক্লাসগুলি ব্যবহার করে কিছু উদাহরণ তৈরি করি।

3 ডিফল্ট প্রগ্রেস বার

পটভূমির অগ্রগতি এবং লাইটগ্রাই দেখানোর জন্য ডিফল্ট প্রগ্রেস বার প্রাথমিক রঙ ব্যবহার করে। 0, 25, 50, 75 এবং 100% অগ্রগতি সহ পাঁচটি অগ্রগতি বার তৈরির কোড নিচে দেওয়া হল।

<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 w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar w-50" role="progressbar" aria-valuenow="50" 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> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div>

এটি ব্রাউজারে নীচের মত দেখাবে:

উপরে উল্লিখিত হিসাবে, প্রতিটি অগ্রগতি বারের একটি প্রস্থ স্পষ্টভাবে সংজ্ঞায়িত করা উচিত যা সমাপ্তি দেখায়। আপনি এই উদ্দেশ্যে ইনলাইন স্টাইল বা ইউটিলিটি ক্লাস ব্যবহার করতে পারেন। আমরা ইউটিলিটি সাইজিং ক্লাস ব্যবহার করেছি যথাক্রমে w-25, w-50 এবং w-75 সহ 25%, 50% এবং 75%। 100% প্রস্থের জন্য, আমরা "প্রস্থ: 100%" সহ ইনলাইন স্টাইল ব্যবহার করেছি।

সব লাইন একই লাইনে দেখা যাচ্ছে তা এড়ানোর জন্য অগ্রগতি বারের মধ্যে ম্যানুয়াল লাইন বিরতি যোগ করতে ভুলবেন না।

পটভূমি সহ 4 অগ্রগতি বার

অন্যান্য অনেক উপাদানের অনুরূপ, আপনি কেবল ব্যাকগ্রাউন্ড ইউটিলিটি ক্লাস ব্যবহার করে ব্যাকগ্রাউন্ডকে সাফল্য, সতর্কতা, তথ্য, বিপদ, গা dark় বা গৌণ রঙে পরিবর্তন করতে পারেন।

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

অগ্রগতি বারগুলি নীচের মত দেখাবে:

কিভাবে বুটস্ট্র্যাপ 5 প্রগ্রেস বার তৈরি করবেন?

মনে রাখবেন প্রাথমিক রঙ হল ডিফল্ট মান তাই আপনি অগ্রগতি প্রাথমিক রঙের হতে চান তা উল্লেখ করার দরকার নেই। এছাড়াও আপনি হালকা ব্যাকগ্রাউন্ড কালার ব্যবহার করতে পারবেন না কারণ প্রগ্রেস বারের ব্যাকগ্রাউন্ডও হালকা রঙের।

আপনি অগ্রগতি বারের পটভূমি পরিবর্তন করতে বাইরের অগ্রগতির মোড়কে ব্যাকগ্রাউন্ড ইউটিলিটি ক্লাস ব্যবহার করতে পারেন। উদাহরণস্বরূপ, নীচের কোডটি লাইটগ্রেয়ের পরিবর্তে লাল (বিপদ) রঙের পটভূমি সহ অগ্রগতি বার তৈরি করবে।

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

ফলাফলটি ব্রাউজারে নীচের মত দেখাবে:

কিভাবে বুটস্ট্র্যাপ 5 প্রগ্রেস বার তৈরি করবেন?

লেবেল সহ 5 অগ্রগতি বার

আপনি যদি অগ্রগতি বারে লেবেল যুক্ত করতে চান, বন্ধ করার আগে কেবল পাঠ্য যোগ করুন

প্রতিটি অগ্রগতি বারের ট্যাগ। 75% সমাপ্তি দেখানোর জন্য নীচে একটি উদাহরণ:

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

লেবেলটি নীচের মতো কেন্দ্রের সারিবদ্ধতার সাথে বারের উপরে দেখানো হবে:

কিভাবে বুটস্ট্র্যাপ 5 প্রগ্রেস বার তৈরি করবেন?

6 একাধিক অগ্রগতি বার

একটি একক বাইরের মোড়কের মধ্যে একাধিক অগ্রগতি বার যোগ করা একক লাইনে সমস্ত বার তৈরি করবে।

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

একাধিক অগ্রগতি বার নীচের মত দেখতে হবে:

কিভাবে বুটস্ট্র্যাপ 5 প্রগ্রেস বার তৈরি করবেন?

7 ডোরাকাটা অগ্রগতি বার

".Progress-bar-striped" ক্লাসটি স্ট্রিপড প্রগ্রেস বার তৈরিতে ব্যবহৃত হয় (ব্যাকগ্রাউন্ড ইউটিলিটি ক্লাস বিভিন্ন রং দেখানোর জন্য ব্যবহৃত হয়)।

<div class="progress"> <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div> </div>

ডোরাকাটা অগ্রগতি বার নীচের মত দেখতে হবে:

কিভাবে বুটস্ট্র্যাপ 5 প্রগ্রেস বার তৈরি করবেন?

8 অ্যানিমেটেড স্ট্রিপড প্রগ্রেস বার

শেষ বিকল্পটি হল ".progress-bar-animated" ক্লাস ব্যবহার করে স্ট্রাইপকে অ্যানিমেট করা।

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

এটি সবুজ স্ট্রাইপ সহ একটি অ্যানিমেটেড প্রগ্রেস বার তৈরি করবে। মনে রাখবেন আপনি কেবল ডোরাকাটা বারগুলি অ্যানিমেট করতে পারেন এবং ডিফল্ট নয়।

9 অগ্রগতি বারের উচ্চতা বা পুরুত্ব পরিবর্তন করা

ডিফল্টরূপে অগ্রগতি বার 1rem উচ্চতা হবে। আপনি। আসুন 0.rem এবং 30px উচ্চতা সহ দুটি বার তৈরি করি:

<div class="progress"> <div class="progress-bar bg-danger" role="progressbar" style="width: 50%; height: 0.5rem;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div><br> <div class="progress"> <div class="progress-bar bg-info" role="progressbar" style="width: 75%; height: 30px;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div>

ফলাফলটি ব্রাউজারে নীচের মত হওয়া উচিত:

কিভাবে বুটস্ট্র্যাপ 5 প্রগ্রেস বার তৈরি করবেন?

উচ্চতা পরিবর্তনের সমস্যা হল লেবেলগুলি যখন ব্যবহার করা হবে ঠিকভাবে সারিবদ্ধ হবে না। আবার আপনার উল্লম্ব কেন্দ্রে লেবেলগুলিকে সারিবদ্ধ করতে ম্যানুয়ালি অতিরিক্ত শৈলী ব্যবহার করা উচিত।


বুটস্ট্র্যাপ 5 শিখুন (সূচক )


রেকর্ডিং উত্স: webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত