ষ্টেক কৰা বাৰসমূহ, এনিমেটেড পটভূমিসমূহ, আৰু লিখনী লেবেলসমূহৰ বাবে সমৰ্থন বৈশিষ্ট্যযুক্ত 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>