Source

অগ্রগতি

স্ট্যাক করা বার, অ্যানিমেটেড ব্যাকগ্রাউন্ড এবং টেক্সট লেবেলগুলির জন্য সমর্থন সমন্বিত বুটস্ট্র্যাপ কাস্টম প্রগ্রেস বার ব্যবহার করার জন্য ডকুমেন্টেশন এবং উদাহরণ।

কিভাবে এটা কাজ করে

প্রগতি উপাদান দুটি 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

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