twitter-bootstrap Bootstrap bs-example

Bootstrap bs-example

提问by dynamitem

I copied CSS code for bs-example from the Bootstrap 3.0.3 docs site. I'm kind of a beginner with CSS, so if anyone could explain me this I would be thankful.

我从 Bootstrap 3.0.3 文档站点复制了 bs-example 的 CSS 代码。我是 CSS 的初学者，所以如果有人能向我解释这一点，我将不胜感激。

The following code:

以下代码：

/* 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;
}

It works as expected,

它按预期工作，

but I would like the title, EXAMPLE, can be changeable. I would like to use a tag like let's say <zd></zd>.

但我希望标题“示例”可以更改。我想使用一个标签，比如让我们说<zd></zd>。

Thanks in advance.

提前致谢。

采纳答案by rajmathan

The :after selector Insert content after every .bs-exampleclass. Here, the Word Example will be added after every .bs-example.

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

[please refer this link]http://www.w3schools.com/cssref/sel_after.asp

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

Instead of using content:"Example", you can edit your titles in html and assign the same class to all titles. header tags are preferred. ie., You should definitely create a new custom stylsheet and override the classes you want to modify. This is a way you can always go back to the default styling provide by bootstrap.

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

This is a simple and easy step followed by all web developers as per W3C std.

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

Still you want to change title by code, you can get help from jQuery or JS.

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

Tip from Christofer Eliasson: If you want to redesign your page, you can just exchange your custom stylesheet with a new one. Instead of getting a completely new bootstrap file to be able to start over. Also, if you just want to go back to the default styling on just a few elements, it would be a mess to remember what changes you have made. So, write your custom css code in a separate stylesheet.

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

回答by MackieeE

Prior to writing this answer, I didn't realise that editing Pseudo Elements (::after) with JavaScript was a little trickier. Although with this question/answer on StackOverflowmade it relatively easy with JavaScript.

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

The concept was still the same, upon Page load the browser renders what is stated on the Style sheet, there after you must use JavaScript to manipulate it's contents to render something different.

概念仍然相同，在页面加载时，浏览器呈现样式表中声明的内容，然后您必须使用 JavaScript 操作其内容以呈现不同的内容。

Hence the CSS looks at the attr(data-content), which means it'll look for the data-contentattribute within the HTML.

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

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

This looks for the data-content="":

这寻找data-content=""：

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

Which renders:

其中呈现：

To change it there after, all you have to do is change it's data-contentattribute with JavaScript, in the demo I use jQuery to quickly select the DOM element and adjust it's data-contentattribute.

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

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

Demo Fiddle: http://jsfiddle.net/u2D4M/

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

If you wanted to do this withoutjQuery:

如果您想在没有jQuery 的情况下执行此操作：

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

Demo Fiddle: http://jsfiddle.net/9wxwxd4s/

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