问引导程序bs-示例

EN

:after选择器在每个.bs-example类之后插入内容。在这里，将在每个.bs-example之后添加单词Example。

please refer this link

您可以在content:"Example"中编辑您的标题，并为所有标题分配相同的类，而不是使用html。最好使用header标签。也就是说，你绝对应该创建一个新的自定义样式表，并覆盖你想要修改的类。这是一种可以始终返回到bootstrap提供的默认样式的方法。

根据W3C标准，这是所有web开发人员遵循的简单和容易的步骤。

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

来自Christofer Eliasson的提示:如果你想重新设计你的页面，你可以用一个新的来交换你的自定义样式表。而不是获得一个全新的引导程序文件来重新开始。此外，如果您只想在几个元素上返回默认样式，那么要记住您所做的更改将是一件很糟糕的事情。因此，在单独的样式表中编写您的自定义css代码。

在写这个答案之前，我没有意识到用JavaScript编辑伪元素(::after)有点棘手。尽管有了这一点，使用JavaScript的question/answer on StackOverflow就变得相对容易了。

概念仍然是相同的，在页面加载时，浏览器呈现样式表上声明的内容，之后您必须使用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/