creare codice divertendosi
Bootstrap list – In questa lezione impareremo ad utilizzare le liste con Bootstrap, ovvero ad utilizzare gli elenchi puntati e numerati. Bootstrap list – Esempio Realizziamo un primo esempio di elenco non ordinato con il tag ul (unorderd list) ed il tag li per le singole voci. Al tag ul assegniamo poi la classe di […]
Bootstrap text – In questa lezione vedremo come personalizzare il testo in Bootstrap. Nel precedente articolo abbiamo visto come utilizzare i colori con il testo, in questa lezione vedremo come allineare il testo, utilizzare il grassetto, il corsivo e come trasformare il testo in maiuscolo o minuscolo. Bootstrap text – allineamento Per allineare un paragrafo […]
Bootstrap colors – In questo articolo parleremo dei colori in Bootstrap, quindi imposteremo uno sfondo per il paragrafo, un colore per il testo e per i collegamenti ipertestuali. Bootstrap colors per il testo Alcune classi da poter utilizzare per il testo e i collegamenti ipertestuali sono: text-primary, text-secondary, text-danger, text-warning, text-success, text-info, text-dark, text-muted, text-body, […]
In questo tutorial parleremo di Bootstrap alerts, ovvero di come creare dei messaggi di avviso in maniera automatica utilizzando apposite classi. Utilizzo di Bootstrap alerts Quindi è possibile utilizzare le seguenti classi: alert-success crea un riquadro con i bordi arrotondati con sfondo verde e testo nero alert-info crea un riquadro con i bordi arrotondati con […]
In questa lezione parleremo di Bootstrap table e di come gestire le tabelle in una pagina web. Come utilizzare Bootstrap table Innanzitutto è necessario inserire il tag div che conterrà la nostra tabella a cui assoceremo la classe container come al solito. Dopo utilizziamo il tag table a cui assegneremo la classe table. Quindi costruiamo […]
In questa lezione parliamo di Bootstrap icons, cioè di come utilizzare le icone in Bootstrap con i Fontawesome e Glyphicons. Bootstrap icons Le icone si possono utilizzare nel testo, nei menù, nei form, nei pulsanti e in tanti altri elementi di una pagina web. Ci sono tante piattaforme che mettono a disposizione queste icone in […]
In questa lezione parleremo dei Bootstrap buttons, e quindi di come aggiungere dei pulsanti nelle nostre pagine web. Bootstrap ha differenti stili di buttons che visualizza tramite apposite classi. Bootstrap buttons Vediamo in dettaglio le varie classi: btn crea un pulsante con uno stile di base. btn-primary crea un pulsante con sfondo blu e testo […]
In questa lezione parleremo di Bootstrap images e quindi di come Bootstrap tratta le immagini in maniera responsive. Ricordiamo che con il termine responsive si intende che il contenuto è ridimensionato in maniera automatica alla dimensione del display. Bootstrap images Utilizzando il tag img e la classe img-fluid, l’immagine si visualizza correttamente su tutti i […]
In questa lezione utilizzeremo Bootstrap carousel per generare uno slideshow di immagini che andremo ad inserire subito sotto il menù. Utilizzare Bootstrap carousel Quindi andiamo nel sito ufficiale di Bootstrap e selezioniamo il componente carousel: https://getbootstrap.com/docs/4.4/components/carousel/. Dopo scegliamo l’animazione che ci piace e inseriamo il codice nella nostra pagina web, subito dopo la chiusura di […]
In questa lezione approfondiremo l’argomento Bootstrap Container che abbiamo accennato nella lezione precedente. Abbiamo quindi capito che Bootstrap ha un elemento contenitore che racchiude gli elementi di un sito web. Bootstrap Container Dunque possiamo adesso distinguere due classi. Container fluid La classe container-fluid fornisce un contenitore a larghezza intera, cioè che ricopre l’intera larghezza della […]