Source

প্ৰগতি

ষ্টেক কৰা বাৰসমূহ, এনিমেটেড পটভূমিসমূহ, আৰু লিখনী লেবেলসমূহৰ বাবে সমৰ্থন বৈশিষ্ট্যযুক্ত Bootstrap স্বনিৰ্বাচিত অগ্ৰগতি বাৰসমূহ ব্যৱহাৰ কৰাৰ বাবে দস্তাবেজ আৰু উদাহৰণসমূহ।

কেনেকৈ কাম কৰে

প্ৰগ্ৰেছ উপাদানসমূহ দুটা 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>