Twitter Bootstrap: Come creare le interfacce delle nostre applicazioni?

Dopo tantissime richieste ricevute in questi mesi per continuare e completare questa guida, finalmente riprendiamo la pubblicazione delle ultime lezioni rimanenti.

Dall’ultima lezione pubblicata sono cambiate un pò di cose nel Bootstrap; è stata rilasciata una nuova versione con molte novità che non permettono di effettuare un upgrade a tutti coloro che stanno utilizzando la versione 2. È per questo motivo che, prima di dedicare una serie di articoli appositi per la nuova versione, completiamo la nostra guida per il Bootstrap per la versione 2.3.2.

In questa lezione scoprirai quali sono gli elementi forniti dal Bootstrap per realizzare l’interfaccia di un’applicazione web. Questi strumenti ci saranno utili nell’ultima lezione della guida, in cui imparerai ad utilizzarli per far interagire gli utenti con la tua applicazione.

Alcuni degli elementi li hai già visti nella lezione precedente in cui hai imparato a creare le form e ad utilizzare i pulsanti.

Gli elementi che, invece, scoprirai in questo articolo sono i seguenti:

  • Dropdown
  • Button con dropdown
  • Gruppi di pulsanti
  • Navbar
  • Alert
  • Progress bar

Dropdown

dropdown

I menu dropdown sono una risorsa molto importante per le applicazioni web. Attraverso il loro utilizzo è possibile organizzare in maniera più semplice e chiara le operazioni a disposizione dell’utente consentendo di mostrare dei menu (e sottomenu) al click su un pulsante o, magari, cliccando con il tasto destro su una determinata sezione.

Realizzare un dropdown con il Bootstrap è semplicissimo, ci è sufficiente creare una lista non ordinata a cui assegnare la classe “dropdown-menu” e automaticamente verrà assegnato lo stile necessario. Un’altra caratteristica importante è la possibilità di creare ulteriori sottomenu del dropdown. Per fare ciò è necessario inserire delle ulteriori liste non ordinate all’interno del sottomenu con la medesima classe.

Un esempio di codice per realizzare un menu dropdown con un sottolivello è il seguente:

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>

    <li class="divider"></li>

    <li class="dropdown-submenu">
        <a tabindex="-1" href="#">More options</a>
        <ul class="dropdown-menu">
            <li><a tabindex="-1" href="#">Action</a></li>
            <li><a tabindex="-1" href="#">Another action</a></li>
            <li><a tabindex="-1" href="#">Something else here</a></li>
        </ul>
    </li>
</ul>

Demo

Button con dropdown

buttondropdown

Per utilizzare uno dei dropdown appena visti, abbiamo la necessità di collegarlo ad un pulsante o ad una determinata azione. Uno degli esempi più comuni di utilizzo consiste nell’attivare il dropdown al click su un button. Anche questa operazione è semplicissima con il Bootstrap: abbiamo bisogno di un semplice tag <a> in cui inseriamo l’attributo data-toggle=”dropdown” ed inserire la lista puntata vista in precedenza. In questo modo avremo un dropdown che si attiverà al click sul pulsante.

<div class="btn-group">
    <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
        Click Me
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
        <li><a tabindex="-1" href="#">Action</a></li>
        <li><a tabindex="-1" href="#">Another action</a></li>
        <li><a tabindex="-1" href="#">Something else here</a></li>
        <li class="divider"></li>
        <li class="dropdown-submenu">
            <a tabindex="-1" href="#">More options</a>
            <ul class="dropdown-menu">
                <li><a tabindex="-1" href="#">Action</a></li>
                <li><a tabindex="-1" href="#">Another action</a></li>
                <li><a tabindex="-1" href="#">Something else here</a></li>
            </ul>
        </li>
    </ul>
</div>

Demo

Gruppi di pulsanti

buttongroup

In una web application che si rispetti un’altra feature molto utilizzata è il gruppo di pulsanti.

I gruppi di pulsanti possono, per esempio, essere utilizzati per raggruppare impostazioni comuni tra cui l’utente può scegliere. Pensiamo al caso in cui vogliamo dare un allineamento a del testo e dobbiamo far scegliere all’utente se allinearlo a sinistra, al centro o a destra.

Anche in questo caso il Bootstrap ci viene incontro senza che noi dobbiamo fare alcuna fatica. Per realizzare un button group, infatti, non dobbiamo fare altro che racchiudere i vari pulsanti, caratterizzati da elementi di tipo button con classe btn all’interno di un div con classe btn-group che li racchiude.

<div class="btn-group">
    <button class="btn">Left</button>
    <button class="btn">Middle</button>
    <button class="btn">Right</button>
</div>

Demo

Navbar

navbar

I gruppi di pulsanti appena visti non sempre sono la scelta migliore. Spesso è molto più utile ed usabile fornire una barra di menù che simuli il menu dei classici software desktop.

Un menu di navigazione può essere realizzato, anch’esso, con una lista non ordinata. Per attivare la barra di navigazione sulla lista è necessario inserirla all’interno di due div con classe, rispettivamente, navbarnavbar-inner.

<div class="navbar">
    <div class="navbar-inner">
        <a class="brand" href="#">Menu</a>
        <ul class="nav">
            <li class="active"><a href="#">File</a></li>
            <li><a href="#">Modifica</a></li>
            <li><a href="#">Visualizza</a></li>
            <li><a href="#">?</a></li>
        </ul>
    </div>
</div>

Demo

Alert

alerts

Un’applicazione che richiede l’interazione diretta dell’utente necessita spesso anche di messaggi di avviso dopo una determinata azione. Immaginiamo, ad esempio, il caso in cui un utente vuole modificare i dati del suo profilo: una volta che i dati sono stati compilati bisogna comunicare all’utente se ci sono stati errori oppure se tutto è andato a buon fine.

Per utilizzare i messaggi di avviso con il Bootstrap possiamo utilizzare un semplice div contenitore con classe alert. A seconda del tipo di messaggio possiamo scegliere tra:

  • warning, con cui non dobbiamo impostare nessuna classe aggiuntiva
  • error, con cui dobbiamo aggiungere al div la classe alert-error
  • success, con cui dobbiamo aggiungere al div la classe alert-success
<div class="alert">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
<div class="alert alert-error">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
<div class="alert alert-success">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>

Demo

Progress Bar

progressbar

Ci sono operazioni che richiedono maggior tempo per essere eseguite, pensiamo ad esempio all’export di migliaia di record oppure alla cancellazione di molti elementi contemporaneamente. E’ buona norma comunicare all’utente lo stato di avanzamento delle operazioni, affinché sia costantemente al corrente della situazione e non pensi che l’applicazione abbia smesso di funzionare.

Per fare ciò possiamo utilizzare le Progress Bar. La loro implementazione è davvero semplice. Per prima cosa bisogna utilizzare un div contenitore con classe progress e, facoltativamente, una classe a scelta per lo stile (ad esempio progress-striped). All’interno del contenitore, successivamente, è necessario creare un nuovo div con classe bar, al quale andremo ad assegnare l’avanzamento. La percentuale di avanzamento è impostata attraverso la larghezza del div.bar. Consiglio vivamente di utilizzare valori percentuali, così da mantenere il funzionamento anche nel caso in cui lo spazio a disposizione vari in futuro.

<div class="progress progress-striped active">
    <div class="bar" style="width: 40%;"></div>
</div>

Demo

Conclusioni

Termina con questa lezione una panoramica su quelli che sono gli elementi più importanti contenuti all’interno del Bootstrap. Nella prossima ed ultima lezione scoprirai come mettere insieme tutti questi elementi per realizzare una piccola applicazione web completamente funzionante.

Indice

  1. Come sviluppare rapidamente applicazioni web?
  2. Come utilizzare le griglie?
  3. Come implementare l’uso di form e pulsanti?
  4. Come creare le interfacce delle nostre applicazioni?
  5. Come far interagire gli utenti con le applicazioni?
Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag: , , ,

L'autore

Web Developer per vocazione. Team leader presso Your Inspiration Web. Ama tutto quello che gravita intorno alla User Experience e allo sviluppo web, con un occhio di riguardo a jQuery. Laureato in Informatica all'Università degli Studi dell'Aquila, scrive di web anche su blog stranieri. Facebook - Twitter - Google+

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

4 commenti

Trackback e pingback

  1. Twitter Bootstrap: Come creare le interfacce de...
    […] Dopo tantissime richieste ricevute in questi mesi per continuare e completare questa guida, finalmente riprendiamo le ultime lezioni rimanenti.Dall'ultima …
  2. Twitter Bootstrap: come sviluppare rapidamente applicazioni web? | Your Inspiration Web
    […] Come creare le interfacce delle nostre applicazioni? […]
  3. Twitter Bootstrap Scaffolding: come utilizzare le griglie? | Your Inspiration Web
    […] Come creare le interfacce delle nostre applicazioni? […]

Lascia un Commento

Current day month ye@r *