2016-06-18 7 views
-1

ich mit Panel dies in Bootstrap erstellen möchten: enter image description hereMachen Sie einen personnal Header in Bootstrap-Panel

Wissen Sie, wie ich diesen Code kann? Ich fange gerade an, CSS zu lernen und deine Hilfe wird mir helfen, mein Wissen zu verbessern.

+1

Was haben Sie versucht? Lass uns sehen, welchen Code du bis jetzt hast. Wir sind nicht hier, um Ihnen zu helfen, etwas von Grund auf zu entwickeln. Wir sind hier, um Ihren Code zu überprüfen und Ihnen bei sehr spezifischen Problemen zu helfen. – Rvervuurt

Antwort

0

Mein Code:

<div class="panel panel-primary"> 
      <div class="panel-heading"> 
       <div class="container-fluid panel-container"> 
        <div class="col-xs-2 text-left" style="margin-left: -20px;"> 
         <div> 
          <img src="img/categories/mode.jpg" class="" width="35px" height="35px"> 
         </div> 
        </div> 
        <div class="col-xs-6 text-left" style="margin-left: 10px; margin-top: 4px;"> 
         <div style="display: inline-block; position: absolute; margin-top: -7px;"> 
          <p>Valentin MARTIN</p> 
          <p class="espace">Il y a 5 minutes, <span class="fa fa-map-marker">&nbsp;</span>Saint-Patersbourg</p> 
         </div> 
        </div> 
        <div class="col-xs-4 text-right"> 
         <div style="display: inline-block; position: relative; margin-top: 3px;"> 
          <img src="img/logo/share-256.png" width="30px" height="30px"> 
         </div> 
         <div style="display: inline-block; position: absolute; margin-left: 4px; margin-top: 3px;"> 
          <img src="img/logo/coeur.png" width="30px" height="30px"> 
         </div> 
        </div> 
        <div class="clearfix"></div> 
       </div> 
      </div> 
      <div class="panel-body"> 
       <img src="img/background.png" style="width: 100%; height:170px; background-size: cover;"> 
      </div> 
      <div class="panel-footer"> 

      </div> 
     </div> 

Mein Ergebnis: Picture