IDE: Grigliatura di bootstrap nel form editor

Descrizione

Se si utilizza il tema Bootstrap occorre conoscere il sistema di grigliatura utilizzato per rendere la videata responsiva. Per facilitare l'operazione è ora possibile attivare la visualizzazione della grigliatura di bootstrap anche nel form-editor:

Funzionamento

Come mostrato nell'immagine, quando viene attivato il comando viene mostrata una griglia che indica quante e quali celle verranno utilizzate dal motore grafico bootstrap per realizzare la videata a run-time. Nell'esempio la prima " contiene i campi Employee ID, Last Name e FirstName. Tali campi occupano, rispettivamente, 2, 4 e 6 celle. Pertanto il primo campo sarà automaticamente allargato ed avrà una larghezza pari a 2/12 dell'intera larghezza della videata, il secondo parti a 4/12 ed il terzo a 6/12. Tali rapporti sono ottenuti nel modo seguente:

• I campi sono larghi rispettivamente 160px, 260px e 276px
• Il sistema calcola la larghezza totale "effettiva" dei campi: 160px + 260px + 276px = 696px e calcola la larghezza di una cella-boostrap (1/12 della larghezza totale): 696px/12 = 58px per ogni cella
• A questo punto si calcola quante celle occorre assegnare ai vari campi: 160/58 = 2.76 arrotondato a 2 celle, 272/58 = 4.48 arrotondato a 4 celle. Il resto (12 - 2 - 4 = 6) viene automaticamente assegnato all'ultimo campo della "riga".

Funzionalità interessate

La definizione delle videate in una applicazione web con tema Bootstrap.

Note