ናብ ቀንዲ ትሕዝቶ ዘልል ናብ docs navigation ዘልል
Check
in English

ምዕባለ

ንዝተደራረቡ ባርታት፣ ተንቀሳቓሲ ድሕረ ባይታታትን ናይ ጽሑፍ ስያመታትን ደገፍ ዘለዎም ናይ ቡትስትራፕ ብሕታዊ ምዕባለ ባር ንምጥቃም ዝሕግዙ ሰነዳትን ኣብነታትን።

ኣብዚ ገጽ

ከመይ ይሰርሕ

ናይ ምዕባለ ኣካላት ብኽልተ HTML ባእታታት ይህነጹ፣ ገለ CSS ስፍሓት ንምቕማጥ፣ ከምኡውን ውሑዳት ባህርያት። ንሕና HTML5 <progress>element ኣይንጥቀመሉን ኢና ፣ ንገስጋስ ባር ክትድምር፣ ህያው ክትገብረሎምን ኣብ ልዕሊኦም ናይ ጽሑፍ ስያመታት ከተቐምጥን ከም እትኽእል ነረጋግጽ።

  • ነቲ as a wrapper ንጥቀመሉ .progressmax value ናይቲ progress bar ንምምልካት።
  • .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 gradient ኣብ ልዕሊ ሕብሪ ድሕረ ባይታ ናይቲ ናይ ምዕባለ ባር መስመር ንምትግባር .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>

ሲኤስኤስ

ተለዋዋጢ ረቛሒታት

ኣብ v5.2.0 ተወሰኸ

ከም ኣካል ናይቲ ቡትስትራፕ ዝምዕብል ዘሎ CSS ተለዋዋጢ ኣቀራርባ፡ ምዕባለ ባር ሕጂ .progressንዝተዓጻጸፈ ናይ ሓቂ ግዜ ምምዕርራይ ከባብያዊ CSS ተለዋዋጢ on ይጥቀሙ። ክብርታት ናይ 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};

ሳስ ተለዋዋጢ ረቛሒታት

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