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

在写这个答案之前,我没有意识到::after用JavaScript 编辑Pseudo Elements()有点棘手.虽然StackOverflow上的这个问题/答案使得JavaScript相对容易.

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

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

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

这样寻找data-content="":

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

哪个呈现:

要在之后更改它,您所要做的就是data-content使用JavaScript 更改它的属性,在演示中我使用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

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

这是所有 Web 开发人员按照 W3C 标准遵循的简单步骤。

如果您仍然想通过代码更改标题，您可以从 jQuery 或 JS 获得帮助。

Christofer Eliasson 的提示：如果您想重新设计页面，只需将自定义样式表替换为新样式表即可。而不是获得一个全新的引导文件才能重新开始。另外，如果您只想恢复少数元素的默认样式，那么记住您所做的更改将是一团糟。因此，请在单独的样式表中编写自定义 CSS 代码。