Question

我一直在尝试模仿其网站文档部分中的Bootstrap表格：

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

我喜欢表格中的标签“示例”。但是，我不想显示相同的表名，而是希望为每个单独的表显示一个唯一的标签（在我的情况下显示不同的年份）。这似乎很简单，但有些东西不能正常工作。

我的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";
}

更新：我做了一个小提琴。看看吧。

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和NAME令牌必须以字母（[A-Za-z]）开头，可能是后跟任意数量的字母，数字（[0-9]），连字符（“ - ”），下划线（“_”），冒号（“：”）和句点（“。”）。

独特的Bootstrap表标签

1 个答案:

重要：