मुख्य सामग्रीमा जानुहोस् कागजात नेभिगेसनमा जानुहोस्
in English

प्रगति

स्ट्याक्ड बारहरू, एनिमेटेड पृष्ठभूमिहरू, र पाठ लेबलहरूका लागि समर्थन विशेषता रहेको बुटस्ट्र्याप अनुकूलन प्रगति पट्टीहरू प्रयोग गर्नका लागि कागजात र उदाहरणहरू।

यस पृष्ठमा

यसले कसरी काम गर्छ

प्रगति कम्पोनेन्टहरू दुई 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; }
  }
}