1

新しいtwitter-bootstrapドキュメントには、例を区切るための優れたインターフェイスがあります。

scrnshot

これと同じ効果を得るにはどうすればよいwellですか？

私の試み： http： //jsfiddle.net/YdusM/

4

3 に答える 3

1

それはどうですか：jsFiddle

.well:before {...}代わりに適用.corner_text:before {...}

アップデート：

特定のウェルブロックに「exampleelement」を適用します：jsFiddle

于 2012-08-22T10:01:46.190 に答える
0

ドキュメント内のコードを調べるだけで、exmapleラッパーに適用されたこのcssが見つかります。

.bs-docs-example::after {
content: "Example";
position: absolute;
top: -1px;
left: -1px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
background-color: whiteSmoke;
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;
}

カスタムクラスに似たものをcssに追加します。または、ブートストラップ変数とミックスインを使用するために、より少ないコストで追加することもできます。テキストを追加可能にしたい場合は、：afterを忘れて、このスタイルを少し調整して、必要なテキストを保持している特定の要素に適用し、ラッパー内に配置することをお勧めします。

編集：
ポジショニングを機能させるには、ラッパーもに設定する必要がありますposition: relative;。あなたが何を求めているのかわかりませんが、私はあなたのフィドルを更新してデモンストレーションしました：http: //jsfiddle.net/YdusM/9/

于 2012-08-22T09:59:27.983 に答える
0

:before外部divに適用する代わりに。私はそれを作り.well、パディングトップを調整し、左に-20px..

すなわち

.well:before {
  position: relative;
  content: "Example";
  top: -20px;
  left: -20px;
  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;
}

フィドルを確認してくださいhttp://jsfiddle.net/YdusM/7/

于 2012-08-22T10:03:49.000 に答える