Sourceምዕባለ
ንዝተደራረቡ ባር፣ ተንቀሳቓሲ ድሕረ ባይታታትን ናይ ጽሑፍ ስያመታትን ደገፍ ዘለዎም ናይ ቡትስትራፕ ብሕታዊ ምዕባለ ባር ንምጥቃም ዝሕግዙ ሰነዳትን ኣብነታትን።
ናይ ምዕባለ ኣካላት ብኽልተ HTML ባእታታት ይህነጹ፣ ገለ CSS ስፍሓት ንምቕማጥ፣ ከምኡውን ውሑዳት ባህርያት። ንሕና HTML5 <progress>
element ኣይንጥቀመሉን ኢና ፣ ንገስጋስ ባር ክትድምር፣ ህያው ክትገብረሎምን ኣብ ልዕሊኦም ናይ ጽሑፍ ስያመታት ከተቐምጥን ከም እትኽእል ነረጋግጽ።
- ነቲ as a wrapper ንጥቀመሉ
.progress
max value ናይቲ progress bar ንምምልካት።
.progress-bar
ክሳብ ሕዚ ዘሎ ምዕባለ ንምምልካት ውሽጣዊ ንጥቀመሉ ።
- እቲ
.progress-bar
ስፍሓቶም ንምቕማጥ ናይ ውሽጢ መስመር ቅዲ፣ ዩቲሊቲ ክፍሊ ወይ ብሕታዊ CSS ይሓትት።
- እቲ ውን ተበጻሒ ንምግባር
.progress-bar
ገለን ባህርያትን ይሓትት role
።aria
ነዚ ኩሉ ብሓባር ኣቐምጦ እሞ እዞም ዝስዕቡ ኣብነታት ኣለዉኻ።
ቡትስትራፕ ስፍሓት ንምቕማጥ ብኣጻብዕ ዝቑጸሩ ዩቲሊቲታት ይህብ ። እዚኦም ከከም ድሌታትካ ንገስጋስ ብቕልጡፍ ኣብ ምውቃር ክሕግዙ ይኽእሉ እዮም።
ኣብ ውሽጢ .progress-bar
.
height
ኣብቲ ጥራይ ኢና ዋጋ ነቐምጥ .progress
፣ ስለዚ ነቲ ዋጋ እንተቐይርካዮ እቲ ውሽጣዊ .progress-bar
ብኣውቶማቲክ ብኡ መሰረት ዓቐኑ ክቕይር እዩ።
መልክዕ ውልቃዊ ምዕባለ ባር ንምቕያር ድሕረ ባይታ ዩቲሊቲ ክፍልታት ተጠቐም።
ኣድላዪ እንተኾይኑ ኣብ ሓደ ናይ ምዕባለ ክፍሊ ብዙሓት ናይ ምዕባለ ባር ኣካትት።
ብመንገዲ CSS gradient ኣብ ልዕሊ ሕብሪ ድሕረ ባይታ ናይቲ ናይ ምዕባለ ባር መስመር ንምትግባር .progress-bar-striped
ናብ ዝኾነ ወስኹ ።.progress-bar
እቲ ስሪት ዘለዎ ግራድየንት እውን ተንቀሳቓሲ ክኸውን ይኽእል እዩ። ብመንገዲ CSS3 ተንቀሳቓሲ ስእልታት ነቶም መስመራት ካብ የማን ናብ ጸጋም ንኽንቀሳቐሱ ናብ .progress-bar-animated
ምውሳኽ ።.progress-bar