Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Il progetto guida: le pagine Portfolio e Contatti

Link copiato negli appunti

Proseguiamo con la panoramica del progetto guida analizzando le pagine Portfolio e Contatti.

La pagina Portfolio

La seconda pagina del nostro progetto è una semplice galleria/portfolio.

Rispetto alla home page, troviamo una struttura più semplificata.

In alto una testata con una parte di navigazione sul sito basata sul componente Breadcrumb:

Figura 1 - Navigazione breadcrumb

screenshot

La parte centrale della pagina è occupata da una galleria di immagini. Un esempio perfetto per vedere in mostra il componente Thumbnails, la soluzione prevista da Bootstrap per la realizzazione di gallerie di media a griglia e responsive.

Figura 2 - Galleria a griglia

screenshot

La pagina Contatti

Sulla pagina dei Contatti, oltre a funzionalità avanzate della griglia come l'offset e il meccanismo del push e pull, abbiamo sperimentato due soluzioni legate ai form.

Intanto la strutturazione orizzontale del layout del modulo di contatto:

Figura 3 - Form di contatto con layout orizzontale

screenshot

Provando a inviare il form senza inserire alcun valore, potrete vedere in azione anche le cosiddette classi per la validazione, applicate dinamicamente tramite il plugin jQuery Validate.

Figura 4 - Validazione del form di contatto

screenshot

Sotto il form, un accordion per le FAQ realizzato a partire dal plugin Collapse.

Figura 5 - Pannello con le FAQ

screenshot

Ti consigliamo anche