እድገት

ለተደራረቡ አሞሌዎች፣ የታነሙ ዳራዎች እና የጽሑፍ መለያዎች የሚያሳዩ የBootstrap ብጁ ሂደት አሞሌዎችን ለመጠቀም ሰነዶች እና ምሳሌዎች።

በዚህ ገጽ ላይ

እንዴት እንደሚሰራ

የሂደት አካሎች የተገነቡት በሁለት የኤችቲኤምኤል አካላት፣ አንዳንድ CSS ስፋቱን ለማዘጋጀት እና በጥቂት ባህሪያት ነው። የሂደት አሞሌዎችን መቆለል፣ ማንቃት እና የጽሑፍ መለያዎችን በእነሱ ላይ ማስቀመጥ መቻልን በማረጋገጥ HTML5 ን<progress> አንጠቀምም ።

.progressየሂደቱን አሞሌ ከፍተኛውን ዋጋ ለማመልከት እንደ መጠቅለያ እንጠቀማለን ።
.progress-barእስካሁን ያለውን እድገት ለማመልከት ከውስጥ እንጠቀማለን ።
ስፋታቸውን .progress-barለማዘጋጀት የውስጥ መስመር ዘይቤ፣ የመገልገያ ክፍል ወይም ብጁ CSS ያስፈልገዋል።
እንዲሁም ተደራሽ ለማድረግ .progress-barየተወሰኑ roleእና ariaባህሪያትን ይፈልጋል፣ ተደራሽ የሆነ ስም (በመጠቀም aria-label፣ aria-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።

25%

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