Question

我想知道如何动态设置Bootstrap进度条宽度。我们假设我有一个像这样的php文件

$server_maxclients = 5; // dynamic 
$server_clientsonline = 1 // dynamic

现在，如果我想创建一个进度条，我会做

<div class="progress-bar" role="progressbar" aria-valuenow="<?php echo $server_clientsonline; ?>" aria-valuemin="0" aria-valuemax="<?php echo $server_maxclients; ?>" style="background-color: #4ba84b;width: 20%;"></div>

20％因为100％/ 5 = 20％，但我该怎么办？当我有例如：

$server_clientsonline = 4;
$server_maxclients = 50;

Answer 1

获得百分比的正确逻辑是： -

<?php echo ($server_clientsonline*100/$server_maxclients).'%';?>

您需要将此代码直接用于style，并且您必须向height提供一些div以使其可见。

如下所示： -

<div 
    class="progress-bar" 
    role="progressbar" 
    aria-valuenow="<?php echo $server_clientsonline; ?>" 
    aria-valuemin="0" 
    aria-valuemax="<?php echo $server_maxclients; ?>" 
    style="background-color: #4ba84b;width: <?php echo ($server_clientsonline*100/$server_maxclients).'%';?>; height:30px;">
</div>

动态设置Bootstrap进度条

1 个答案: