"Facets"
Bootstrap 3.3.0 Snippet by Thomah

<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"> <div class="row"> <div class="col-sm-3 col-md-3"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" href="#facets-1"><span class="glyphicon glyphicon-tag"></span> Taille</a> </h4> </div> <div id="facets-1" class="panel-collapse collapse in"> <ul class="list-group"> <div class="list-group-item checkbox checkbox-circle"> <input type="checkbox" name="size" id="size1" /> <label for="size1">100 Ko à 1 Mo</label> </div> </ul> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" href="#facets-2"><span class="glyphicon glyphicon-tag"></span> Créé</a> </h4> </div> <div id="facets-2" class="panel-collapse collapse in"> <ul class="list-group"> <div class="list-group-item checkbox checkbox-circle"> <input type="checkbox" name="created" id="created1" /> <label for="created1">Ce mois <span class="badge">1</span></label> </div> <div class="list-group-item checkbox checkbox-circle"> <input type="checkbox" name="created" id="created2" /> <label for="created2">Au cours des 6 derniers mois <span class="badge">1</span></label> </div> <div class="list-group-item checkbox checkbox-circle"> <input type="checkbox" name="created" id="created3" /> <label for="created3">Cette année <span class="badge">1</span></label> </div> </ul> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" href="#collapse-2"><span class="glyphicon glyphicon-tag"></span> Créateur</a> </h4> </div> <div id="collapse-2" class="panel-collapse collapse in"> <ul class="list-group"> <div class="list-group-item checkbox checkbox-circle"> <input type="checkbox" name="createdBy" id="createdBy1" /> <label for="createdBy1">Moi <span class="badge">1</span></label> </div> </ul> </div> </div> </div> </div> </div> </div>
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css); body{ margin:50px; } .badge { display: inline; } #accordion .glyphicon { margin-right:10px; } .panel-collapse>.list-group .list-group-item:first-child { border-top-right-radius: 0;border-top-left-radius: 0; } .panel-collapse>.list-group .list-group-item { border-width: 1px 0; } .panel-collapse>.list-group { margin-bottom: 0; } .panel-collapse .list-group-item { border-radius:0; } .panel-collapse .list-group .list-group { margin: 0; margin-top: 10px; } .panel-collapse .list-group-item li.list-group-item { margin: 0 -15px; border-top: 1px solid #ddd !important; border-bottom: 0; padding-left: 30px; } .panel-collapse .list-group-item li.list-group-item:last-child { padding-bottom: 0; } .panel-collapse div.list-group div.list-group{ margin: 0; } .panel-collapse div.list-group .list-group a.list-group-item { border-top: 1px solid #ddd !important; border-bottom: 0; padding-left: 30px; } .panel-collapse .list-group-item li.list-group-item { border-top: 1px solid #DDD !important; } .checkbox { padding-left: 20px; } .checkbox label { display: inline-block; vertical-align: middle; position: relative; padding-left: 5px; } .checkbox label::before { content: ""; display: inline-block; position: absolute; width: 17px; height: 17px; left: 0; margin-left: -20px; border: 1px solid #cccccc; border-radius: 3px; background-color: #fff; -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; transition: border 0.15s ease-in-out, color 0.15s ease-in-out; } .checkbox label::after { display: inline-block; position: absolute; width: 16px; height: 16px; left: 0; top: 0; margin-left: -20px; padding-left: 3px; padding-top: 1px; font-size: 11px; color: #555555; } .checkbox input[type="checkbox"] { opacity: 0; z-index: 1; } .checkbox input[type="checkbox"]:focus + label::before { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .checkbox input[type="checkbox"]:checked + label::after { font-family: 'FontAwesome'; content: "\f00c"; } .checkbox input[type="checkbox"]:disabled + label { opacity: 0.65; } .checkbox input[type="checkbox"]:disabled + label::before { background-color: #eeeeee; cursor: not-allowed; } .checkbox.checkbox-circle label::before { border-radius: 50%; } .checkbox.checkbox-inline { margin-top: 0; } .checkbox-primary input[type="checkbox"]:checked + label::before { background-color: #428bca; border-color: #428bca; } .checkbox-primary input[type="checkbox"]:checked + label::after { color: #fff; } .checkbox-danger input[type="checkbox"]:checked + label::before { background-color: #d9534f; border-color: #d9534f; } .checkbox-danger input[type="checkbox"]:checked + label::after { color: #fff; } .checkbox-info input[type="checkbox"]:checked + label::before { background-color: #5bc0de; border-color: #5bc0de; } .checkbox-info input[type="checkbox"]:checked + label::after { color: #fff; } .checkbox-warning input[type="checkbox"]:checked + label::before { background-color: #f0ad4e; border-color: #f0ad4e; } .checkbox-warning input[type="checkbox"]:checked + label::after { color: #fff; } .checkbox-success input[type="checkbox"]:checked + label::before { background-color: #5cb85c; border-color: #5cb85c; } .checkbox-success input[type="checkbox"]:checked + label::after { color: #fff; } .radio { padding-left: 20px; } .radio label { display: inline-block; vertical-align: middle; position: relative; padding-left: 5px; } .radio label::before { content: ""; display: inline-block; position: absolute; width: 17px; height: 17px; left: 0; margin-left: -20px; border: 1px solid #cccccc; border-radius: 50%; background-color: #fff; -webkit-transition: border 0.15s ease-in-out; -o-transition: border 0.15s ease-in-out; transition: border 0.15s ease-in-out; } .radio label::after { display: inline-block; position: absolute; content: " "; width: 11px; height: 11px; left: 3px; top: 3px; margin-left: -20px; border-radius: 50%; background-color: #555555; -webkit-transform: scale(0, 0); -ms-transform: scale(0, 0); -o-transform: scale(0, 0); transform: scale(0, 0); -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); } .radio input[type="radio"] { opacity: 0; z-index: 1; } .radio input[type="radio"]:focus + label::before { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .radio input[type="radio"]:checked + label::after { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } .radio input[type="radio"]:disabled + label { opacity: 0.65; } .radio input[type="radio"]:disabled + label::before { cursor: not-allowed; } .radio.radio-inline { margin-top: 0; } .radio-primary input[type="radio"] + label::after { background-color: #428bca; } .radio-primary input[type="radio"]:checked + label::before { border-color: #428bca; } .radio-primary input[type="radio"]:checked + label::after { background-color: #428bca; } .radio-danger input[type="radio"] + label::after { background-color: #d9534f; } .radio-danger input[type="radio"]:checked + label::before { border-color: #d9534f; } .radio-danger input[type="radio"]:checked + label::after { background-color: #d9534f; } .radio-info input[type="radio"] + label::after { background-color: #5bc0de; } .radio-info input[type="radio"]:checked + label::before { border-color: #5bc0de; } .radio-info input[type="radio"]:checked + label::after { background-color: #5bc0de; } .radio-warning input[type="radio"] + label::after { background-color: #f0ad4e; } .radio-warning input[type="radio"]:checked + label::before { border-color: #f0ad4e; } .radio-warning input[type="radio"]:checked + label::after { background-color: #f0ad4e; } .radio-success input[type="radio"] + label::after { background-color: #5cb85c; } .radio-success input[type="radio"]:checked + label::before { border-color: #5cb85c; } .radio-success input[type="radio"]:checked + label::after { background-color: #5cb85c; } /* POST LIB */ .checkbox label { margin-left: 10px; }

Related: See More


Questions / Comments:

I implemented this code and it created a temporary failure in space time continuum.

Brutus Maximus () - 7 years ago - Reply 0