Bootstrap bs-example

Question

我从Bootstrap 3.0.3 docs站点复制了bs-example的CSS代码。我是一个CSS初学者，所以如果有人能解释我，我会很感激。

以下代码：

/* Echo out a label for the example */
.bs-example:after {
  content: "Example";
  position: absolute;
  top:  15px;
  left: 15px;
  font-size: 12px;
  font-weight: bold;
  color: #bbb;
  text-transform: uppercase;
  letter-spacing: 1px;
}

按预期工作，

但是我想标题，例子，可以改变。我想使用像<zd></zd>这样的标签。

提前致谢。

Answer 1

在写这个答案之前，我没有意识到用JavaScript编辑伪元素（::after）有点棘手。虽然使用此question/answer on StackOverflow使用JavaScript变得相对容易。

概念仍然相同，在页面加载后，浏览器呈现样式表上的内容，之后必须使用JavaScript来操作它的内容以呈现不同的内容。

因此，CSS会查看attr(data-content)，这意味着它会在HTML中查找data-content属性。

.bs-docs-example::after {
    content: attr(data-content);
}

这会查找data-content=""：

<div class="bs-docs-example" data-content="Example Header">

呈现：

要在之后更改它，您所要做的就是使用JavaScript更改它的data-content属性，在演示中我使用jQuery快速选择DOM元素并调整它的data-content属性。

$('.bs-docs-example').attr('data-content', "New Header Title" );

演示小提琴：http://jsfiddle.net/u2D4M/

如果你想这样做没有 jQuery：

<script>
     var getHeader = document.getElementById('bs-header');
     getHeader.attributes["data-content"].value = "Hi, New Title"; 
</script>

演示小提琴：http://jsfiddle.net/9wxwxd4s/

Answer 2

：after选择器在每个.bs-example类之后插入内容。 在这里，Word示例将在每.bs-example之后添加。

[请参阅此链接] http://www.w3schools.com/cssref/sel_after.asp

您可以在html中编辑标题，并为所有标题指定相同的类，而不是使用content:"Example"。标头标签是首选。即，您应该创建一个新的自定义样式表并覆盖您要修改的类。这是一种可以随时返回到bootstrap提供的默认样式的方法。

根据W3C标准，这是一个简单易行的步骤，所有Web开发人员都遵循这一步骤。

你仍然希望通过代码更改标题，你可以从jQuery或JS获得帮助。

来自Christofer Eliasson的提示：如果您想重新设计页面，可以将自定义样式表更换为新样式表。而不是获得一个全新的引导程序文件，以便能够重新开始。此外，如果您只想回到几个元素的默认样式，记住您所做的更改将是一团糟。因此，请在单独的样式表中编写自定义css代码。