Twitter Bootstrapを使ってFacebookのようなツールチップのレイアウトを作成するには？

Question

私はFacebookのツールチップレイアウトのようにTwitterのブートストラップを使用しようとしています。

このレイアウトを作成するためにどのように私がTwitterのブートストラップを使うことができるのか誰かが私に知らせることができたら本当に感謝します。私はツールチップとしてそれを必要としません。

私が探しているものを代表する画像を添付しました。

Answer 1

ここでTwitterのブートストラップ・フレームワークを使用して、そのボックスが私の感想です。画像のサイズに合わせるためにいくつかのスパン幅を変更しなければなりませんでしたが、idを使ってそれらをターゲットにして、ページデザイン全体で他のspan*クラスを気にしません。

かなりのコードが書かれているのでjsFiddleに載せるので、それをチェックしてください。demoここでは、hereを編集してください。

CSS：

body { 
    margin:50px; 
} 

#box { 
    border: 1px solid #92959C; 
    width:290px; 
    padding-top: 10px; 
    -webkit-border-radius: 2px; 
    -moz-border-radius: 2px; 
    border-radius: 2px; 
    -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 
    -webkit-box-shadow: 0px 0px 4px 0px #ccc; 
    -moz-box-shadow: 0px 0px 4px 0px #ccc; 
    box-shadow: 0px 0px 4px 0px #ccc; 

} 

#box .row { 
    margin-left: -10px; 
} 

#box [class*="span"] { 
    margin-left: 10px; 
} 

#box .span0 { 
    width:32px; 
    margin-left:1px; 
} 

#box li.span0:first-child { 
    margin-left: 0; 
} 

#box .span1 { 
    width: 96px; 
} 

#box .span2 { 
    width:165px; 
    margin-left:10px; 
} 

#box .span2 p, .span2 a { 
    font-size:12px; 
    margin:0; 
} 

#box .span2 h4 { 
    font-size:13px; 
    line-height:10px; 
} 

#box .span1 img { 
    width:96px; 
    height:96px; 
} 

#box .img-list { 
    margin:0; 
    padding:0; 
    list-style:none; 
} 

#box-footer { 
    margin-top:10px; 
    width:290px; 
    border-top:1px solid #aaa; 
} 

.gray { 
    background-color:#F2F2F2; 
    padding:10px 10px 20px; 
    min-height:20px; 
} 
​ 

HTML：

<div class="container"> 
    <div class="row"> 
     <div id="box" class="span4"> 
      <div class="span1"> 
       <img alt="" src="http://placehold.it/96x96"> 
      </div> 
      <div class="span2"> 
       <h4>Omer</h4> 
       <p class="muted">AI Lead at New brand analytics</p> 
       <a href="#">64 mutual friends</a> 
       <ul class="img-list"> 
        <li class="span0"> 
         <img alt="" src="http://placehold.it/32x32"> 
        </li> 
        <li class="span0"> 
         <img alt="" src="http://placehold.it/32x32"> 
        </li> 
        <li class="span0"> 
         <img alt="" src="http://placehold.it/32x32"> 
        </li> 
        <li class="span0"> 
         <img alt="" src="http://placehold.it/32x32"> 
        </li> 
        <li class="span0"> 
         <img alt="" src="http://placehold.it/32x32"> 
        </li> 
       </ul> 
      </div> 
      <div class="row"> 
       <div id="box-footer" class="span4"> 
        <div class="gray"> 
         <a href="#" class="btn pull-right">Friends</a> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>​