<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container" style="padding-top: 60px;">
<div class="page-header">
<h1>Voici la liste des amis,requetes et blacklists<span class="pull-right label label-default"></span></h1>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel with-nav-tabs panel-info">
<div class="panel-heading">
<ul class="nav nav-tabs">
<!-- Liste des amis -->
<li class="active"><a href="#Amis" data-toggle="tab">Amis</a></li>
<!-- Liste des demandes -->
<li><a href="#Requêtes" data-toggle="tab">Demandes d'amis</a></li>
<!-- Liste des blacklists -->
<li><a href="#Blacklists" data-toggle="tab">Blacklists</a></li>
</ul>
</div>
<div class="panel-body">
<!-- Contenu des listes -->
<div class="tab-content">
<!-- Amis -->
<div class="tab-pane fade in active" id="Amis">
<!-- Un user -->
<ul class="list-group">
<li href="#" class="list-group-item text-left">
<a href="#"> <img class="img-thumbnail" src="http://images4.fanpop.com/image/photos/19500000/Handsome-Flynn-disney-princess-19584883-500-500.jpg"></a>
<label class="name">
<a href="#"> Warren Dard </a>
</label>
<!-- les boutons de droite -->
<label class="pull-right">
<a class="btn btn-info btn-sm glyphicon glyphicon glyphicon-comment" href="#" title="Envoyer Message"></a>
<a class="btn btn-warning btn-sm glyphicon glyphicon-trash" href="#" title="Supprimer"></a>
<a class="btn btn-danger btn-sm glyphicon glyphicon glyphicon-ban-circle" href="#" title="Mettre en blacklist"></a>
</label>
<div class="break"></div>
</li>
<li href="#" class="list-group-item text-left">
<a href="#"> <img class="img-thumbnail" src="http://www.gadgehit.com/wp-content/uploads/2012/06/matrix-neo-hacker.jpg"> </a>
<label class="name">
<a href="#"> Jeremy Canat </a>
</label>
<label class="pull-right">
<a class="btn btn-info btn-sm glyphicon glyphicon glyphicon-comment" href="#" title="Envoyer Message"></a>
<a class="btn btn-warning btn-sm glyphicon glyphicon-trash" href="#" title="Supprimer"></a>
<a class="btn btn-danger btn-sm glyphicon glyphicon glyphicon-ban-circle" href="#" title="Mettre en blacklist"></a>
</label>
<div class="break"></div>
</li>
<li href="#" class="list-group-item text-left">
<a href="#"> <img class="img-thumbnail" src="http://img.over-blog-kiwi.com/1/00/05/62/20150506/ob_5a8f12_a-singes4.png"></a>
<label class="name">
<a href="#"> Jonathan S'phabmixay </a>
</label>
<label class="pull-right">
<a class="btn btn-info btn-sm glyphicon glyphicon glyphicon-comment" href="#" title="Envoyer Message"></a>
<a class="btn btn-warning btn-sm glyphicon glyphicon-trash" href="#" title="Supprimer"></a>
<a class="btn btn-danger btn-sm glyphicon glyphicon glyphicon-ban-circle" href="#" title="Mettre en blacklist"></a>
</label>
<div class="break"></div>
</li>
</div>
<!-- Demandes D'amis -->
<div class="tab-pane fade" id="Requêtes">
<div class="tab-pane fade in active" id="Amis">
<!-- Un user -->
<ul class="list-group">
<li href="#" class="list-group-item text-left">
<a href="#"> <img class="img-thumbnail" src="http://nautiles.a.n.f.unblog.fr/files/2008/02/tranquille.jpg"></a>
<label class="name">
<a href="#"> Thomas Mourgeon </a>
</label>
<!-- les boutons de droite -->
<label class="pull-right">
<a class="btn btn-success btn-sm glyphicon glyphicon-ok" href="#" title="Accepter"></a>
<a class="btn btn-info btn-sm glyphicon glyphicon glyphicon-comment" href="#" title="Envoyer Message"></a>
<a class="btn btn-warning btn-sm glyphicon glyphicon-trash" href="#" title="Supprimer"></a>
<a class="btn btn-danger btn-sm glyphicon glyphicon glyphicon-ban-circle" href="#" title="Mettre en blacklist"></a>
</label>
<div class="break"></div>
</li>
<li href="#" class="list-group-item text-left">
<a href="#"> <img class="img-thumbnail" src="http://blog.kjempekjekt.com/uploads/2014/11/Stress-Relief1.jpg"> </a>
<label class="name">
<a href="#"> Cedric Mourgeon </a>
</label>
<label class="pull-right">
<a class="btn btn-success btn-sm glyphicon glyphicon-ok" href="#" title="Accepter"></a>
<a class="btn btn-info btn-sm glyphicon glyphicon glyphicon-comment" href="#" title="Envoyer Message"></a>
<a class="btn btn-warning btn-sm glyphicon glyphicon-trash" href="#" title="Supprimer"></a>
<a class="btn btn-danger btn-sm glyphicon glyphicon glyphicon-ban-circle" href="#" title="Mettre en blacklist"></a>
</label>
<div class="break"></div>
</li>
</div>
</div>
<!-- Blacklists -->
<div class="tab-pane fade" id="Blacklists">
<div class="tab-pane fade" id="Requêtes">
<div class="tab-pane fade in active" id="Amis">
<!-- Un user -->
<ul class="list-group">
<li href="#" class="list-group-item text-left">
<a href="#"> <img class="img-thumbnail" src="http://cdn.alltheragefaces.com/img/faces/large/happy-omega-troll-face-l.png"></a>
<label class="name">
<a href="#"> Abdel le troll </a>
</label>
<!-- les boutons de droite -->
<label class="pull-right">
<a class="btn btn-warning btn-sm glyphicon glyphicon-trash" href="#" title="Supprimer"></a>
</label>
<div class="break"></div>
</li>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br/>
.panel.with-nav-tabs .panel-heading{
padding: 5px 5px 0 5px;
}
.panel.with-nav-tabs .nav-tabs{
border-bottom: none;
}
.panel.with-nav-tabs .nav-justified{
margin-bottom: -1px;
}
/********************************************************************/
/*** PANEL DEFAULT ***/
.with-nav-tabs.panel-default .nav-tabs > li > a,
.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
color: #777;
}
.with-nav-tabs.panel-default .nav-tabs > .open > a,
.with-nav-tabs.panel-default .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-default .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
color: #777;
background-color: #ddd;
border-color: transparent;
}
.with-nav-tabs.panel-default .nav-tabs > li.active > a,
.with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li.active > a:focus {
color: #555;
background-color: #fff;
border-color: #ddd;
border-bottom-color: transparent;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
background-color: #f5f5f5;
border-color: #ddd;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
color: #777;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
background-color: #ddd;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
color: #fff;
background-color: #555;
}
/********************************************************************/
/*** PANEL PRIMARY ***/
.with-nav-tabs.panel-primary .nav-tabs > li > a,
.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
color: #fff;
}
.with-nav-tabs.panel-primary .nav-tabs > .open > a,
.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
color: #fff;
background-color: #3071a9;
border-color: transparent;
}
.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
color: #428bca;
background-color: #fff;
border-color: #428bca;
border-bottom-color: transparent;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
background-color: #428bca;
border-color: #3071a9;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
color: #fff;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
background-color: #3071a9;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
background-color: #4a9fe9;
}
/********************************************************************/
/*** PANEL SUCCESS ***/
.with-nav-tabs.panel-success .nav-tabs > li > a,
.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
color: #3c763d;
}
.with-nav-tabs.panel-success .nav-tabs > .open > a,
.with-nav-tabs.panel-success .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-success .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
color: #3c763d;
background-color: #d6e9c6;
border-color: transparent;
}
.with-nav-tabs.panel-success .nav-tabs > li.active > a,
.with-nav-tabs.panel-success .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-success .nav-tabs > li.active > a:focus {
color: #3c763d;
background-color: #fff;
border-color: #d6e9c6;
border-bottom-color: transparent;
}
.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu {
background-color: #dff0d8;
border-color: #d6e9c6;
}
.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a {
color: #3c763d;
}
.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
background-color: #d6e9c6;
}
.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
color: #fff;
background-color: #3c763d;
}
/********************************************************************/
/*** PANEL INFO ***/
.with-nav-tabs.panel-info .nav-tabs > li > a,
.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
color: #31708f;
}
.with-nav-tabs.panel-info .nav-tabs > .open > a,
.with-nav-tabs.panel-info .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-info .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
color: #31708f;
background-color: #bce8f1;
border-color: transparent;
}
.with-nav-tabs.panel-info .nav-tabs > li.active > a,
.with-nav-tabs.panel-info .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-info .nav-tabs > li.active > a:focus {
color: #31708f;
background-color: #fff;
border-color: #bce8f1;
border-bottom-color: transparent;
}
.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu {
background-color: #d9edf7;
border-color: #bce8f1;
}
.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a {
color: #31708f;
}
.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
background-color: #bce8f1;
}
.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
color: #fff;
background-color: #31708f;
}
/********************************************************************/
/*** PANEL WARNING ***/
.with-nav-tabs.panel-warning .nav-tabs > li > a,
.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
color: #8a6d3b;
}
.with-nav-tabs.panel-warning .nav-tabs > .open > a,
.with-nav-tabs.panel-warning .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-warning .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
color: #8a6d3b;
background-color: #faebcc;
border-color: transparent;
}
.with-nav-tabs.panel-warning .nav-tabs > li.active > a,
.with-nav-tabs.panel-warning .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-warning .nav-tabs > li.active > a:focus {
color: #8a6d3b;
background-color: #fff;
border-color: #faebcc;
border-bottom-color: transparent;
}
.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu {
background-color: #fcf8e3;
border-color: #faebcc;
}
.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a {
color: #8a6d3b;
}
.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
background-color: #faebcc;
}
.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
color: #fff;
background-color: #8a6d3b;
}
/********************************************************************/
/*** PANEL DANGER ***/
.with-nav-tabs.panel-danger .nav-tabs > li > a,
.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
color: #a94442;
}
.with-nav-tabs.panel-danger .nav-tabs > .open > a,
.with-nav-tabs.panel-danger .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-danger .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
color: #a94442;
background-color: #ebccd1;
border-color: transparent;
}
.with-nav-tabs.panel-danger .nav-tabs > li.active > a,
.with-nav-tabs.panel-danger .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-danger .nav-tabs > li.active > a:focus {
color: #a94442;
background-color: #fff;
border-color: #ebccd1;
border-bottom-color: transparent;
}
.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu {
background-color: #f2dede; /* bg color */
border-color: #ebccd1; /* border color */
}
.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a {
color: #a94442; /* normal text color */
}
.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
background-color: #ebccd1; /* hover bg color */
}
.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
color: #fff; /* active text color */
background-color: #a94442; /* active bg color */
}
.list-content{
min-height:300px;
}
.list-content .list-group .title{
background:#5bc0de;
border:2px solid #DDDDDD;
font-weight:bold;
color:#FFFFFF;
}
.list-group-item img {
height:80px;
width:80px;
}
.prj-name {
color:#5bc0de;
}
.break{
width:100%;
margin:20px;
}
.name {
color:#5bc0de;
}
