CONTATTACI

Guide per aspiranti programmatori

Lezione 10 / 15

Boostrap Panel: come fare un pannello in Bootstrap

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!

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 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

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.