Box e Tab
Box Dashboard
<!-- BOX-1 DATA -->
<div class="col-xs-12 col-md-6 noPaddingLeft">
<div class="boxDate">
<div class="date">
<div class="day"><strong>29</strong></div>
<div class="month">Maggio</div>
</div>
<div class="descrizione-box">
<h3 class="titolo-box">Titolo box</h3>
<div class="meta">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<a href="#" class="btn btn-link linkDettagli">Tutti i dettagli <span class="fa right fa-angle-double-right"></span></a>
</div>
</div>
</div>
<!-- BOX-2 RICERCA -->
<div class="col-xs-12 col-md-6 noPadding">
<div class="boxDashboard">
<h3 class="titolo-box">Titolo box ricerca</h3>
<div class="descrizione-box">Lorem ipsum dolor sit amet</div>
<br>
<form class="row">
<div class="col-xs-12 col-lg-6 noPaddingLeft">
<input name="Input 1" title="Input 1" id="input-box-base-1" class="form-control" placeholder="placeholder">
</div>
<div class="col-xs-12 col-lg-6 noPaddingLeft">
<button class="btn btn-primary" type="button">Cerca</button>
</div>
</form>
</div>
</div>
29
Maggio
Titolo box
Tutti i dettagliTitolo box ricerca
Lorem ipsum dolor sit amet
Carousel Box Dashboard
<div id="boxCarousel" class="carouselBox carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#boxCarousel" data-slide-to="0" class="active"></li>
<li data-target="#boxCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<!-- BOX-1 DATA -->
<div class="col-xs-12 col-md-6">
<div class="boxDate">
<div class="date">
<div class="day"><strong>29</strong></div>
<div class="month">Maggio</div>
</div>
<div class="descrizione-box">
<h3 class="titolo-box">Titolo box</h3>
<div class="meta">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<a href="#" class="btn btn-link linkDettagli">Tutti i dettagli <span class="fa right fa-angle-double-right"></span></a>
</div>
</div>
</div>
<!-- BOX-2 RICERCA -->
<div class="col-xs-12 col-md-6">
<div class="boxDashboard">
<h3 class="titolo-box">Titolo box ricerca</h3>
<div class="descrizione-box">Lorem ipsum dolor sit amet</div>
<br>
<form class="row">
<div class="col-xs-12 col-lg-6 noPaddingLeft">
<input name="Input 1" title="Input 1" id="input-box-carousel-1" class="form-control" placeholder="placeholder">
</div>
<div class="col-xs-12 col-lg-6 noPaddingLeft">
<button class="btn btn-primary" type="button">Cerca</button>
</div>
</form>
</div>
</div>
</div>
<div class="item">
<!-- BOX-1 DATA -->
<div class="col-md-6 box-aligner-left">
<div class="boxDate">
<div class="date">
<div class="day"><strong>29</strong></div>
<div class="month">Maggio</div>
</div>
<div class="descrizione-box">
<h3 class="titolo-box">Titolo box</h3>
<div class="meta">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<a href="#" class="btn btn-link linkDettagli">Tutti i dettagli <span class="fa right fa-angle-double-right"></span></a>
</div>
</div>
</div>
<!-- BOX-2 RICERCA -->
<div class="col-md-6 box-aligner-right">
<div class="boxDashboard">
<h3 class="titolo-box">Titolo box ricerca</h3>
<div class="descrizione-box">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</div>
<br>
<form class="form-inline">
<div class="row">
<div class="col-xs-12">
<button type="submit" class="pull-right btn btn-primary">Bottone</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Left and right controls -->
<a title="Scorri al precedente" class="left carousel-control" href="#boxCarousel" data-slide="prev">
<span class="fa fa-angle-left" title="Scorri al precedente"></span>
</a>
<a title="Scorri al successivo" class="right carousel-control" href="#boxCarousel" data-slide="next">
<span class="fa fa-angle-right" title="Scorri al successivo"></span>
</a>
</div>
</div>
User Experience
I box presenti nella dashboard possono essere utilizzati come widget per l'accesso rapido a:
news, applicazioni, avvisi.
Nel caso di news ed avvisi è possibile accedere ad un approfondimento attraverso al link “Tutti i dettagli”, posto in basso a destra del box.
Nell'esempio viene mostrato un box di ricerca a titolo esemplificativo, infatti è possibile integrare un widget di un'applicazione per una rapida ricerca interna. Es: Ricerca Pratica, Ricerca Codice Sede.
Il Carousel Box Dashboard permette di integrare più Box Dashboard.
Sono obbligatori in questo caso i controlli di navigazione:
Frecce: per andare avanti e indietro nel carousel
Indicatori Circolari: per esplicitare la presenza di altri elementi oltre a quelli visibili sulla pagina
Feedback
<!-- 1. Feedback con link -->
<div class="row feedback-box">
<div class="feedback-header">
<span><span class="fa fa-check white-check"></span>Feedback positivo.</span>
</div>
<div class="feedback-content">
<p>Lorem <a href="">ipsum </a>dolor sit amet</p>
</div>
</div>
<!-- 2. Feedback con lista -->
<div class="row feedback-box">
<div class="feedback-header">
<span><span class="fa fa-check white-check"></span>Feedback positivo.</span>
</div>
<div class="feedback-content">
<p><strong>Lorem ipsum dolor sit amet:</strong></p>
<ol>
<li>Sed ut perspiciatis unde omnis iste natus error sit voluptatem <a href="">Link</a></li>
<li>Quis autem vel eum iure reprehenderit qui in ea voluptate <a href="">Link</a></li>
</ol>
</div>
</div>
<!-- 3. Feedback con tasti -->
<div class="row feedback-box">
<div class="row">
<div class="feedback-header">
<span><span class="fa fa-check white-check"></span>Feedback positivo</span>
</div>
<div class="feedback-content">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
<strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</strong>
</p>
<p><strong>Note</strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
<p class="scndp">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
</p>
</div>
</div>
<div class="row">
<div class="col-md-3">
<button type="button" class="btn btn-link download-btn">
<span class="fa fa-download" title="Scarica elemento"></span>Download 1
</button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-link download-btn">
<span class="fa fa-download" title="Scarica elemento"></span>Download 2
</button>
</div>
</div>
</div>
<!-- 4. Feedback di Errore -->
<div class="row feedback-box">
<div class="feedback-header-error">
<span><span class="fa fa-times white-check"></span>Feedback negativo</span>
</div>
<div class="feedback-content">
<p>Lorem ipsum</p>
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ol>
</div>
</div>
<!-- 5. Feedback errori su form tabellare -->
<form class="row form-grey form-tabellare-grey" action="#" id="form-2-tabellare" name="Nome form">
<h3 class="row title-modulo">Titolo Form Tabellare</h3>
<fieldset>
<legend class="sr-only">Inserire una descrizione della sezione</legend>
<div class="row">
<div class="row heading-form-grey">
<div class="col-xs-3"></div>
<div class="col-xs-3 rightBorder">
Colonna 1
</div>
<div class="col-xs-3 rightBorder">
Colonna 2
</div>
<div class="col-xs-3">
Colonna 3
</div>
</div>
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-3 rightBorder noPadding">
<div class="col-xs-6 labelSpace">
Col. A
</div>
<div class="col-xs-6 labelSpace">
Col. B
</div>
</div>
<div class="col-xs-3 rightBorder noPadding">
<div class="col-xs-6 labelSpace">
Col. A
</div>
<div class="col-xs-6 labelSpace">
Col. B
</div>
</div>
<div class="col-xs-3 noPadding">
<div class="col-xs-6 labelSpace">
Col. A
</div>
<div class="col-xs-6 labelSpace">
Col. B
</div>
</div>
</div>
<div class="row">
<span class="col-xs-3">Riga uno</span>
<div class="col-xs-3 rightBorder noPadding">
<div class="col-xs-6">
<label class="sr-only" for="Row1Col1a-1">Riga 1 Colonna 1 A</label>
<input id="Row1Col1a-1" class="form-control inputNumber errorInput" value="T" type="text">
</div>
<div class="col-xs-6">
<label class="sr-only" for="Row1Col1b-1">Riga 1 Colonna 1 B</label>
<input id="Row1Col1b-1" class="form-control inputNumber" type="text">
</div>
</div>
<div class="col-xs-3 rightBorder noPadding">
<div class="col-xs-6">
<label class="sr-only" for="Row1Col2a-1">Riga 1 Colonna 2 A</label>
<input id="Row1Col2a-1" class="form-control inputNumber" type="text">
</div>
<div class="col-xs-6">
<label class="sr-only" for="Row1Col2b-1">Riga 1 Colonna 2 B</label>
<input id="Row1Col2b-1" class="form-control inputNumber" type="text">
</div>
</div>
<div class="col-xs-3 noPadding">
<div class="col-xs-6">
<label class="sr-only" for="Row1Col3a-1">Riga 1 Colonna 3 A</label>
<input id="Row1Col3a-1" class="form-control inputNumber" type="text">
</div>
<div class="col-xs-6">
<label class="sr-only" for="Row1Col3b-1">Riga 1 Colonna 3 B</label>
<input id="Row1Col3b-1" class="form-control inputNumber" type="text">
</div>
</div>
<div class="col-xs-12">
<span class="errorLabel inputDescription">ERRORE: Descrizione errore</span>
</div>
</div>
</div>
</fieldset>
<hr class="noPadding">
<fieldset>
<legend class="sr-only">Inserire una descrizione della sezione</legend>
<div class="row heading-form-grey">
<div class="col-xs-4"></div>
<div class="col-xs-4 rightBorder">
Colonna 1
</div>
<div class="col-xs-4">
Colonna 2
</div>
</div>
<div class="row body-form">
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4 rightBorder">
<div class="col-xs-6 labelSpace">
Col. A
</div>
<div class="col-xs-6 labelSpace">
Col. B
</div>
</div>
<div class="col-xs-4">
<div class="col-xs-6 labelSpace">
Col. A
</div>
<div class="col-xs-6 labelSpace">
Col. B
</div>
</div>
</div>
<div class="row">
<span class="col-xs-4">Riga uno</span>
<div class="col-xs-4 rightBorder">
<div class="col-xs-6">
<label class="sr-only" for="Row1Col1a-2">Riga 1 Colonna 1 A</label>
<input id="Row1Col1a-2" class="form-control inputNumber errorInput" value="Xy" type="text">
</div>
<div class="col-xs-6">
<label class="sr-only" for="Row1Col1b-2">Riga 1 Colonna 1 B</label>
<input id="Row1Col1b-2" class="form-control inputNumber errorInput" value="aB" type="text">
</div>
</div>
<div class="col-xs-4">
<div class="col-xs-6">
<label class="sr-only" for="Row1Col2a-2">Riga 1 Colonna 2 A</label>
<input id="Row1Col2a-2" class="form-control inputNumber errorInput" value="2;" type="text">
</div>
<div class="col-xs-6">
<label class="sr-only" for="Row1Col2b-2">Riga 1 Colonna 2 B</label>
<input id="Row1Col2b-2" class="form-control inputNumber errorInput" value="0.5" type="text">
</div>
</div>
</div>
<div class="row">
<span class="col-xs-4">Riga due</span>
<div class="col-xs-4 rightBorder">
<div class="col-xs-6">
<label class="sr-only" for="Row2Col1a-2">Riga 2 Colonna 1 A</label>
<input id="Row2Col1a-2" class="form-control inputNumber" type="text">
</div>
<div class="col-xs-6">
<label class="sr-only" for="Row2Col1b-2">Riga 2 Colonna 1 B</label>
<input id="Row2Col1b-2" class="form-control inputNumber" type="text">
</div>
</div>
<div class="col-xs-4">
<div class="col-xs-6">
<label class="sr-only" for="Row2Col2a-2">Riga 2 Colonna 2 A</label>
<input id="Row2Col2a-2" class="form-control inputNumber" type="text">
</div>
<div class="col-xs-6">
<label class="sr-only" for="Row2Col2b-2">Riga 2 Colonna 2 B</label>
<input id="Row2Col2b-2" class="form-control inputNumber" type="text">
</div>
</div>
</div>
<div class="col-xs-12">
<span class="errorLabel inputDescription">ERRORE: Descrizione errore</span>
</div>
<div class="col-xs-12">
<span class="errorLabel inputDescription">ERRORE: Descrizione errore</span>
</div>
<div class="col-xs-12">
<span class="errorLabel inputDescription">ERRORE: Descrizione errore</span>
</div>
<div class="col-xs-12">
<span class="errorLabel inputDescription">ERRORE: Descrizione errore</span>
</div>
</div>
</fieldset>
</form>
1. Feedback con link
Feedback positivo.
Lorem ipsum dolor sit amet
2. Feedback con lista
Feedback positivo.
3. Feedback con tasti
Feedback positivo
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Note Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
4. Feedback di Errore
Feedback negativo
Lorem ipsum
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
5. Feedback errori su form tabellare
User Experience
Il feedback positivo deve sempre essere racchiuso in un tab di colore verde ed avere accanto l'icona del check.
Il feedback negativo deve sempre essere racchiuso in un tab di colore rosso ed avere accanto l'icona della “x”.
Nei form tabellari, l'errore di compilazione deve essere sempre composto da:
- campo evidenziato
- descrizione dell'errore chiara per qualsiasi utente. Evitare quindi di scrivere frasi come “Errore Generico”
Feedback inline
<!-- 1. Azione completata -->
<div class="feedback-header">
<span>
<span class="fa fa-check white-check"></span>
Feedback positivo
</span>
</div>
<!-- 2. Feedback negativo o di errore -->
<div class="feedback-header feedback-header-error">
<span class="feedback-text">
<span class="fa fa-times white-check"></span>
Feedback negativo
</span>
</div>
<!-- 3. Esito positivo -->
<div class="row riga-esito">
<div class="col-xs-8 noPaddingLeft">
<div class="esito-positivo pull-left col-xs-12">Feedback positivo con esito.</div>
<span class="help-block">Lorem ipsum dolor sit amet</span>
</div>
<div class="col-xs-4">
<div class="row pull-right">
<span class="col-xs-2 fa fa-check-circle icona-esito-positivo"></span>
<div class="col-xs-9 numeroPunti">
<strong>150 punti</strong>
</div>
</div>
</div>
</div>
<!-- 4. Esito negativo -->
<div class="row riga-esito">
<div class="col-xs-8 noPaddingLeft">
<div class="esito-negativo pull-left col-xs-12">Feedback negativo con esito.</div>
<span class="help-block">Lorem ipsum dolor sit amet</span>
</div>
<div class="col-xs-4">
<div class="col-xs-9 col-md-9 col-lg-9 noPadding">
<div class="numeroPunti text-right">
<strong>0 punti</strong>
</div>
</div>
</div>
</div>
<!-- 5. Azione completata nell'accordion della tabella (SX) -->
<div class="row">
<span class="col-xs-12 form-group">
<span class="green-check fa fa-check-circle"></span>
<strong class="labelFeedback">Il file è stato inserito correttamente.</strong>
</span>
</div>
<!-- 6. Azione completata nell'accordion della tabella (DX) -->
<div class="row pull-right">
<span class="col-xs-12 form-group">
<span class="green-check fa fa-check-circle"></span>
<strong class="labelFeedback">Il file è stato inserito correttamente.</strong>
</span>
</div>
<!-- 7. Rotella di caricamento -->
<div class="row">
<div class="col-xs-2">
<span class="fa fa-spinner fa-pulse"></span>
</div>
<div class="col-xs-2">
<span class="fa fa-spinner fa-pulse fa-2x"></span>
</div>
<div class="col-xs-2">
<span class="fa fa-spinner fa-pulse fa-4x"></span>
</div>
</div>
1. Azione completata
Feedback positivo
2. Feedback negativo o di errore
Feedback negativo
3. Esito positivo
Feedback positivo con esito.
Lorem ipsum dolor sit amet
150 punti
4. Esito negativo
Feedback negativo con esito.
Lorem ipsum dolor sit amet
0 punti
5. Azione completata nell'accordion della tabella (SX)
Il file è stato inserito correttamente.
6. Azione completata nell'accordion della tabella (DX)
Il file è stato inserito correttamente.
7. Rotella di caricamento
User Experience
L'etichetta del form deve essere sempre fuori dal campo.
Se il capo è "obbligatorio" deve essere inserito il simbolo "*" prima dell'etichetta (label) del campo.
L'errore di compilazione deve esssere composto da:
- campo evidenziato
- descrizione dell'errore chiara per qualsiasi utente. Evitare quindi di scrivere frasi come "Errore Generico".
Si suggerisce di inserire, nei form più complessi, un tooltip per fornire maggiori indicazioni sul valore da inserire.
Finestre modali
<!-- 1. Modale con un tasto -->
<!-- Tasto Modale -->
<div class="row">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#id-univoco-modale">
Un tasto
</button>
</div>
<!-- Modale -->
<div class="modal fade" id="id-univoco-modale" tabindex="-1" role="dialog" aria-labelledby="id-univoco-modale-TITOLO">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="modal-title" id="id-univoco-modale-TITOLO">Titolo modale</div>
</div>
<div class="modal-body">
<div class="row">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary pull-right">OK</button>
</div>
</div>
</div>
</div>
</div>
<!-- 2. Modale con due tasti -->
<!-- Tasto Modale -->
<div class="row">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#id-univoco-modale-2">
Due tasti
</button>
</div>
<!-- Modale -->
<div class="modal fade" id="id-univoco-modale-2" tabindex="-1" role="dialog" aria-labelledby="id-univoco-modale-2-TITOLO">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="modal-title" id="id-univoco-modale-2-TITOLO">Titolo modale</div>
</div>
<div class="modal-body">
<div class="row">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">No</button>
<button type="button" class="btn btn-primary pull-right">Si</button>
</div>
</div>
</div>
</div>
</div>
<!-- 3. Modale con tre tasti -->
<!-- Tasto Modale -->
<div class="row">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#id-univoco-modale-3">
Tre tasti
</button>
</div>
<!-- Modale -->
<div class="modal fade" id="id-univoco-modale-3" tabindex="-1" role="dialog" aria-labelledby="id-univoco-modale-3-TITOLO">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="modal-title" id="id-univoco-modale-3-TITOLO">Titolo modale</div>
</div>
<div class="modal-body">
Lorem ipsum dolor sit amet
</div>
<div class="modal-footer noMargin">
<button type="button" class="btn btn-modale col-xs-2" data-dismiss="modal">No</button>
<button type="button" class="btn btn-modale col-xs-2">Si</button>
<button type="button" class="btn btn-primary col-xs-5 pull-right">Altro</button>
</div>
</div>
</div>
</div>
</div>
<!-- 4. Modale con form -->
<!-- Tasto Modale -->
<div class="row">
<button type="button" class="btn btn-primary btn-info" data-toggle="modal" data-target="#myModalForm">
Con form
</button>
</div>
<!-- Modale -->
<div class="modal fade" id="myModalForm" tabindex="-1" role="dialog" aria-labelledby="modal-form">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="modal-title" id="modal-form">Titolo modale con form</div>
</div>
<div class="modal-body">
<form class="row" action="#" name="filterForm" id="filtro-base-1">
<div class="row form-group">
<div class="form-group col-xs-12 col-sm-12 col-md-7 col-lg-7 noPaddingLeft">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding">
<label class="control-label sr-only" for="input-box-base-3">Inserire descrizione input</label>
<input type="text" class="form-control" id="input-box-base-3" placeholder="placeholder">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-5 col-lg-3 noPaddingLeft">
<button type="submit" class="btn btn-primary">CERCA</button>
</div>
</div>
<div class="row">
<p>Lorem ipsum<br/>
At vero eos et accusamus et iusto odio dignissimos
</p>
</div>
<div class="row form-group noPadding">
<label for="form-select-4" class="label-select">
Etichetta del campo
<em class="fa fa-question-circle fa-lg" data-toggle="popover" title="" data-content="Inserire qua un suggerimento od una descrizione relativa a questo campo." data-original-title="Popover Header"></em>
<select class="form-control" id="form-select-4">
<option value="">- seleziona opzione -</option>
<option value="">Opzione 1</option>
<option value="">Opzione 2</option>
<option value="">Opzione 3</option>
</select>
</label>
</div>
<div class="row form-group noPadding">
<label for="form-select-2" class="label-select">
Etichetta del campo
<em class="fa fa-question-circle fa-lg" data-toggle="popover" title="" data-content="Inserire qua un suggerimento od una descrizione relativa a questo campo." data-original-title="Popover Header"></em>
<select class="form-control" id="form-select-2">
<option value="">- seleziona opzione -</option>
<option value="">Opzione 1</option>
<option value="">Opzione 2</option>
<option value="">Opzione 3</option>
</select>
</label>
</div>
<div class="row form-group">
<p>
<strong>Descrizione</strong>
<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ligula enim, posuere ac ante quis, aliquam tincidunt justo. Cras egestas, augue ultricies semper accumsan, nisi mauris congue felis, vitae accumsan ligula turpis quis velit. Mauris convallis orci ante, eu imperdiet purus rutrum vitae. Quisque quis augue efficitur, facilisis elit et, cursus tortor. Pellentesque id magna consequat, vulputate nisl vitae, porta tellus
</p>
<div class="input-flex button form-group pull-right">
<button class="btn btn-primary">Bottone </button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- 5. Modale con tabella -->
<!-- Tasto Modale -->
<div class="row">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalTabella">
Con tabella
</button>
</div>
<!-- Modale -->
<div class="modal fade" id="modalTabella" tabindex="-1" role="dialog" aria-labelledby="idTitoloTabella">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="modal-title" id="idTitoloTabella">Titolo modale tabella</div>
</div>
<div class="modal-body">
<div class="tabella">
<table class="table tabella-base">
<caption class="sr-only">Inserire descrizione tabella qui</caption>
<thead>
<tr>
<th scope="col" class="col-md-3"><span class="thLabel">Colonna 1</span></th>
<th scope="col" class="col-md-3"><span class="thLabel">Colonna 2</span></th>
<th scope="col" class="col-md-3"><span class="thLabel">Colonna 3</span></th>
<th scope="col" class="col-md-2"></th>
</tr>
</thead>
<tbody >
<tr class="unreadMessage">
<td>Dato 1</td>
<td>Dato 2</td>
<td>Dato 3</td>
<td class="td-icons">
<a href="#" title="Visualizza dettaglio">
<span class="col-xs-6 col-lg-5 col-lg-offset-3 fa fa-eye" title="Visualizza dettaglio"></span>
</a>
</td>
</tr>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
<td>Dato 3</td>
<td class="td-icons">
<a href="#" title="Visualizza dettaglio">
<span class="col-xs-6 col-lg-5 col-lg-offset-3 fa fa-eye" title="Visualizza dettaglio"></span>
</a>
</td>
</tr>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
<td>Dato 3</td>
<td class="td-icons">
<a href="#" title="Visualizza dettaglio">
<span class="col-xs-6 col-lg-5 col-lg-offset-3 fa fa-eye" title="Visualizza dettaglio"></span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link pull-right">
Link
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 6. Modale con lista -->
<!-- Tasto Modale -->
<div class="row">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#idModalLista">
Con lista
</button>
</div>
<!-- Modale -->
<div class="modal fade" id="idModalLista" tabindex="-1" role="dialog" aria-labelledby="titolo-idModalLista">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="modal-title" id="titolo-idModalLista">Titolo modale lista</div>
</div>
<div class="modal-body tabella">
<table class="table dataTable table-modal no-heading" title="Inserire descrizione qui">
<caption class="sr-only">Inserire descrizione tabella qui</caption>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="unreadMessage">
<td>Lorem ipsum dolor</td>
<td><a href="#" class="pull-right" title="Scarica .PDF">
<span class="fa fa-file-pdf-o pdf" title="Scarica .PDF"></span>
</a>
</td>
</tr>
<tr>
<td>Lorem ipsum dolor</td>
<td><a href="#" class="pull-right" title="Scarica .PDF">
<span class="fa fa-file-pdf-o pdf" title="Scarica .PDF"></span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link pull-right lowerText">
Link
</button>
</div>
</div>
</div>
</div>
</div>
Il codice della finestra modale va posizionato in modo sequenziale rispetto al contenuto della pagina. La sequenza corretta è la sequenza logica di interazione: l’utente clicca sul pulsante, prosegue l’interazione nella finestra modale, chiude la modale, ritorna al documento nel punto immediatamente successivo al clic sul pulsante e prosegue.
In Bootstrap non sono supportate molteplici finestre modali aperte nello stesso momento. Mostrare più di una finestra modale alla volta richiede codice personalizzato.
1. Un tasto
2. Due tasti
3. Tre tasti
4. Con form
5. Con tabella
6. Con lista
User Experience
Una finestra modale è una finestra "figlia" che richiede all'utente di interagire con essa prima di ritornare ad operare con la finestra "madre", impedendo la prosecuzione del flusso di lavoro sulla finestra principale dell'applicazione in esecuzione.
Tab
<div class="row content">
<div class="tab">
<ul class="nav nav-pills" role="tablist">
<li class="active col-xs-6" role="presentation">
<a data-toggle="pill" href="#tab1">
<span class="labelTabTitle">Tab 1</span>
</a>
</li>
<li class="col-xs-6" role="presentation">
<a data-toggle="pill" href="#tab2">
<span class="labelTabTitle">Tab 2</span>
</a>
</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane in active">
<form class="form-group form-grey row" action="#" name="filterForm" id="filtro-tab-1">
<div class="row">
<h3 class="col-xs-12">TITOLO TAB 1</h3>
</div>
<div class="row">
<h4 class="col-xs-12 search-title">Sottotitolo</h4>
<div class="col-xs-12">
<div class="form-group col-xs-12 col-md-6 col-lg-4 noPaddingLeft">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding">
<label class="control-label" for="input-filtro-tab-1-">Input 1</label>
<input type="text" class="form-control" id="input-filtro-tab-1-" placeholder="placeholder">
</div>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-5 noPadding">
<div class="input-relative">
<label for="form-select-1" class="label-select col-xs-12 col-sm-12 col-md-12 col-lg-12 noPaddingLeft">
Etichetta del campo
<select class="form-control" id="form-select-1">
<option value="">Opzione 1</option>
<option value="">Opzione 2</option>
<option value="">Opzione 3</option>
</select>
</label>
</div>
</div>
<div class="col-xs-12 marginTop">
<button type="reset" class="btn btn-link">Annulla</button>
<button class="btn btn-primary pull-right" type="button">Bottone destro</button>
</div>
</div>
</div>
</form>
</div>
<div id="tab2" class="tab-pane">
<form class="form-group form-grey row" action="#" name="filterForm" id="filtro-complesso-2">
<div class="row">
<h3 class="col-xs-12">TITOLO TAB 2</h3>
</div>
<div class="row">
<h4 class="col-xs-12 search-title">Sottotitolo</h4>
<div class="col-xs-12">
<div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-5 noPadding">
<div class="input-relative">
<label for="form-select-1a" class="label-select col-xs-12 col-sm-12 col-md-12 col-lg-12 noPaddingLeft">
Etichetta del campo
<select class="form-control" id="form-select-1a">
<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 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 class="col-xs-12 marginTop">
<button type="reset" class="btn btn-link">Annulla</button>
<button class="btn btn-primary pull-right" type="button">Bottone destro</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
User Experience
Un Tab è un controllo grafico di navigazione che permette all'utente di muoversi da un gruppo di contenuti ad un altro.
I tab sono rappresentati graficamente come dei rettangoli che contengono una breve label.
L'attivazione di un tab rende visibili i contenuti ad esso associati e contemporaneamente viene evidenziata la sua attivazione. Può essere attivato un solo tab alla volta.
Sono posti immediatamente sopra all'area soggetta alla navigazione in posizione orizzontale.