“示例"在 Twitter 引导程序中前进 [英] "example" heading in twitter bootstrap

问题描述

在 twitter bootstrap 上有功能示例，示例包含在 DIV 中，类为bs-docs-example".每个这样的 DIV 的左上角都有字符​​串Example".我想知道该字符串来自哪里以及我是否可以使用/自定义它?

on the twitter bootstrap there are examples of the features and the examples are contained in DIVs with the class 'bs-docs-example'. every such DIV has the string 'Example' written in the upper left corner. i want to know where is that string coming from and if i can use/customize it?

推荐答案

如果你看看 Github for Bootstrap 你将看到 .bs-docs-example 为 ::after 设置了 content: "Example" (用于解释 如何使用 CSS3 管理内容，请参见此处).

If you take a look at the Github for Bootstrap you'll see that .bs-docs-example has content: "Example" set for ::after (for explanation on how to manage content with CSS3 see here).

基本上，.bs-docs-example 附加了这种样式:

Basically, .bs-docs-example has this style attached to it:

.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 成员，您将修改文本.

If you modify content member you'll modify the text.

这篇关于“示例"在 Twitter 引导程序中前进的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！