অগ্রগতি
স্ট্যাক করা বার, অ্যানিমেটেড ব্যাকগ্রাউন্ড এবং টেক্সট লেবেলগুলির জন্য সমর্থন সমন্বিত বুটস্ট্র্যাপ কাস্টম প্রগ্রেস বার ব্যবহার করার জন্য ডকুমেন্টেশন এবং উদাহরণ।
প্রগতি উপাদান দুটি HTML উপাদান, প্রস্থ সেট করার জন্য কিছু CSS এবং কয়েকটি বৈশিষ্ট্য দিয়ে তৈরি করা হয়। আমরা HTML5 <progress>
উপাদান ব্যবহার করি না , নিশ্চিত করে যে আপনি অগ্রগতি বার স্ট্যাক করতে পারেন, তাদের অ্যানিমেট করতে পারেন এবং তাদের উপরে পাঠ্য লেবেল স্থাপন করতে পারেন।
- আমরা
.progress
অগ্রগতি বারের সর্বাধিক মান নির্দেশ করতে একটি মোড়ক হিসাবে ব্যবহার করি। .progress-bar
আমরা এখন পর্যন্ত অগ্রগতি নির্দেশ করতে অভ্যন্তরীণ ব্যবহার করি ।- তাদের প্রস্থ সেট
.progress-bar
করার জন্য একটি ইনলাইন স্টাইল, ইউটিলিটি ক্লাস বা কাস্টম CSS প্রয়োজন। - এটি অ্যাক্সেসযোগ্য করার
.progress-bar
জন্য কিছুrole
এবং বৈশিষ্ট্যেরও প্রয়োজন।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>
আমরা শুধুমাত্র height
তে একটি মান সেট করি .progress
, তাই আপনি যদি সেই মানটি পরিবর্তন করেন তাহলে অভ্যন্তরীণটি .progress-bar
স্বয়ংক্রিয়ভাবে সেই অনুযায়ী আকার পরিবর্তন করবে।
<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>
অগ্রগতি বারের পটভূমির রঙের উপর CSS গ্রেডিয়েন্টের মাধ্যমে একটি স্ট্রাইপ প্রয়োগ করতে যেকোনোটিতে .progress-bar-striped
যোগ করুন ।.progress-bar
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped 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 progress-bar-striped 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 progress-bar-striped 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 progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
ডোরাকাটা গ্রেডিয়েন্টও অ্যানিমেটেড হতে পারে। CSS3 অ্যানিমেশনের মাধ্যমে ডান থেকে বামে স্ট্রাইপ অ্যানিমেট করতে .progress-bar-animated
যোগ করুন ।.progress-bar