CONTATTACI

Blog

Come creare navbar, form e modali in Bootstrap

 Nel mondo dello sviluppo web, specialmente lato front end, esistono un sacco di strumenti e tecnologie che semplificano la vita dello sviluppatore. Ottimizzando le risorse, i tempi di sviluppo e automatizzando le operazioni più comuni.

Bootstrap framework è uno di questi. Si tratta di uno strumento molto utile per lo sviluppatore front end, che mette a disposizione una serie di funzionalità molto vantaggiosi per chi scrive codice o deve progettare il front end di un sito web.

Bootstrap, cos’è?

Bootstrap è un framework pensato per lo sviluppo web, gratuito e open source. È progettato per facilitare il processo di sviluppo di siti web responsive e mobile-first fornendo una raccolta di librerie per i modelli di progettazione. È una tecnologia molto utile per il web design e incorpora una serie di script JavaScript, HTML e CSS che semplificano la vita dello sviluppatore web.

Esistono anche dei Bootstrap templates, essendo un framework open source, la comunità mette a disposizione una serie di temi specifici a seconda delle esigenze dello sviluppatore. Sono tantissimi i siti che rendono pubblici questi template, fruibili da chiunque.

In questo Bootstrap tutorial vedremo come implementare questi tre elementi molto importanti:

  • Navbar
  • Form
  • Modali

Una sfida comune affrontata dagli sviluppatori web è come disporre i menu su dispositivi con schermi piccoli. La Toggle Navbar di Bootstrap può attivare/disattivare un pulsante di menu su tali dispositivi. Quando gli utenti fanno clic sul pulsante, vengono visualizzate le opzioni di menu. Esistono anche diversi Bootstrap navbar template per rendere originali i propri componenti nella pagina web:

  1. Aggiungi il pulsante Toggle Navbar – all’interno di un file index.html, aggiungi la classe Bootstrap "navbar-default" all'elemento nav:
1. <nav class="navbar navbar-default">
2.         ...
3.     </div>

Dopodiché, all’interno del div che contiene la classe “navbar-header” bisogna aggiungere l'elemento button che verrà attivato quando un utente visita il sito web su un piccolo dispositivo. Questo pulsante conterrà attributi che lavorano insieme per dire a Bootstrap di nascondere o mostrare il pulsante a seconda delle dimensioni dello schermo dell'utente.

1. <div class="navbar-header">
2.    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#codebrainery-toggle-nav" aria-expanded="false">
4.    </button>
5.    <a class="navbar-brand" href="#">Brand</a>
6. </div>

 

  1. Aggiungiamo il Button della Navabar “Menu Icone” – all'interno dell'elemento button, aggiungiamo quattro elementi span con la classe "icon-bar" Bootstrap per ottenere l'aspetto di un'icona di menu mobile. La prima span avrà la classe “sr-only”.
 1. <div class="navbar-header">
 2.   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#codebrainery-toggle-nav" aria-expanded="false">
 3.      <span class="sr-only">Toggle navigation</span>
 4.      <span class="icon-bar"></span>
 5.      <span class="icon-bar"></span>
 6.      <span class="icon-bar"></span>
 7.   </button>
 8.   <a class="navbar-brand" href="#">Brand</a>
 9. </div>  

 

  1. Rendiamo la Navbar “attivabile” Ora arriva la parte interessante. Individuando l'ul all'interno dell'elemento nav con le classi "nav", "navbar-nav" e "navbar-right". Racchiudendo questo ul in un div con le classi "collapse" e "navbar-collapse" di Bootstrap. Quindi basterà aggiungere l'attributo id assegnato nel passaggio precedente.
1. <div class="collapse navbar-collapse" id="codebrainery-toggle-nav">
2    <ul class="nav navbar-nav navbar-right">
3      ...
4.   </ul>
5. </div>

Infine, la Toggle Navbar apparirà in questo modo:

 1. <nav class="navbar navbar-default">
 2.       <div class="container">
 3.         <div class="navbar-header">
 4.           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" datatarget="#codebrainery-toggle-nav" aria-expanded="false">
 5.             <span class="sr-only">Toggle navigation</span>
 6.             <span class="icon-bar"></span>
 7.             <span class="icon-bar"></span>
 8.             <span class="icon-bar"></span>
 9.           </button>
10.           <a class="navbar-brand" href="#">Aulab.blog</a>
11.         </div>
12.  
13.         <div class="collapse navbar-collapse" id="codebrainery-toggle-nav">
14.           <ul class="nav navbar-nav navbar-right">
15.             <li><a href="#">Sign Up</a></li>
16.             <li><a href="#">Sign In</a></li>
17.             <li class="dropdown">
18.               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Altro<span class="caret"></span></a>
19.               <ul class="dropdown-menu">
20.                 <li><a href="#">Segui il Corso CSS di Aulab</a></li>
21.                 <li><a href="#">Guarda tutti i corsi</a></li>
22.                 <li><a href="#">Contattaci</a></li>
23.               </ul>
24.             </li>
25.           </ul>
26.         </div>
27.  
28.      </div> <!-- close container div -->
29. </nav> <!-- close navbar nav -->

 

Adesso vediamo insieme i modali. Sono come avvisi popup intesi a focalizzare l'attenzione dell'utente su un modulo di invio, un'offerta di nuovi prodotti o notizie dell'ultima ora:

Useremo Bootstrap per implementare un semplice modale che avvisa i visitatori del sito di Aulab di una nuova guida chiamata Guida UI/UX.

  1. Creare il modale HTML – Come i dropdown menu e le navbar toggle (viste prima), i modali vengono mostrati solo quando viene soddisfatta una condizione speciale e altrimenti nascosti. Tra gli elementi nav e section in index.html, aggiungi il codice per generare un modale:
 1. <div class="modal fade">
 2.   <div class="modal-dialog" role="document">
 3.     <div class="modal-content">
 4.       <div class="modal-header">
 5.         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 6.           <span aria-hidden="true">×</span>
 7.         </button>
 8.         <h3 class="modal-title">Alert! Nuova guida!</h3>
 9.       </div>
10.       <div class="modal-body">
11.         <h4>Aulab: guida sull’UI/UX</h4>
12.         <p>All’interno di questa sezione troverai la nostra nuova guida su come progettare
13.            un’interfaccia grafica ad hoc. Consulta tutte le nostre guide!</p>
14.       </div>
15.       <div class="modal-footer">
16.         <button type="button" class="btn btn-primary">Provala ora</button>
17.         <button type="button" class="btn btn-secondary" data-dismiss="modal">Forse dopo</button>
18.       </div>
19.     </div>
20.   </div>
21. </div>

 

  1. Attiva il modale con JavaScript– Ora, usando il linguaggio JavaScript, mostreremo il modale non appena il documento web sarà completamente caricato. In app.js, aggiungi il seguente codice JavaScript:
const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

// or

const myModalAlternative = new bootstrap.Modal('#myModal', options)

Dopodiché, bisogna aggiungere un elemento script all’head di index.html e settare l’attributo src di app.js:

1. <script src="app.js"></script>

Assicurati che app.js sia l'ultimo script che viene caricato (dopo bootstrap.min.js).

Salva il progetto, ricarica index.html nel browser web per vedere il pop-up modale!

Per ultimo, ma non per importanza, la creazione del form con Bootstrap. I moduli HTML sono parte integrante delle pagine Web e delle applicazioni, ma la creazione manuale dei layout dei moduli o lo styling dei controlli dei moduli manualmente uno per uno utilizzando i CSS sono spesso molto noiosi. Bootstrap semplifica enormemente il processo di styling e allineamento dei controlli dei moduli come etichette, campi di input, caselle di selezione, aree di testo, pulsanti, ecc. attraverso un set predefinito di classi.

Vediamo un comune layout di form verticale. Per crearlo è sufficiente utilizzare le classi di utilità di margine predefinite per raggruppare le label, i controlli del modulo, il testo del modulo e i messaggi di convalida del modulo. Molti Bootstrap form template precompilati sono molto utili per rendere originali le proprie pagine web.

Ecco un esempio in cui i controlli del form sono disposti verticalmente con le etichette in alto:

 1. <form>
 2.     <div class="mb-3">
 3.         <label class="form-label" for="inputEmail">Email</label>
 4.         <input type="email" class="form-control" id="inputEmail" placeholder="Email">
 5.     </div>
 6.     <div class="mb-3">
 7.         <label class="form-label" for="inputPassword">Password</label>
 8.         <input type="password" class="form-control" id="inputPassword" placeholder="Password">
 9.     </div>
10.     <div class="mb-3">
11.         <div class="form-check">
12.             <input class="form-check-input" type="checkbox" id="checkRemember">
13.             <label class="form-check-label" for="checkRemember">Ricordami</label>
14.         </div>
15.     </div>
16.     <button type="submit" class="btn btn-primary">Registrati</button>
17. </form>

Bootstrap mette a disposizione una serie di parametri molto utili per personalizzare lo stile del proprio form. Ad esempio l’inserimento di messaggi di validazione, a comparsa, quando viene compilata una casella del form in tempo reale.

 1. <form>
 2.     <div class="mb-3 position-relative">
 3.         <label class="form-label" for="inputEmail">Email</label>
 4.         <input type="email" class="form-control is-valid" id="inputEmail" placeholder="Email" value="peterparker@example.com" required>
 5.         <div class="valid-tooltip">La mail inserita è valida.</div>
 6.     </div>
 7.     <div class="mb-3 position-relative">
 8.         <label class="form-label" for="inputPassword">Password</label>
 9.         <input type="password" class="form-control is-invalid" id="inputPassword" placeholder="Password" required>
10.         <div class="invalid-tooltip">Password inserita errata.</div>
11.     </div>
12.     <div class="mb-3">
13.         <div class="form-check">
14.             <input class="form-check-input" type="checkbox" id="checkRemember">
15.             <label class="form-check-label" for="checkRemember">Ricordami</label>
16.         </div>
17.     </div>
18.     <button type="submit" class="btn btn-primary">Registrati</button>
19. </form>

 

Bootstrap è uno strumento molto utile per gli sviluppatori frontend. Si tratta di un framework molto versatile che si predispone per semplificare la vita dei programmatori.

Vuoi saperne di più su bootstrap framework? Consulta la nostra guida Bootstrap in italiano! 

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…
Essere uno sviluppatore web vuol dire imparare più linguaggi di programmazione per poter creare diversi tipi di applicazioni.  Per ogni applicazione, la maggior parte delle volte, …
Un buon programmatore, si sa, necessita di un ampio bagaglio di conoscenze per potersi districare tra le difficoltà che questo mestiere comporta. Oggi le richieste sul mercato sono molteplic…
Il mondo del web development è in continua evoluzione e, se da un lato può sembrare una corsa incessante, dall’altro rappresenta senz’altro un vortice di sfide e opportunità.  Come sviluppa…
Il mondo dello sviluppo backend è una parte cruciale di qualsiasi progetto web: definisce la logica che alimenta il lato “non visibile” di un sito o di un’applicazione. Si lega al frontend per mescol…
GitHub è da anni uno degli strumenti di condivisione del codice e versioning più utilizzati tra i web developers. Ad oggi, nel mondo del web development risulta essere uno strumento imprescindibile…

Seguici su Facebook

Vuoi entrare nel mondo della programmazione?

Scopri di più sui nostri corsi!

Chiamaci al numero verde

Contattaci su WhatsApp

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 187 €/mese.

Esempio di finanziamento  

Importo finanziato: € 3990 in 24 rate da € 187 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 4572.88.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.