Immaginiamo, ora, di trovarci davanti ad un caso un po’ particolare: dobbiamo sviluppare un modulo che faccia domande e dia risposte. Come facciamo? Semplice! Per farlo, utilizziamo una struttura detta panel, pannello.
I pannelli in Bootstrap creano contenuti strutturati con un aspetto professionale e accattivante. I pannelli consistono di un contenitore che può contenere testo, immagini, form e altri elementi, e sono spesso usati per creare sezioni distinte e organizzate all’interno di una pagina web.
In Bootstrap framework, i pannelli possono essere modificati e personalizzati impiegando classi CSS e possono essere usati in combinazione con altri componenti – come griglie e colonne – per creare il layout complessivo della pagina.
<h2>Siamo stati chiari?</h2>
<a class="btn btn-success" onclick="toggleChiari('yes')"> Sì </a>
<a class="btn btn-danger" onclick="toggleChiari('no')"> No </a>
<div id="chiariSi" style="display: none">Bene!</div>
<div id="chiariNo" style="display: none">Come possiamo aiutarti?</div>
Questo codice crea due pulsanti con domande “Sì” e “No” e due risposte con testo “Bene!” e “Come possiamo aiutarti?” che sono inizialmente nascosti. E’ utile per chiedere all’utente se sia stato chiarito un determinato argomento e mostrare un messaggio di conseguenza.
Vediamolo riga per riga, ma in semplicità. Entrare troppo nei dettagli richiederebbe molte nozioni che complicherebbero esageratamente l’aspetto intuitivo del codice.
La seconda riga mostra la prima domanda usando un pulsante con classe “btn-success” e l’attributo “onclick” che richiama la funzione “toggleChiari” con l’argomento “yes”. Il testo del pulsante è “Sì”.
La quinta riga è simile alla seconda. Mostra la seconda domanda, usando un pulsante con classe “btn-danger” e l’argomento della funzione “toggleChiari” è “no”. Il testo del pulsante è “No”.
L’ottava riga mostra la risposta alla prima domanda, che è “Bene!”. La proprietà “style” imposta “display:none”, il che significa che il div è nascosto.
La nona riga mostra la risposta alla seconda domanda, con testo “Come possiamo aiutarti?”.
L’uscita sarà di questo tipo:
Attenzione! Per visualizzarla esattamente così come nell’immagine devi aggiungere alcuni elementi di formattazione della pagina. Il codice richiesto, però, non è ideale per questa fase della guida. Al momento prendi questo esempio come illustrativo: più avanti lo userai nella sua forma completa per creare un sito web con Bootstrap!
