twitter-bootstrap - twitterブートストラップの「例」の見出し

Question

ツイッターのブートストラップには機能の例があり、その例はクラス「bs-docs-example」のDIVに含まれています。そのようなすべてのDIVには、左上隅に「Example」という文字列が書かれています。その文字列がどこから来ているのか、それを使用/カスタマイズできるかどうかを知りたいですか？

Answer 1

Github for Bootstrapを見ると、それ.bs-docs-exampleがcontent: "Example"設定されていることがわかります（ CSS3でコンテンツを管理する方法::afterの説明については、こちらを参照してください）。

基本的に、.bs-docs-exampleには次のスタイルが付加されています。

.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;
}

メンバーを変更contentすると、テキストも変更されます。

Answer 2

少し遅れていることはわかっていますが、同じ機能も必要でしたが、例という単語の代わりにカスタムテキストを配置したいと思いました。非常に近い既存のブートストラップコードを使用して、ブートストラップをハッキングする必要がないという簡単な回避策を思いつきました。

多分これは探している他の誰かを助けることができます

<div class="row">    
  <div class="span12 thumbnail">
    <span class="thumbnail span1 muted text-center" style="margin-top:-5px; margin-left:-5px; background-color:#f5f5f5;">
      <small><strong>YOUR CUSTOM TEXT</strong></small>
    </span>    
  </div>
</div>

基本的に、サムネイルクラスを使用してdivの周囲の境界線を取得し、ネストされたdivで再度使用してオフセットし、背景色を変更します。右上と左下の角がわずかに湾曲していることを除けば、非常に近くに見えますが、ボックス、テキスト、リンクなどに好きなものを入れることができます。