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:
- 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>
- 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>
- 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.
- 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>
- 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!
