Esempi strutture Filtri
Filtri base
<form class="row panel panel-default filter-accordion" action="#" name="filterForm" id="filtro-base-1">
<div class="row panel-heading" data-toggle="collapse" data-target="#filter-accordion-panel-1">
<label class="search-title">FILTRA PER</label>
<span class="fa fa-chevron-down" title="Espandi/Riduci la riga"></span>
</div>
<div id="filter-accordion-panel-1" class="row collapse in panel-body body-form-grey">
<div class="row">
<div class="form-group col-xs-7 noPaddingLeft">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding">
<label class="control-label" for="input-filtro-base-1">Inserire descrizione input</label>
<input type="text" class="form-control" id="input-filtro-base-1" placeholder="placeholder">
</div>
</div>
<div class="col-xs-12 marginTop">
<button type="reset" class="btn btn-link">Annulla</button>
<button type="submit" class="btn btn-primary pull-right">Filtra</button>
</div>
</div>
</div>
</form>
Ricerca:
Filtri complessi
<!-- Filtro complesso su una riga -->
<form class="row panel panel-default filter-accordion" action="#" name="filterForm" id="filtro-complesso-1">
<div class="row panel-heading" data-toggle="collapse" data-target="#filter-accordion-panel-2">
<label class="search-title">FILTRA PER</label>
<span class="fa fa-chevron-down" title="Espandi/Riduci la riga"></span>
</div>
<div id="filter-accordion-panel-2" class="row collapse in panel-body body-form-grey">
<div class="form-group col-xs-12 col-lg-4 noPadding">
<div class="input-relative">
<label for="select-accordion-13" class="label-select col-xs-12 col-sm-12 col-md-12 col-lg-11 noPaddingLeft">
Select 1
<select class="form-control" id="select-accordion-13">
<option value="">Scegli una opzione</option>
<option value="">Opzione 1</option>
<option value="">Opzione 2</option>
<option value="">Opzione 3</option>
</select>
</label>
</div>
</div>
<div class="form-inline date-range col-xs-12 col-lg-8 noPaddingLeft">
<p>Periodo</p>
<div class="date datePicker">
<div class="form-group">
<div class="input-relative">
<label class="control-label" for="form-data-5">Dal</label>
<input id="form-data-5" class="form-control" title="GG/MM/AAAA" placeholder="GG/MM/AAAA" type="text">
<em class="fa fa-calendar" title="Calendario"></em>
</div>
</div>
<div class="form-group">
<div class="input-relative">
<label class="control-label" for="form-data-6">al</label>
<input id="form-data-6" class="form-control" title="GG/MM/AAAA" placeholder="GG/MM/AAAA" type="text">
<em class="fa fa-calendar" title="Calendario"></em>
</div>
</div>
</div>
</div>
<div class="col-xs-12 marginTop">
<button type="reset" class="btn btn-link">Annulla</button>
<button type="submit" class="btn btn-primary pull-right">Filtra</button>
</div>
</div>
</form>
<!-- Filtro complesso su più righe -->
<form class="row panel panel-default filter-accordion" action="#" name="filterForm" id="filtro-complesso-2">
<div class="row panel-heading" data-toggle="collapse" data-target="#filter-accordion-panel-3">
<label class="search-title">FILTRA PER</label>
<span class="fa fa-chevron-down" title="Espandi/Riduci la riga"></span>
</div>
<div id="filter-accordion-panel-3" class="row collapse in panel-body body-form-grey">
<div class="row">
<div class="form-group col-xs-12 col-lg-4 noPadding">
<div class="input-relative">
<label for="select-accordion-13a" class="label-select col-xs-12 col-sm-12 col-md-12 col-lg-11 noPaddingLeft">
Select 1
<select class="form-control" id="select-accordion-13a">
<option value="">Scegli una opzione</option>
<option value="">Opzione 1</option>
<option value="">Opzione 2</option>
<option value="">Opzione 3</option>
</select>
</label>
</div>
</div>
<div class="form-inline date-range col-xs-12 col-lg-8 noPaddingLeft">
<p>Periodo</p>
<div class="date datePicker">
<div class="form-group">
<div class="input-relative">
<label class="control-label" for="form-data-5a">Dal</label>
<input id="form-data-5a" class="form-control" title="GG/MM/AAAA" placeholder="GG/MM/AAAA" type="text">
<em class="fa fa-calendar" title="Calendario"></em>
</div>
</div>
<div class="form-group">
<div class="input-relative">
<label class="control-label" for="form-data-6a">al</label>
<input id="form-data-6a" class="form-control" title="GG/MM/AAAA" placeholder="GG/MM/AAAA" type="text">
<em class="fa fa-calendar" title="Calendario"></em>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-lg-4 noPadding">
<div class="input-relative">
<label for="select-accordion-13b" class="label-select col-xs-12 col-sm-12 col-md-12 col-lg-11 noPaddingLeft">
Select 2
<select class="form-control" id="select-accordion-13b">
<option value="">Scegli una opzione</option>
<option value="">Opzione 1</option>
<option value="">Opzione 2</option>
<option value="">Opzione 3</option>
</select>
</label>
</div>
</div>
</div>
<div class="col-xs-12 marginTop">
<button type="reset" class="btn btn-link">Annulla</button>
<button type="submit" class="btn btn-primary pull-right">Filtra</button>
</div>
</div>
</form>
<!-- Filtro con checkbox -->
<form class="row panel panel-default filter-accordion" action="#" name="filterForm" id="filtro-complesso-7">
<div class="row panel-heading" data-toggle="collapse" data-target="#filter-accordion-panel-7">
<label class="search-title">FILTRA PER</label>
<span class="fa fa-chevron-down" title="Espandi/Riduci la riga"></span>
</div>
<div id="filter-accordion-panel-7" class="row collapse in panel-body body-form-grey">
<div class="form-group col-xs-8 col-sm-12 col-md-12 col-lg-6 noPadding">
<div class="input-relative">
<label for="select-accordion-13c" class="label-select col-xs-12 col-sm-12 col-md-12 col-lg-11 noPaddingLeft">
Select
<select class="form-control" id="select-accordion-13c">
<option value="">Scegli una opzione</option>
<option value="">Opzione 1</option>
<option value="">Opzione 2</option>
<option value="">Opzione 3</option>
</select>
</label>
</div>
</div>
<div class="form-group col-xs-12 col-sm-8 col-md-6 col-lg-6 noPaddingLeft">
<p>Checkboxes:</p>
<div class="checkbox">
<label class="checkbox-inline" for="filter-accordion-checkbox-1">
<input id="filter-accordion-checkbox-1" type="checkbox" value="" title="checkbox">Checkbox 1
</label>
<label class="checkbox-inline" for="filter-accordion-checkbox-2">
<input id="filter-accordion-checkbox-2" type="checkbox" value="" title="checkbox">Checkbox 2
</label>
</div>
</div>
<div class="col-xs-12 marginTop">
<button type="reset" class="btn btn-link">Annulla</button>
<button type="submit" class="btn btn-primary pull-right">Filtra</button>
</div>
</div>
</form>
Filtro con campi su una riga:
Filtro con campi su più righe:
Filtro con checkbox: