creare codice divertendosi
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. 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 maniera gratuita, almeno per la […]
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 […]
In questa lezione parleremo del Bootstrap grid system. Infatti quando creiamo una pagina web utilizzando Bootstrap, utilizziamo una struttura a griglia, chiamata grid system. All’interno del grid system sono posizionati i contenuti, chiamati components, suddivisi per colonne. Questa guida fa riferimento a Bootstrap 4 e la differenza fondamentale è che Bootstrap4 utilizza la flexbox, anziché […]
Impostiamo Bootstrap Nav in modo da posizionare il menù nella posizione desiderata. Nella lezione precedente abbiamo inserito il nostro menù usando Bootstrap navbar che si trova nella sezione componenti del sito ufficiale: https://getbootstrap.com/docs/4.4/components/navbar/. Adesso desideriamo posizionare il menù orizzontalmente, cambiando l’orientamento di default. Bootstrap Nav orizzontale Per modificare l’allineamento orizzontale del menù si utilizzano le […]
In questa lezione parliamo di Bootstrap navbar, ovvero in definitiva aggiungiamo al template di bootstrap una navbar, cioè un menù di navigazione. Perciò analizziamo i vari componenti che abbiamo a disposizione con il nostro framework. Andiamo sul sito https://getbootstrap.com, scegliamo Documentation e poi Components, come da figura sotto: Noterete quindi che i componenti sono suddivisi […]