html - 唯一的 Bootstrap 表标签

Question

我一直在尝试模仿在他们网站的文档部分中找到的 Bootstrap 表:

http://twitter.github.io/bootstrap/base-css.html#tables

我喜欢表格中有标签“Example”的方式。但是，我不想显示相同的表名，而是想为每个单独的表显示一个唯一的标签(在我的例子中显示不同的年份)。这看起来很简单，但有些地方不对劲。

我的 HTML:

<div id="2003" class="bs-docs-example">
  <table class="table table-striped">
...

<div id="2013" class="bs-docs-example">
  <table class="table table-striped">
...

我的 CSS:

/*Original CSS from Bootstrap*/
.bs-docs-example:after {
content: "Example";
position: absolute;
top: -1px;
left: -1px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
background-color: #f5f5f5;
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;
}

/*My additional CSS*/
#2003.bs-docs-example:after {
content: "2003";
}

#2013.bs-docs_example:after {
content: "2013";
}

更新:我做了一个 fiddle 。检查一下。

http://jsfiddle.net/Qp4kg/3/

Answer 1

您忘记为 bs-docs-example 类复制一条规则:

.bs-docs-example {
    position: relative;
    margin: 15px 0;
    padding: 39px 19px 14px;
    background-color: #fff;
    border: 1px solid #ddd;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

结果:http://jsfiddle.net/Qp4kg/3/

重要:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").