3

Web サイトのドキュメント セクションにある 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/

4

1 に答える 1

3

クラス のルールを 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])、ハイフン ("-")、アンダースコア ("_") を続けることができます、コロン (":")、およびピリオド (".")。

于 2013-05-22T23:43:13.923 に答える