Bootstrap è un framework utilizzato per la creazione di siti web responsive, ovvero di quei siti web adatti sia ad una visualizzazione su desktop sia su smartphone e tablet. In questo tutorial su Bootstrap vedremo come utilizzarlo per realizzare i nostri layout.
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 … Leggi tutto
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 … Leggi tutto
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, … Leggi tutto
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 … Leggi tutto
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 … Leggi tutto
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 … Leggi tutto
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 … Leggi tutto
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 … Leggi tutto
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 … Leggi tutto
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 … Leggi tutto
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é … Leggi tutto
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 … Leggi tutto
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 … Leggi tutto
In questa lezione realizzeremo il nostro primo semplice Bootstrap template. Nella lezione precedente abbiamo scaricato la cartella con i sorgenti e abbiamo rinominato la cartella bootstrap per comodità. Lavoriamo dunque all’interno di questa cartella. Chiaramente quando andremo a creare un sito web rinomineremo questa cartella in maniera opportuna. Ad esempio se dovessi realizzare il sito … Leggi tutto
In questo tutorial parleremo del framework Bootstrap e di come effettuare il download. Ricordiamo che le librerie software di Bootstrap sono un insieme di strumenti per costruire siti web responsive. Per siti web responsive si intendono quei siti il cui layout delle pagine web si regola in maniera automatica, tenendo conto cioè delle caratteristiche del … Leggi tutto