प्रगति
स्ट्याक्ड बारहरू, एनिमेटेड पृष्ठभूमिहरू, र पाठ लेबलहरूका लागि समर्थन विशेषता रहेको बुटस्ट्र्याप अनुकूलन प्रगति पट्टीहरू प्रयोग गर्नका लागि कागजात र उदाहरणहरू।
यसले कसरी काम गर्छ
प्रगति कम्पोनेन्टहरू दुई HTML तत्वहरू, चौडाइ सेट गर्नका लागि केही CSS, र केही विशेषताहरूसँग बनाइएका छन्। हामी HTML5 <progress>तत्व प्रयोग गर्दैनौं , तपाईंले प्रगति पट्टीहरू स्ट्याक गर्न सक्नुहुन्छ, तिनीहरूलाई एनिमेट गर्न सक्नुहुन्छ, र तिनीहरूमा पाठ लेबलहरू राख्न सक्नुहुन्छ।
- हामी
.progressप्रगति पट्टीको अधिकतम मान संकेत गर्न र्यापरको रूपमा प्रयोग गर्छौं। .progress-barहामी अहिलेसम्मको प्रगति संकेत गर्न भित्री प्रयोग गर्दछौं ।.progress-barतिनीहरूको चौडाइ सेट गर्न इनलाइन शैली, उपयोगिता वर्ग, वा अनुकूलन CSS आवश्यक छ ।- यसलाई पहुँचयोग्य बनाउन केही र विशेषताहरू
.progress-barपनि चाहिन्छ ।rolearia
त्यो सबै सँगै राख्नुहोस्, र तपाईंसँग निम्न उदाहरणहरू छन्।
<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>
सास
चरहरू
$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; }
}
}