প্ৰগতি
ষ্টেক কৰা বাৰসমূহ, এনিমেটেড পটভূমিসমূহ, আৰু লিখনী লেবেলসমূহৰ বাবে সমৰ্থন বৈশিষ্ট্যযুক্ত Bootstrap স্বনিৰ্বাচিত অগ্ৰগতি বাৰসমূহ ব্যৱহাৰ কৰাৰ বাবে দস্তাবেজ আৰু উদাহৰণসমূহ।
কেনেকৈ কাম কৰে
প্ৰগ্ৰেছ উপাদানসমূহ দুটা HTML উপাদানৰ সৈতে নিৰ্মাণ কৰা হয়, প্ৰস্থ নিৰ্ধাৰণ কৰিবলে কিছুমান CSS, আৰু কেইটামান বৈশিষ্ট্য। আমি HTML5 <progress>উপাদান ব্যৱহাৰ নকৰো , নিশ্চিত কৰি যে আপুনি অগ্ৰগতি বাৰসমূহ ষ্টেক কৰিব পাৰে, সিহতক এনিমেট কৰিব পাৰে, আৰু সিহতৰ ওপৰত লিখনী লেবেলসমূহ স্থাপন কৰিব পাৰে।
- আমি
.progressপ্ৰগ্ৰেছ বাৰৰ সৰ্বোচ্চ মান দেখুৱাবলৈ ৰেপাৰ হিচাপে ব্যৱহাৰ কৰো। .progress-barআমি এতিয়ালৈকে হোৱা অগ্ৰগতিৰ ইংগিত দিবলৈ ভিতৰৰ অংশটো ব্যৱহাৰ কৰো ।.progress-barসিহঁতৰ প্ৰস্থ নিৰ্ধাৰণ কৰিবলে এটা ইনলাইন শৈলী, সঁজুলি শ্ৰেণী, বা স্বনিৰ্বাচিত CSS ৰ প্ৰয়োজন ।- ইয়াক অভিগম্য কৰিবলৈ
.progress-barকিছুমানroleআৰু বৈশিষ্ট্যৰ প্ৰয়োজন হয় , এটা অভিগম্য নাম অন্তৰ্ভুক্ত কৰি ( , , বা অনুৰূপ ব্যৱহাৰ কৰি)।ariaaria-labelaria-labelledby
সেই সকলোবোৰ একেলগে ৰাখিলে আপোনাৰ ওচৰত তলত দিয়া উদাহৰণবোৰ আছে।
<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>বুটষ্ট্ৰেপে প্ৰস্থ সংহতি কৰাৰ বাবে এটা মুষ্টিমেয় সঁজুলি প্ৰদান কৰে । আপোনাৰ প্ৰয়োজন অনুসৰি, এইবোৰে অগ্ৰগতি দ্ৰুতভাৱে বিন্যাস কৰাত সহায় কৰিব পাৰে।
<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.
<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অংশটোৱে স্বয়ংক্ৰিয়ভাৱে সেই অনুসৰি আকাৰ সলনি কৰিব।
<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>পটভূমি
ব্যক্তিগত অগ্ৰগতি বাৰৰ ৰূপ সলনি কৰিবলে পটভূমি সঁজুলি শ্ৰেণীসমূহ ব্যৱহাৰ কৰক।
<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শ্ৰেণীৰ সৈতে লুকুৱাই ৰখা অতিৰিক্ত লিখনী।
একাধিক বাৰ
আপুনি প্ৰয়োজন হ'লে এটা অগ্ৰগতি উপাদানত একাধিক অগ্ৰগতি বাৰ অন্তৰ্ভুক্ত কৰক।
<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
<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
<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 ত যোগ কৰা হৈছেBootstrap ৰ বিকাশশীল 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; }
}
}