twitter-bootstrap - 推特 Bootstrap 中的 "example"标题

Question

在 twitter Bootstrap 上有一些功能示例，这些示例包含在具有类“bs-docs-example”的 DIV 中。
每个这样的 DIV 的左上角都有字符​​串“示例”。我想知道那个字符串是从哪里来的，我是否可以使用/自定义它？

Answer 1

如果您 take a look at the Github for Bootstrap你会看到 .bs-docs-example有 content: "Example"设置为 ::after (关于 how to manage content with CSS3 see here 的解释)。

基本上， .bs-docs-example 附加了这种风格:

.bs-docs-example::after
{
    content: "Example";
    position: absolute;
    top: -1px;
    left: -1px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: bold;
    background-color: whiteSmoke;
    border: 1px solid #DDD;
    color: #9DA0A4;
    -webkit-border-radius: 4px 0 4px 0;
    -moz-border-radius: 4px 0 4px 0;
    border-radius: 4px 0 4px 0;
}

如果修改 content成员，您将修改文本。