{CLICCA QUI PER SCOPRIRE COME INTEGRARE L'HEADER}

# 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

Lorem ipsum dolor sit amet, consectetur adipisicing elit
Tutti i dettagli

### Titolo 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>

29
Maggio

### Titolo box

Lorem ipsum dolor sit amet, consectetur adipisicing elit
Tutti i dettagli

### Titolo box ricerca

Lorem ipsum dolor sit amet
29
Maggio

### Titolo box

Lorem ipsum dolor sit amet, consectetur adipisicing elit
Tutti i dettagli

### Titolo box ricerca

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
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.

Lorem ipsum dolor sit amet:

1. Sed ut perspiciatis unde omnis iste natus error sit voluptatem Link
2. Quis autem vel eum iure reprehenderit qui in ea voluptate Link

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

1. Lorem ipsum dolor sit amet
2. Lorem ipsum dolor sit amet

5. Feedback errori su form tabellare

### Titolo Form Tabellare

Inserire una descrizione della sezione
Colonna 1
Colonna 2
Colonna 3
Col. A
Col. B
Col. A
Col. B
Col. A
Col. B
Riga uno
Riga 1 Colonna 1 A
Riga 1 Colonna 1 B
Riga 1 Colonna 2 A
Riga 1 Colonna 2 B
Riga 1 Colonna 3 A
Riga 1 Colonna 3 B
ERRORE: Descrizione errore

Inserire una descrizione della sezione
Colonna 1
Colonna 2
Col. A
Col. B
Col. A
Col. B
Riga uno
Riga 1 Colonna 1 A
Riga 1 Colonna 1 B
Riga 1 Colonna 2 A
Riga 1 Colonna 2 B
Riga due
Riga 2 Colonna 1 A
Riga 2 Colonna 1 B
Riga 2 Colonna 2 A
Riga 2 Colonna 2 B
ERRORE: Descrizione errore
ERRORE: Descrizione errore
ERRORE: Descrizione errore
ERRORE: Descrizione errore
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

Titolo modale

Lorem ipsum dolor sit amet

2. Due tasti

Titolo modale

Lorem ipsum dolor sit amet

3. Tre tasti

Titolo modale
Lorem ipsum dolor sit amet

4. Con form

Titolo modale con form
Inserire descrizione input

Lorem ipsum
At vero eos et accusamus et iusto odio dignissimos

Etichetta del campo
Etichetta del campo

Descrizione
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

5. Con tabella

Titolo modale tabella

Inserire descrizione tabella qui
Colonna 1 | Colonna 2 | Colonna 3 |
--- | --- | --- | ---
Dato 1 | Dato 2 | Dato 3 |
Dato 1 | Dato 2 | Dato 3 |
Dato 1 | Dato 2 | Dato 3 |

6. Con lista

Titolo modale lista

Inserire descrizione tabella qui
Lorem ipsum dolor |
Lorem ipsum dolor |

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>

### TITOLO TAB 1

#### Sottotitolo

Input 1
Etichetta del campo

### TITOLO TAB 2

#### Sottotitolo

Etichetta del campo

Periodo

Dal
al
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.

{CLICCA QUI PER SCOPRIRE COME INTEGRARE IL FOOTER}

INAIL sede centrale: P.le Pastore 6, 00144 Roma (RM) - P. IVA 00968951004

## Menu di servizio

- Responsabile della pubblicazione
- Avviso all'utenza
- Accessibilità
- Monitoraggio accessi
- Mappa del sito

Torna alla navigazione interna

## Menu in lingua

- Inglese
- Spagnolo
- Tedesco
- Francese

- Home (accesskey:h)
- Vai a Istituto (accesskey:i)
- Vai a Attività (accesskey:a)
- Vai a Atti e Documenti (accesskey:d)
- Vai a Comunicazione (accesskey:c)
- Vai a Servizi per Te (accesskey:t)
- Vai a Supporto (accesskey:s)

Torna alla navigazione interna