Wie erstellt man ein Facebook-ähnliches Tool-Tip-Layout mit Twitter Bootstrap?

Question

Ich versuche, Twitter Bootstrap zu verwenden, um Facebook wie Tooltip-Layout zu erstellen.

Ich würde wirklich schätzen, wenn mir jemand sagen könnte, wie kann ich Twitter Bootstrap verwenden, um dieses Layout zu erstellen, ich brauche es nicht als Tooltip, ich brauche es in regelmäßigen div.

Ich habe Bild angehängt das Represent was ich suche.

Answer 1

Hier ist mein nehmen auf diesem Feld den Twitter mit Bootstrap-Framework. Musste einige Spannenbreiten modifizieren, um mit Ihren Bildgrößen übereinzustimmen, aber ich verwendete eine ID, um sie so zu zielen, dass sie andere span* Klassen in Ihrem Seitendesign nicht stören.

Ich habe es auf einem JsFiddle seit seiner ziemlich ein wenig Code, so überprüfen Sie es: demo hier, bearbeiten 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>​