प्रगति

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

यस पृष्ठमा

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

प्रगति कम्पोनेन्टहरू दुई HTML तत्वहरू, चौडाइ सेट गर्नका लागि केही CSS, र केही विशेषताहरूसँग बनाइएका छन्। हामी HTML5 <progress>तत्व प्रयोग गर्दैनौं , तपाईंले प्रगति पट्टीहरू स्ट्याक गर्न सक्नुहुन्छ, तिनीहरूलाई एनिमेट गर्न सक्नुहुन्छ, र तिनीहरूमा पाठ लेबलहरू राख्न सक्नुहुन्छ।

हामी .progressप्रगति पट्टीको अधिकतम मान संकेत गर्न र्यापरको रूपमा प्रयोग गर्छौं।
.progress-barहामी अहिलेसम्मको प्रगति संकेत गर्न भित्री प्रयोग गर्दछौं ।
.progress-barतिनीहरूको चौडाइ सेट गर्न इनलाइन शैली, उपयोगिता वर्ग, वा अनुकूलन CSS आवश्यक छ ।
पहुँचयोग्य नाम ( , , वा समान प्रयोग गरी) सहित यसलाई पहुँचयोग्य बनाउन केही र विशेषताहरू .progress-barपनि आवश्यक पर्दछ ।roleariaaria-labelaria-labelledby

त्यो सबै सँगै राख्नुहोस्, र तपाईंसँग निम्न उदाहरणहरू छन्।

html

<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>

बुटस्ट्र्यापले चौडाइ सेट गर्नका लागि मुट्ठीभर उपयोगिताहरू प्रदान गर्दछ । तपाइँको आवश्यकताहरु मा निर्भर गर्दछ, यी छिटो कन्फिगर प्रगति संग मद्दत गर्न सक्छ।

html

<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।

२५%

html

<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स्वतः तदनुसार रिसाइज हुनेछ।

html

<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>

पृष्ठभूमिहरू

व्यक्तिगत प्रगति पट्टीहरूको उपस्थिति परिवर्तन गर्न पृष्ठभूमि उपयोगिता कक्षाहरू प्रयोग गर्नुहोस्।

html

<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कक्षासँग लुकेको अतिरिक्त पाठ।

धेरै बारहरू

यदि तपाईंलाई आवश्यक छ भने प्रगति कम्पोनेन्टमा धेरै प्रगति पट्टीहरू समावेश गर्नुहोस्।

html

<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

html

<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

html

<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>

CSS

चरहरू

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; }
  }
}