css - Bootstrap 继承

Question

我从未创建或编辑过 CSS。

现在我正在使用 Bootstrap ，我想在具有不同颜色的多个场景中使用 hero-unit。

我真的不想编辑原始 CSS 中的任何内容。我只想继承 hero-unit 并创建具有不同颜色的新类。

甚至可能吗？

Answer 1

是的，这不是 Bootstrap 特有的，但应该让你开始想要什么。在你的 CSS 中做这样的事情:

/* Defined in bootstrap.css or wherever */
.hero-unit {
    background-color: Black;
}

/* These are yours in your styles.css */
.hero-unit.red {
    background-color: Red;
}

.hero-unit.green {
    background-color: Green;
}

然后您可以在 HTML 中执行此操作:

<div class="hero-unit red"></div>
<div class="hero-unit green"></div>

你可以在 jsFiddle 上玩这个例子 - http://jsfiddle.net/RrhyC/