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