我一直在尝试模仿他们网站文档部分中的 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";
}
更新:我做了一个小提琴。一探究竟。