我使用
ruby gem为我的Rails 4应用程序安装了bootstrap.
我已经将动画进度条的代码从bootstraps docs直接复制并粘贴到我的页面中：
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
但酒吧不是动画.我唯一能想到的是我在sass变量中更改了条形图的颜色.
为什么不动画？
编辑
我的酒吧看起来像什么：
编辑
这是我使用活动类时应用的CSS：
解决方法
只是半透明的白色条纹(rgba(255,255,.15))没有出现在某些颜色上.
将Chrome浏览器的黄色显示为黄色.如果我们在Photoshop中使用该颜色,然后在其上放置.15不透明度的白色条纹,则不可见.我把轮廓放在这里,这样你就可以看到条纹的位置了.
因此,对于某些颜色,您可能需要调整条纹颜色的alpha.我在.progress-bar中添加了一个.progress-bar-primary类,与你添加.progress-bar-warning等的方式类似.
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
然后为.progress-bar-primary,只需根据自己的喜好更改条纹的alpha.对于Chrome Yellow,我使用了0.75不透明度.
.progress-bar-primary {
background-color: yellow;
}
.progress-striped .progress-bar-primary {
background-image: linear-gradient(45deg,rgba(255,.75) 25%,transparent 25%,transparent 50%,.75) 50%,.75) 75%,transparent 75%,transparent);
}