如何在bootstrap中輸入進度條？

很高興見到你！如何在bootstrap中輸入進度條？

我有一個關於引導的問題。所以我基本上有這個進度條，我已經設法以毫升和百分比顯示當前的進度（它是爲了顯示每日攝入的水流量/所有要求）。現在，我想在右側顯示剩餘的ml（百分比）數量，如圖所示：完成20％/剩下80％。我希望你得到我想要的，對我的英語感到抱歉，我不是本地人。

這是我到目前爲止的代碼：

     <div class="progress"> 
          <div class="progress-bar progress-bar-striped progress-bar-info active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">800 ml (20%) 
          </div> 
         </div>

來源

2016-01-20 Tsvetilin Boynovski

你目前的代碼是什麼？ – hkk

我認爲你需要在這裏提供更多的細節。也許發佈一些代碼？很明顯，你需要添加另一個html元素，並相應地設置它。 – charrondev

是的，感謝您的迴應。這裏是我的代碼到目前爲止：

800 ml (20%)

–

這一個行之有效：

增加了新樣式的CSS

.progress-bar1 { 
font-size: 12px; 
line-height: 20px; 
color: #000; 
text-align: center; 
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); 
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); 
-webkit-transition: width .6s ease; 
-o-transition: width .6s ease; 
transition: width .6s ease; 
}

更改HTML到：

<div class="progress"> 
          <div class="progress-bar progress-bar-striped progress-bar-info active" role="progressbar" aria-valuenow="20" 
           aria-valuemin="0" aria-valuemax="100" style="width: 20%">800 ml (20%) 
          </div><p class="progress-bar1 text-center">140</p> 
         </div>

結果：

來源

2016-01-21 06:13:40

嘗試把文本兩種span S，一個向左浮動，一個飄然權，clearfix含有進度條。

來源

2016-01-20 21:33:58 hkk

我試過了，雖然我想我沒有明確地將其正確地固定。它沒有工作。 –

您是否嘗試過使用[flexboxes]（http://stackoverflow.com/a/10277235/2827555）？ – hkk

這樣的事情？

.container { 
 
    width: 300px; 
 
    margin: 30px auto 0; 
 
} 
 

 
.progress { 
 
    position:relative; 
 
    overflow: hidden; 
 
    height: 18px; 
 
    margin-bottom: 18px; 
 
    background-color: #f7f7f7; 
 
    background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9); 
 
    background-image: -ms-linear-gradient(top, #f5f5f5, #f9f9f9); 
 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9)); 
 
    background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9); 
 
    background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9); 
 
    background-image: linear-gradient(top, #f5f5f5, #f9f9f9); 
 
    background-repeat: repeat-x; 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0); 
 
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); 
 
    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); 
 
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); 
 
    -webkit-border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    border-radius: 4px; 
 
} 
 

 
.progress .bar { 
 
    width: 0%; 
 
    height: 18px; 
 
    color: #ffffff; 
 
    font-size: 12px; 
 
    text-align: center; 
 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 
 
    background-color: #0e90d2; 
 
    background-image: -moz-linear-gradient(top, #149bdf, #0480be); 
 
    background-image: -ms-linear-gradient(top, #149bdf, #0480be); 
 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be)); 
 
    background-image: -webkit-linear-gradient(top, #149bdf, #0480be); 
 
    background-image: -o-linear-gradient(top, #149bdf, #0480be); 
 
    background-image: linear-gradient(top, #149bdf, #0480be); 
 
    background-repeat: repeat-x; 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0); 
 
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); 
 
    -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); 
 
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    -webkit-transition: width 0.6s ease; 
 
    -moz-transition: width 0.6s ease; 
 
    -ms-transition: width 0.6s ease; 
 
    -o-transition: width 0.6s ease; 
 
    transition: width 0.6s ease; 
 
} 
 

 
.progress-striped .bar { 
 
    background-color: #62c462; 
 
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); 
 
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
 
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
 
    background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
 
    background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
 
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
 
    -webkit-background-size: 40px 40px; 
 
    -moz-background-size: 40px 40px; 
 
    -o-background-size: 40px 40px; 
 
    background-size: 40px 40px; 
 
} 
 

 
.progress.active .bar { 
 
    -webkit-animation: progress-bar-stripes 2s linear infinite; 
 
    -moz-animation: progress-bar-stripes 2s linear infinite; 
 
    animation: progress-bar-stripes 2s linear infinite; 
 
} 
 

 
.progress-danger .bar { 
 
    background-color: #dd514c; 
 
    background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35); 
 
    background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35); 
 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35)); 
 
    background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35); 
 
    background-image: -o-linear-gradient(top, #ee5f5b, #c43c35); 
 
    background-image: linear-gradient(top, #ee5f5b, #c43c35); 
 
    background-repeat: repeat-x; 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0); 
 
} 
 

 
.progress-danger.progress-striped .bar { 
 
    background-color: #ee5f5b; 
 
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); 
 
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
 
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
 
    background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
 
    background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
 
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
 
} 
 

 
.progress-success .bar { 
 
    background-color: #5eb95e; 
 
    background-image: -moz-linear-gradient(top, #62c462, #57a957); 
 
    background-image: -ms-linear-gradient(top, #62c462, #57a957); 
 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957)); 
 
    background-image: -webkit-linear-gradient(top, #62c462, #57a957); 
 
    background-image: -o-linear-gradient(top, #62c462, #57a957); 
 
    background-image: linear-gradient(top, #62c462, #57a957); 
 
    background-repeat: repeat-x; 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0); 
 
} 
 

 
.progress-success.progress-striped .bar { 
 
    background-color: #62c462; 
 
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); 
 
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
 
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
 
    background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
 
    background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
 
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
 
} 
 

 
.progress-info .bar { 
 
    background-color: #4bb1cf; 
 
    background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); 
 
    background-image: -ms-linear-gradient(top, #5bc0de, #339bb9); 
 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9)); 
 
    background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9); 
 
    background-image: -o-linear-gradient(top, #5bc0de, #339bb9); 
 
    background-image: linear-gradient(top, #5bc0de, #339bb9); 
 
    background-repeat: repeat-x; 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0); 
 
} 
 

 
.progress-info.progress-striped .bar { 
 
    background-color: #5bc0de; 
 
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); 
 
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
 
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
 
    background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
 
    background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
 
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
 
} 
 

 

 
.remainder{ 
 
    float:right; 
 
    font-size: 12px; 
 
    color:blue; 
 
}

<div class="container"> 
 

 
<div class="progress"> 
 
<div class="progress progress-info 
 
    progress-striped"> 
 
    <span class='remainder'>80%</span> 
 
    <div class="bar" 
 
     style="width: 30%;">800 ml (20%)</div> 
 
</div> 
 

 
<div class="progress progress-danger 
 
    progress-striped active"> 
 
</div>

來源

2016-01-20 22:38:22 repzero

感謝您的幫助！它工作，雖然昨天我找到了一個較短的解決方案，但有一些互聯網問題，不能提前發佈。你可以檢查出來。 –

如何在bootstrap中輸入進度條？

回答

相關問題