引导药丸 CSS答案

【问题标题】：Bootstrap Pills CSS引导药丸 CSS
【发布时间】：2013-12-05 14:20:03
【问题描述】：

我正在我的一个工具上制作“进度”指示器，我希望能够通过蓝色药丸（正常颜色）显示哪些步骤已完成，然后未完成的步骤将显示灰色（悬停时）颜色。

基本上，我需要能够创建一个药丸并拥有一个 .complete(blue) 或 .incomplete(grey) 的类。它们都不必具有悬停颜色。

目前，第一个药丸在此默认列表中处于活动状态，而第二个药丸我只是悬停在上面。我希望其他 3 个步骤是灰色的，默认情况下它们具有 .incomplete 类。

我将如何实现这一目标？

【问题讨论】：

【解决方案1】：

.nav > li.incomplete > a {
    background-color: #eee;
}
.nav > li.complete > a {
    background-color: #428bca;
    color: white;
}

【讨论】：

将课程移至 LI。
是否也可以在其中包含“禁用”类？例如，我想让它们变成灰色，但是当你将鼠标悬停在它们上面时，它也会被禁用。我将 li 类更改为 class="incomplete disabled" 但是当您将鼠标悬停在它上面时，背景变为白色。
一切皆有可能。请阅读 CSS 的基础知识，而不仅仅是询问您需要的确切代码。