অগ্রগতি

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

এই পৃষ্ঠায়

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

প্রগতি উপাদান দুটি HTML উপাদান, প্রস্থ সেট করার জন্য কিছু CSS এবং কয়েকটি বৈশিষ্ট্য দিয়ে তৈরি করা হয়। আমরা HTML5 <progress>উপাদান ব্যবহার করি না , নিশ্চিত করে যে আপনি অগ্রগতি বার স্ট্যাক করতে পারেন, তাদের অ্যানিমেট করতে পারেন এবং তাদের উপরে পাঠ্য লেবেল স্থাপন করতে পারেন।

আমরা .progressঅগ্রগতি বারের সর্বাধিক মান নির্দেশ করতে একটি মোড়ক হিসাবে ব্যবহার করি।
.progress-barআমরা এখন পর্যন্ত অগ্রগতি নির্দেশ করতে অভ্যন্তরীণ ব্যবহার করি ।
তাদের প্রস্থ সেট .progress-barকরার জন্য একটি ইনলাইন স্টাইল, ইউটিলিটি ক্লাস বা কাস্টম CSS প্রয়োজন।
.progress-barএটিকে অ্যাক্সেসযোগ্য করার জন্য কিছু roleএবং বৈশিষ্ট্যেরও প্রয়োজন aria, একটি অ্যাক্সেসযোগ্য নাম সহ (ব্যবহার করে aria-label, aria-labelledbyবা অনুরূপ)।

যে সব একসাথে রাখুন, এবং আপনি নিম্নলিখিত উদাহরণ আছে.

html

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

বুটস্ট্র্যাপ প্রস্থ নির্ধারণের জন্য মুষ্টিমেয় ইউটিলিটি প্রদান করে । আপনার প্রয়োজনের উপর নির্ভর করে, এগুলি দ্রুত অগ্রগতি কনফিগার করতে সহায়তা করতে পারে।

html

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

লেবেল

এর মধ্যে পাঠ্য স্থাপন করে আপনার অগ্রগতি বারগুলিতে লেবেল যুক্ত করুন .progress-bar৷

২৫%

html

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Example with label" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

উচ্চতা

আমরা শুধুমাত্র heightতে একটি মান সেট করি .progress, তাই আপনি যদি সেই মানটি পরিবর্তন করেন তাহলে অভ্যন্তরীণটি .progress-barস্বয়ংক্রিয়ভাবে সেই অনুযায়ী আকার পরিবর্তন করবে।

html

<div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" aria-label="Example 1px high" 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" aria-label="Example 20px high" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

পটভূমি

ব্যাকগ্রাউন্ড ইউটিলিটি ক্লাস ব্যবহার করুন স্বতন্ত্র অগ্রগতি বারের চেহারা পরিবর্তন করতে।

html

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" aria-label="Success example" 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" aria-label="Info example" 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" aria-label="Warning example" 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" aria-label="Danger example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

সহায়ক প্রযুক্তির অর্থ বোঝানো

অর্থ যোগ করার জন্য রঙ ব্যবহার করা শুধুমাত্র একটি ভিজ্যুয়াল ইঙ্গিত দেয়, যা সহায়ক প্রযুক্তির ব্যবহারকারীদের - যেমন স্ক্রিন রিডারদের কাছে জানানো হবে না। নিশ্চিত করুন যে রঙ দ্বারা নির্দেশিত তথ্য হয় বিষয়বস্তু থেকে স্পষ্ট হয় (যেমন দৃশ্যমান পাঠ্য), অথবা বিকল্প উপায়ে অন্তর্ভুক্ত করা হয়েছে, যেমন .visually-hiddenক্লাসের সাথে লুকানো অতিরিক্ত পাঠ্য।

একাধিক বার

আপনার প্রয়োজন হলে একটি অগ্রগতি উপাদানে একাধিক অগ্রগতি বার অন্তর্ভুক্ত করুন।

html

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Segment one" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" aria-label="Segment two" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" aria-label="Segment three" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

ডোরাকাটা

অগ্রগতি বারের পটভূমির রঙের উপর CSS গ্রেডিয়েন্টের মাধ্যমে একটি স্ট্রাইপ প্রয়োগ করতে যেকোনোটিতে .progress-bar-stripedযোগ করুন ।.progress-bar

html

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" aria-label="Default striped example" 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" aria-label="Success striped example" 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" aria-label="Info striped example" 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" aria-label="Warning striped example" 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" aria-label="Danger striped example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

অ্যানিমেটেড স্ট্রাইপ

ডোরাকাটা গ্রেডিয়েন্টও অ্যানিমেটেড হতে পারে। CSS3 অ্যানিমেশনের মাধ্যমে ডান থেকে বামে স্ট্রাইপ অ্যানিমেট করতে .progress-bar-animatedযোগ করুন ।.progress-bar

html

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

সিএসএস

ভেরিয়েবল

v5.2.0 এ যোগ করা হয়েছে

বুটস্ট্র্যাপের বিকশিত CSS ভেরিয়েবল পদ্ধতির অংশ হিসাবে, অগ্রগতি বারগুলি এখন .progressউন্নত রিয়েল-টাইম কাস্টমাইজেশনের জন্য স্থানীয় CSS ভেরিয়েবল ব্যবহার করে। CSS ভেরিয়েবলের মান Sass এর মাধ্যমে সেট করা হয়, তাই Sass কাস্টমাইজেশন এখনও সমর্থিত।

  --#{$prefix}progress-height: #{$progress-height};
  @include rfs($progress-font-size, --#{$prefix}progress-font-size);
  --#{$prefix}progress-bg: #{$progress-bg};
  --#{$prefix}progress-border-radius: #{$progress-border-radius};
  --#{$prefix}progress-box-shadow: #{$progress-box-shadow};
  --#{$prefix}progress-bar-color: #{$progress-bar-color};
  --#{$prefix}progress-bar-bg: #{$progress-bar-bg};
  --#{$prefix}progress-bar-transition: #{$progress-bar-transition};

Sass ভেরিয়েবল

$progress-height:                   1rem;
$progress-font-size:                $font-size-base * .75;
$progress-bg:                       $gray-200;
$progress-border-radius:            $border-radius;
$progress-box-shadow:               $box-shadow-inset;
$progress-bar-color:                $white;
$progress-bar-bg:                   $primary;
$progress-bar-animation-timing:     1s linear infinite;
$progress-bar-transition:           width .6s ease;

কীফ্রেম

এর জন্য CSS অ্যানিমেশন তৈরি করতে ব্যবহৃত হয় .progress-bar-animated। এর মধ্যে অন্তর্ভুক্ত scss/_progress-bar.scss।

@if $enable-transitions {
  @keyframes progress-bar-stripes {
    0% { background-position-x: $progress-height; }
  }
}