GUIDE PER ASPIRANTI PROGRAMMATORI
Guida Bootstrap in italiano
Scoprirai bootstrap cos’è e ogni dettaglio del bootstrap framework: imparerai ad utilizzare il bootstrap grid system, e a padroneggiare i vari componenti come navbar, modali, form, e via discorrendo. Pronto a cominciare?
Vuoi avviare una nuova carriera o fare un upgrade?
Trova il corso Digital & Tech più adatto a te nel nostro catalogo!
- 2.1 - Bootstrap framework: le classi
- 2.2 - Bootstrap container: cosa sono e come funzionano
- 2.3 - Bootstrap grid system: come funziona la griglia di Bootstrap
- 2.4 - Classi di colonna e bootstrap breakpoints
- 2.5 - Boostrap Navbar: come funziona e come farne una
- 2.6 - Boostrap Panel: come fare un pannello in Bootstrap
- 2.7 - Come funzionano le Modali in bootstrap
- 2.8 - Come scrivere una tabella in Bootstrap
- 2.9 - Bootstrap Carousel: cos'è e come funziona
1
Introduzione a bootstrap
1.1
Bootstrap cos'è
Bootstrap è un framework open source per lo sviluppo rapido di siti Web reattivi e ottimizzati anche per dispositivi mobili. Un fun fact a riguardo? Bootstrap è stato sviluppato da Twitter, quindi hai tutte le garanzie possibili!
Bootstrap framework fornisce una serie di componenti predefiniti, come barre di navigazione, pulsanti, moduli e altro, che possono essere personalizzati e inseriti nei progetti. Il progetto di base è una griglia di riferimento, preformattata, su massimo 12 colonne. Ne parleremo meglio più avanti, ma è bene che fin d’ora tu abbia chiara questa struttura a griglia. (il famoso bootstrap grid system)
I casi d'uso principali di Bootstrap sono, in generale, la prototipazione rapida, grazie a una gamma di componenti pre-progettate, e la creazione di siti reattivi, ovvero che si ottimizzano autonomamente e in tempo reale alla schermata del browser. Si parla, ovviamente, di progetti di piccole e medie dimensioni che non richiedono elevata personalizzazione.
Vediamo cosa serve per sviluppare HTML con Bootstrap. Trattandosi di un’estensione ai CSS servirà un editor. Come in altre guide, abbiamo scelto Visual Studio Code, in breve VS Code o VSC.
1.2
Editor di codice: VSC
Secondo un recente sondaggio degli sviluppatori di Stack Overflow, lo strumento di sviluppo più popolare in tutte le categorie è VS Code. Molti sviluppatori preferiscono altri editor o notebook come Atom. Entrambi hanno estensioni di terze parti: VS Code ha un numero piccolo ma significativo di estensioni e temi, mentre per Atom ne sono state pubblicate 11K-12K.
Sia Atom, sia VS Code, sono liberamente scaricabili. I nostri esempi useranno quest'ultimo.
È il momento di scaricare un ambiente di sviluppo!
Questo notebook è disponibile per Windows, Linux e Mac, gratuitamente, a questo indirizzo.
Una volta scaricato il software ed eseguita l’installazione, si può aprire una nuova pagina e scegliere il linguaggio di programmazione che s’intende adottare.
Ecco la parte della lista, più lunga, dove compare anche il linguaggio HTML.
Lista linguaggi
Si dovrà creare un directory nel quale registrare tutti i file generati. Lo si può fare all’inizio, oppure aspettare che sia lo stesso VS Code a chiederlo, come normalmente accade alla generazione delle prime linee di codice.
Si parte sempre da un file index.html. La creazione di questo file può essere fatta, tra gli altri modi, cliccando sulla prima icona a destra dell’indicazione del workspace.
Finestra di comando, in alto a sinistra
Una volta cliccato, l’area editor a destra si predispone all’aggiunta di codice. La base da cui partire viene generata automaticamente da VSC premendo, in successione, il punto esclamativo e il tab. Personalizza il codice fino ad ottenere questa versione:
Se ti è difficile individuare le piccole differenze tra il codice nell’immagine e quello che ti viene fornito da VSC, per questa volta ecco il software pronto per copiare ed incollare:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Guida AULAB a Bootstrap</h1>
</body>
</html>
Bootstrap lavora in linguaggio HTML, ovviamente con le sue aggiunte come possono essere degli script del linguaggio JavaScript.
Se vuoi sapere di più su questi argomenti, non ti preoccupare! Abbiamo creato per te delle guide ad hoc, tra le quali la nostra guida html e css in italiano e la nostra nuova guida JavaScript
.
Lavorare in HTML vuol dire che il motore di esecuzione è già contenuto in un qualsiasi browser, per cui il risultato del tuo lavoro sarà mostrato direttamente da VSC, che aprirà una finestra dedicata del tuo browser di riferimento. Per questa guida utilizzeremo Chrome su PC, ma non cambia molto con qualsiasi altro browser o piattaforma.
Osserva, ora, la riga 5:
<meta http-equiv="X-UA-Compatible" content="chrome=1">
Questa riga di codice HTML indica che il sito web viene visualizzato in modalità di compatibilità con la versione più recente di Chrome.
Per indicare che un sito web deve essere visualizzato solo in modalità di compatibilità con Internet Explorer, nella versione più recente (Edge), è possibile impiegare questa riga di codice HTML:
<meta http-equiv="X-UA-compatible" content="IE=edge">
Metterai il valore "IE=Edge,chrome=1" per ottenere i migliori risultati sia con Internet Explorer (Edge), sia con Google Chrome.
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
L’azione in HTML avviene tra i due tag <body>, ora in riga 9 e 10. Se qui in mezzo aggiungiamo una riga di testo e ripetiamo il right-click su index.html, la pagina si aggiornerà, mostrando la scritta. Se inseriamo il testo tra i tag che indicano un titolo (headings) molto grande e aggiorniamo, beh…è facile intuirlo! La scritta sarà molto grande.
Ora salva il file index.html.
PS: le funzioni di salvataggio si ottengono cliccando sulla voce “file” in alto a sinistra.
1.3
Come usare Bootstrap
Entriamo ora nel vivo della nostra guida e parliamo in maniera concreta di Bootstrap framework. Il sito di riferimento è https://getbootstrap.com/. Come per ogni software, esistono varie versioni di bootstrap indicate da un numero di riferimento: niente paura, troverai quelle disponibili elencate in alto a destra. Può succedere che tu debba continuare un lavoro sviluppato precedentemente su una versione specifica: dovrai, quindi, andare sulla pagina indicata e seguire le istruzioni elencate.
Per abituarti a questa evenienza, negli esempi che vedrai in questa guida faremo uso di più sottoversioni di Bootstrap, in realtà assai simili tra loro.
Andando sul sito di Bootstrap hai a disposizione due modalità di funzionamento: una è per esperti (a sinistra), l’altra è per chi ancora sta studiando (a destra). Quella che utilizzeremo in questa guida è quella di destra, la versione CDN (Content Delivery Network).
Cliccando su CDN si apre una schermata nella quale, a destra, sono disponibili due componenti, un link al CSS e del codice JavaScript. Li vedi in questa parte dello schermo, con l’opzione “copy to clipboard” per aiutarti a non commettere errori.
Ricorda: più avanti li dovrai inserire nel tuo file HTML per poter usare le funzionalità di Bootstrap.
Ora puoi aprire VSC e digitare il classico file index.html che conterrà il codice.
Partiamo con questo index.html di base:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AULAB - Guida a Bootstrap</title>
<! QUI METTI L’INTERFACCIA CSS FORNITA DA BOOTSTRAP –>
</head>
<body>
<div class="container">Primi passi con Bootstrap CDN</div>
<! QUI METTI L’INTERFACCIA JAVASCRIPT FORNITA DA BOOTSTRAP –>
</body>
</html>
Questo codice contiene alcuni elementi (viewport, container) propri di Bootstrap. Per ora puoi ignorarne l’esatto uso.
Dove vedi scritto < QUI METTI L’INTERFACCIA CSS FORNITA DA BOOTSTRAP > copierai ed incollerai il codice del CSS fornito per primo nella pagina di Bootstrap, che inizia con “<link”.
Dove, invece, vedi scritto < QUI METTI L’INTERFACCIA JAVASCRIPT FORNITA DA BOOTSTRAP > copierai ed incollerai il codice JavaScript, fornito per secondo nella pagina di Bootstrap, che inizia con “<script>”.
In questa prima esperienza stiamo usando la versione 5.0.0 di Bootstrap. Tu puoi selezionarla dove mostrato o sceglierne un’altra. Il risultato finale sarà molto simile, se non uguale, a questo:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AULAB - Guida a Bootstrap</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity="sha384-randy/46KrjDleawBgDStp8Y7UzmLAGSOM1LAEQ17CSUDqnUK2+k91uXQOFXICI4I"
crossorigin="anonymous"
/>
</head>
<body>
<div class="container">
<h1>Primi passi con Bootstrap CDN</h1>
</div>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
integrity="sha384-oesi62hOLfzrys4LxRF630ICXdXDipiYwWBnvT19Y9/TR1wSx1KIEHpNyvvOShgf/"
crossorigin="anonymous"
></script>
</body>
</html>
Per far risaltare il testo, trovi un tag <H1> che prima non c’era.
Dalla barra dei comandi scegli Run nel browser, chiedi il debug ed otterrai un risultato semplice.
1.4
Vantaggi e peculiarità di Bootstrap framework
Prima di addentrarci nello sviluppo con Bootstrap è opportuno che tu possa valutare in quali situazioni possa rappresentare la soluzione ideale per il tuo progetto.
Per aiutarti a farlo, stiliamo una lista di vantaggi e peculiarità di questo framework cui potrai fare riferimento per prendere la tua decisione informata.
Vantaggi di Bootstrap framework
Ecco i quattro grandi vantaggi di Bootstrap:
Design reattivo: il sistema a griglia di Bootstrap (bootstrap grid system) semplifica la creazione di layout reattivi e pronti per i dispositivi mobili. Ricordi il concetto di layout responsive? Bene! Grazie al suo grid system, Boostrap ti aiuterà a declinare i layout dei tuoi siti per i diversi device da cui vengono fruiti, con estrema semplicità!
Coerenza: Bootstrap framework fornisce un aspetto coerente su tutti i browser e dispositivi.
Personalizzabile: i componenti pre-progettati di Bootstrap framework non rappresentano un dogma: possono essere, infatti, facilmente personalizzati per soddisfare le esigenze di qualsiasi progetto.
Grande comunità: Bootstrap framework ha una comunità ampia e attiva, il che significa che ci sono molte risorse e tutorial disponibili da utilizzare qualora dovessi imbatterti in qualche problema.
Peculiarità di Bootstrap framework
Per comprendere meglio il funzionamento di questo framework, è necessario segnalare alcune peculiarità. Essendo un framework che si basa sul linguaggio HTML, è frequente che alcune soluzioni possano essere sviluppate sia con indicazioni native di Bootstrap, sia con altri approcci compatibili, come ad esempio i CSS.
Inoltre, in molti casi le strutture scelte portano con sé un elevato numero di elementi di default, ovvero funzioni già comprese. Non sempre le avrai presenti tutte contemporaneamente, per cui ti potrà capitare di duplicarle con codice che scrivi tu.
Non sempre queste scelte pagano, ma con il tempo imparerai ad utilizzare le regole più appropriate. È sempre una questione di allenamento ed esperienza, e bootstrap ha una curva d'apprendimento realmente semplice, da non sottovalutare!
2
Struttura di base di Bootstrap
2.1
Bootstrap framework: le classi
I principali elementi costitutivi con i quali si sviluppa in Bootstrap framework sono la griglia (il Bootstrap grid system di cui accennavamo nei capitoli precedenti) i container, i form, i bottoni e la navigazione. Questi elementi sono tutti delle classi di programmazione. Spieghiamoci meglio.
Le classi di Bootstrap
In Bootstrap framework, le classi sono dei nomi predefiniti che applicano stili CSS a elementi HTML. Ad esempio, la classe btn definisce un bottone con uno stile specifico, mentre la classe text-center allinea il testo al centro.
Le classi vengono applicate direttamente agli elementi HTML attraverso l'attributo class. Questo rende più semplice e veloce la creazione di layout e design complessi: le classi pre-costruite di Bootstrap evitano di scrivere del linguaggio CSS personalizzato per ogni elemento.
Le principali classi di Bootstrap sono:
Contenitori (bootstrap container): impiegati per definire la struttura e l'allineamento del layout
Griglia (bootstrap grid): per posizionare i contenuti sulla pagina con .row ed altre classi
Form (bootstrap form): per creare form con elementi come input, label, pulsanti, selezioni e molto altro
Bottoni (bootstrap button): per creare pulsanti con varie dimensioni, colori e stili
Barra di navigazione (bootstrap navbar) per la creazione di link di navigazione.
Queste sono solo alcune delle molte classi disponibili in Bootstrap e il framework offre molte altre funzionalità per creare un sito web da zero che sia reattivo e professionale. Più avanti vedrai un esempio di barra di navigazione. Intanto, cominciamo ad esplorare i container!
2.2
Bootstrap container: cosa sono e come funzionano
In Bootstrap, un container è un elemento HTML che funge da contenitore per il contenuto della tua pagina. I container possono essere impiegati per definire un margine e un allineamento per il contenuto all'interno di essi.
Bootstrap framework offre tre tipi di container:
Container fisso: ha una larghezza fissa e viene usato per creare layout con margini fissi.
Container fluido: ha una larghezza flessibile e si adatta alla larghezza della finestra del browser.
Container a griglia: usa il Bootstrap grid system per creare layout complessi con colonne e righe.
In generale, si consiglia di usare il container fluido per la maggior parte delle pagine web ma, a volte, può essere utile usare un container fisso o a griglia per specifici casi d'uso.
Come primo esempio prendiamo la seguente linea di codice:
<div class="container p-3 my-3 border rounded shadow-lg">
Questa linea di codice crea un elemento HTML di tipo "div" (ricordi cos’è un div?) che impiega la classe "container" di Bootstrap, insieme a tre altre classi: "p-3", "my-3" e le classi "border rounded shadow-lg".
La classe "container" definisce un contenitore per il contenuto del sito web, che viene centrato orizzontalmente e con una larghezza massima predefinita. Questo aiuta a mantenere un layout coerente e a evitare che il contenuto esca dai bordi della pagina.
La classe "p-3" definisce un padding (spazio vuoto) di 3 unità all'interno del contenitore. Questo crea un po' di spazio vuoto attorno al contenuto per renderlo più leggibile.
La classe "my-3" definisce un margine (spazio vuoto esterno) di 3 unità per il contenitore. Questo crea un po' di spazio vuoto attorno al contenitore per separarlo dai contenuti adiacenti.
Le classi "border rounded shadow-lg" definisce un bordo, angoli arrotondati e un'ombra di grandi dimensioni per il contenitore. Questo fornisce un effetto visivo accattivante e aumenta la leggibilità del contenuto.
Se alcuni termini ti disorientano, puoi rinfrescarti la memoria con la nostra guida all’html e css in italiano e poi tornare su queste pagine!
2.3
Bootstrap grid system: come funziona la griglia di Bootstrap
Il bootstrap grid system (o sistema a griglia di Bootstrap) è un sistema di layout a 12 colonne (che compongono la cosiddetta riga) che consente di suddividere l'interfaccia utente in sezioni equamente distribuite.
Ogni riga, dunque, può contenere fino a 12 colonne, che a loro volta possono essere divise ulteriormente in colonne più piccole.
Per usare la griglia bisogna impiegare le classi di colonna .col-(numero) nell'elemento HTML. Spieghiamoci meglio:
per creare, ad esempio, una colonna che occupa metà della larghezza della riga, si utilizzerebbe la classe .col-6. È, inoltre, possibile specificare la larghezza delle colonne in base alle diverse dimensioni dello schermo usando classi come .col-sm-4 o .col-lg-8, che utilizzano i cosiddetti bootstrap breakpoints (ad esempio sm - lg - xl), vale a dire dei punti che rappresentano un numero di pixel allo scattare del quale la situazione del layout cambierà.
Il bootstrap grid system si avvale di una griglia che è progettata per essere flessibile e adattarsi a diverse dimensioni di schermo, il che la rende una scelta popolare per la creazione di siti web responsivi. Inoltre, Bootstrap framework fornisce anche classi predefinite per la creazione di righe, offset e allineamento delle colonne, che semplificano ulteriormente la creazione di un layout avanzato.
Per impostare la griglia si usa la class row.
Ecco il codice per creare una schermata con tre colonne.
<div class="container">
<div class="row">
<div class="col-sm-4">Colonna 1</div>
<div class="col-sm-4">Colonna 2</div>
<div class="col-sm-4">Colonna 3</div>
</div>
</div>
In questo esempio, ogni colonna avrà una larghezza di 4 su 12, quindi 1/3 della larghezza totale del contenitore. Il bootstrap grid system usa classi CSS come row e col-sm-4 per creare la griglia. Il prefisso sm è uno dei breakpoints di cui sopra e, nello specifico, indica che la griglia si adatterà ai dispositivi con larghezza superiore a 576px (punti).
2.4
Classi di colonna e bootstrap breakpoints
Le classi di colonna in bootstrap
Come accennato nel capitolo precedente, le classi di colonna in Bootstrap sono utilizzate per creare un layout a griglia responsivo, in cui i contenuti vengono organizzati in righe e colonne.
Le classi di colonna sono indicate con il prefisso "col-", seguito da un numero da 1 a 12, che indica la larghezza della colonna in base a un sistema a griglia a 12 colonne.
Ad esempio, "col-6" indica una colonna che occupa la metà della larghezza della riga, mentre "col-12" indica una colonna che occupa l'intera larghezza della riga.
Le classi di colonna possono anche essere combinate con le classi di offset, per creare spazi vuoti tra le colonne, o con le classi di push e pull, per spostare le colonne a destra o sinistra rispetto alla loro posizione originale nella griglia.
I bootstrap breakpoints
Nel capitolo precedente abbiamo citato anche i bootstrap breakpoints: si tratta di un’aggiunta alle classi di colonna.. Hai già visto i breakpoints nella prima definizione del bootstrap grid system, ma ora vediamo qualche dettaglio in più.
Nello specifico, abbiamo:
xs: <576px
sm: ≥576px
md: ≥768px
lg: ≥992px
xl: ≥1200px
Xxl: ≥1400px
Ogni classe di colonna è seguita da un numero che rappresenta il numero di colonne che verranno usate su una singola riga. Ad esempio, .col-6 significa che la larghezza della colonna sarà pari a metà della larghezza della riga e, orientandoti coi breakpoints prestabiliti, sarai in grado di far cambiare il tuo layout come meglio chiedi a seconda delle dimensioni dello schermo!
2.5
Boostrap Navbar: come funziona e come farne una
La Navbar di Bootstrap è un componente di navigazione che permette di creare un menu di navigazione con un’ interfaccia responsive. Supporta elementi come link, pulsanti, dropdown e form. Può essere personalizzata con le classi di Bootstrap per cambiare l'aspetto e il comportamento. Analizziamone meglio, dunque, gli elementi:
Link: Un elemento di navigazione che, quando cliccato, porta l'utente a un'altra pagina o a un'altra sezione della pagina corrente.
Pulsanti: Elementi cliccabili usati per triggerare un'azione o un evento.
Dropdown: Un menu a discesa che visualizza un elenco di opzioni quando viene cliccato.
Form: Un elemento che permette all'utente di inserire dati che verranno inviati al server per l'elaborazione.
Bootstrap framework ti consente di impiegare delle classi per cambiare l'aspetto e il comportamento della Navbar.
Ad esempio, la classe "navbar-light" viene usata quando lo sfondo è chiaro (light) e, quindi, il colore del testo sarà scuro, mentre la classe "navbar-fixed-top" può essere usata per fissare la Navbar all'inizio della pagina. Ci sono molte altre classi disponibili in Bootstrap che possono essere impiegate per personalizzare la Navbar, così come bootstrap mette a disposizione dei bootstrap navbar template da utilizzare per una base già pronta all’uso.
Può esserti utile vedere subito un esempio di barra di navigazione con il tag nav.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Esempio di Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Vantaggi e peculiarità</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Struttura di base</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Le classi di Bootstrap</a>
</li>
</ul>
</div>
</nav>
Inserendo questo codice Html all’interno della sezione body del nostro codice di base, abiliterai una barra di navigazione con tre categorie.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AULAB - Guida a Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"
/>
</head>
<body>
<div class="container">Primi passi con Bootstrap CDN</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"
></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Esempio di Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Vantaggi e peculiarità</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Struttura di base</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Le classi di Bootstrap</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
Se lo esegui, avrai il risultato che segue.
Non ti resta che provare!
2.6
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!
2.7
Come funzionano le Modali in bootstrap
Le Modali in Bootstrap sono finestre di dialogo modale che vengono usate per visualizzare contenuti o richiedere azioni all'utente. Per capirci, sono le finestre di pop-up.
Sono, certamente, utili per mostrare informazioni aggiuntive, raccogliere dati tramite form o per presentare all'utente nuove opzioni di interazione leggere, senza dover proporre una nuova pagina Html.
Le modali di Bootstrap sono, generalmente, costituite da una struttura html che include un contenitore principale, un'intestazione, un corpo e un piè di pagina.
Il comportamento e lo stile delle modali possono essere personalizzati attraverso il linguaggio CSS e il linguaggio JavaScript o altri sistemi.
Le modali sono intrusive e impediscono all'utente di interagire con la pagina dietro la modale fino a quando non viene chiusa. Possono contenere testo, form, immagini, video o qualsiasi altro contenuto html. Possono essere personalizzate con le classi di Bootstrap per cambiare l'aspetto e il comportamento.
Se ti stai chiedendo quando le modali possano servirti, i casi di applicazione di questo componente potrebbero essere creare finestre di dialogo di conferma, finestre di dialogo di inserimento dati o qualsiasi altro tipo di finestra di dialogo che richieda l'interazione dell'utente.
I moduli pop-up, comunque, sono di grande utilità ed impatto nello sviluppo di siti web coinvolgenti. Facciamo, ora, un esempio completo e funzionante che prevede uno schermo su tre colonne con una domanda in terza colonna. -
Cliccando ciascuna delle due possibili risposte, otterremo un diverso pop-up.
Come vedrai, abbiamo inserito tutte le componenti necessarie per usare il codice. Se lo ritieni troppo complesso per questa fase di apprendimento, guarda le schermate che seguono il codice e vai avanti. Ritroverai tutto (e molto di più!) nel prototipo del tuo primo website con Bootstrap!
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
</head>
<body>
<div class="container p-3 my-3 border rounded shadow-lg">
<div class="row g-3">
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="p-3 border rounded text-bg-light">
<h1>Bel titolo 1</h1>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="p-3 border rounded text-bg-warning">
<h1>Bel titolo 2</h1>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="row mb-3">
<div class="text-center p-3 border rounded text-bg-light shadow">
<h3 class="p-3 text-bg-secondary rounded">Popup Modali</h3>
<h2>Siamo stati chiari?</h2>
<!-- Button trigger modal -->
<button
type="button"
class="btn btn-success"
data-bs-toggle="modal"
data-bs-target="#exampleModalYes"
>
Sì
</button>
<button
type="button"
class="btn btn-danger"
data-bs-toggle="modal"
data-bs-target="#exampleModalNo"
>
No
</button>
<!-- Modal -->
<div
class="modal fade"
id="exampleModalYes"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">
Siamo stati chiari!
</h1>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">Bene!</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Chiudi
</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div
class="modal fade"
id="exampleModalNo"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">
Non siamo stati chiari...
</h1>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">Come possiamo aiutarti?</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Chiudi
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /row -->
</div>
<!-- /container -->
</div>
<!-- /row -->
</div>
<!-- /container -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"
></script>
</body>
</html>
Ecco cosa vedrai eseguendo il codice:
Questa è l’esecuzione, evidenziando il tasto sì.
Questa è la risposta alla pressione del tasto “Sì”.
2.8
Come scrivere una tabella in Bootstrap
Le Tabelle in Bootstrap sono componenti che permettono di visualizzare dati tabulari in una struttura ordinata e facilmente leggibile. Supportano l'ordinamento, la filtratura, la paginazione e altre funzionalità avanzate. Le tabelle possono essere create con i tag HTML standard e possono essere personalizzate con le classi di Bootstrap per cambiare l'aspetto e il comportamento. Ad esempio, la classe "table-striped" può essere impiegata per applicare uno sfondo alternato alle righe della tabella, mentre la classe "table-hover" può essere usata per evidenziare la riga su cui si posiziona il mouse. Ci sono molte altre classi disponibili in Bootstrap che possono essere impiegate per personalizzare le tabelle.
L’uso delle classi “table” appena elencate è veramente immediato. Usandole entrambe, ecco come appare una tabella nella quale lo sfondo delle righe alterna due toni di grigio (striped) e, quando si passa con la punta del mouse, (hover), lo sfondo si scurisce ancora di più.
Il codice è semplicissimo: vediamolo con una tabella (ad esempio) di tre Regioni italiane, con superficie e abitanti.
<div class="container">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Nome</th>
<th>Superficie (km2)</th>
<th>Numero di Abitanti</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lombardia</td>
<td>23,861</td>
<td>10,015,000</td>
</tr>
<tr>
<td>Veneto</td>
<td>18,391</td>
<td>4,924,000</td>
</tr>
</tbody>
</table>
</div>
Questa sezione andrà inserita all’interno del tag <body>. Il codice complessivo si mostrerà così:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GUIDA AULAB A BOOTSTRAP</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous"
/>
</head>
<body>
<div class="container-fluid">Primi passi con Bootstrap CDN</div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Nome</th>
<th>Superficie (km²)</th>
<th>Numero di Abitanti</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lombardia</td>
<td>23,861</td>
<td>10,015,000</td>
</tr>
<tr>
<td>Veneto</td>
<td>18,391</td>
<td>4,924,000</td>
</tr>
<tr>
<td>Emilia-Romagna</td>
<td>22,446</td>
<td>4,456,000</td>
</tr>
</tbody>
</table>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"
></script>
</body>
</html>
Ora non resta che mandarla in esecuzione. Se hai ancora aperta una finestra del browser nel quale viene eseguito un esempio precedente, ricordati di chiuderla. Quindi Vai in RUN >> START DEBUGGING, ed ecco quello che viene visualizzato:
Il mouse, anche se non si vede, è qui posizionato su Emilia-Romagna. Nell’immagine grande i tre diversi toni di grigio possono non essere troppo visibili. Può essere comoda un’immagine di dettaglio:
I tre diversi toni di grigio sono ora evidenti.
2.9
Bootstrap Carousel: cos'è e come funziona
Cos'è un carousel in Bootstrap?
Il carousel in Bootstrap è un componente che permette di mostrare un insieme di immagini o contenuti in sequenza, uno alla volta, all'interno di un'area di visualizzazione. Questo componente è molto utile per presentare i prodotti in una pagina di e-commerce, mostrare le foto di una galleria o offrire un'anteprima dei contenuti di un blog.
Come funziona un carousel in Bootstrap?
Il carousel di Bootstrap è composto da un'area di visualizzazione principale e dai controlli di scorrimento (prev e next) che permettono di navigare tra le varie slide. Le slide sono costituite da immagini o contenuti, e vengono visualizzate una alla volta con una transizione animata.
Vediamo ora come realizzare un carousel in Bootstrap; Ecco i passaggi da seguire per creare un carousel in Bootstrap:
Includere le librerie di Bootstrap: Per prima cosa, è necessario includere le librerie di Bootstrap nel tuo progetto. Questo può essere fatto includendo le librerie CSS e JavaScript di Bootstrap nella tua pagina HTML.
Creare la struttura HTML del carousel: Successivamente, devi creare la struttura HTML del carousel. Ciò include l'area di visualizzazione principale, i controlli di scorrimento e le slide. Le slide sono costituite da immagini o contenuti, e ogni slide deve essere contenuta in un elemento div con la classe "carousel-item".
Aggiungere il codice JavaScript: Per far funzionare il carousel, è necessario aggiungere il codice JavaScript che implementa la logica di scorrimento delle slide. Questo può essere fatto includendo le librerie JavaScript di Bootstrap nella tua pagina HTML e creando un'istanza di un oggetto Carousel.
Personalizzare il tuo carousel: Bootstrap offre molte opzioni di personalizzazione per il carousel, come la possibilità di modificare la durata della transizione, la velocità di scorrimento delle slide e la visualizzazione dei controlli di scorrimento. Queste opzioni possono essere specificate nella configurazione del carousel.
Aggiungere il tuo contenuto: Infine, è possibile aggiungere il tuo contenuto alle slide del carousel. Ciò può includere immagini, testo e pulsanti che guidano l'utente verso le pagine del tuo sito
Ecco un esempio di codice HTML e JavaScript per un carousel semplice in italiano:
<div id="mioCarousel" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#mioCarousel" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#mioCarousel" data-bs-slide-to="1"></li>
<li data-bs-target="#mioCarousel" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img1.jpg" alt="Prima slide" />
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img2.jpg" alt="Seconda slide" />
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img3.jpg" alt="Terza slide" />
</div>
</div>
<a
class="carousel-control-prev"
href="#mioCarousel"
role="button"
data-bs-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Precedente</span>
</a>
<a
class="carousel-control-next"
href="#mioCarousel"
role="button"
data-bs-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Successivo</span>
</a>
</div>
<script>
$(document).ready(function () {
$("#mioCarousel").carousel();
});
</script>
Nella prima parte del codice HTML, viene creato il carousel con un ID personalizzato "mioCarousel". Viene anche creato un elenco puntato "carousel-indicators" che mostra il numero di slide presenti nel carousel.
All'interno dell'elemento "carousel-inner", ci sono tre elementi "carousel-item" che rappresentano le slide del carousel. Ciascuna slide contiene un'immagine e un testo alternativo (alt) descrittivo.
Nella seconda parte del codice HTML, sono presenti i controlli di scorrimento del carousel (precedente e successivo) che consentono di navigare tra le slide. Per far funzionare i controlli di scorrimento, viene utilizzato del codice JavaScript jQuery che inizializza il carousel al caricamento della pagina. Prova a realizzarne uno!
3
Personalizzazione di Bootstrap
3.1
Personalizzare Bootstrap
Come già detto, Bootstrap framework è un framework del linguaggio CSS, che fornisce una serie davvero ampia di stili e componenti predefiniti per creare un sito web.
Per rendere più efficiente la creazione e la gestione di questi stili e componenti, Bootstrap utilizza dei preprocessori, vale a dire software utilizzati per semplificare la scrittura del codice CSS estendendone le funzionalità e mantenendo, al contempo, la compatibilità con il linguaggio stesso.
I preprocessori CSS offrono una serie di vantaggi rispetto alla scrittura diretta del CSS, come variabili e funzioni che non sono disponibili in CSS standard.
Less e Sass sono due preprocessori CSS usati per sviluppare stili in Bootstrap; più nel dettaglio:
Less (Leaner Style Sheets) è un preprocessore CSS dinamico. Usa una sintassi simile a CSS. Per creare e gestire i suoi file di stile CSS, Bootstrap usa Less.
Sass (Syntactically Awesome Style Sheets) è un altro preprocessore CSS con sintassi più avanzata rispetto a CSS e fornisce funzionalità come variabili, funzioni, mixing e nesting.
In Bootstrap è possibile usare sia Sass che Less. Se si desidera usare Sass invece di Less, è necessario, tuttavia, compilare i file Sass in CSS prima di inserirli nel progetto.
In questa guida non è necessario approfondire questi argomenti. Se procederai con lo studio, però, ti dovrai confrontare con questi ed altri preprocessori.
4
Bootstrap tutorial: creare un sito web con Bootstrap
4.1
Crea un sito web con bootstrap framework!
Come hai visto, Bootstrap organizza il layout della pagina web in colonne, per un massimo di 12.. Poi, valuta la dimensione dello schermo del device di visualizzazione e decide quante di queste colonne mostrare su ogni riga e, quindi, quante righe saranno necessarie per mostrare l’intero contenuto. Sugli smartphone, in generale, si visualizza una sola colonna, come vedrai più avanti. La cosa importante è che di questo aspetto si occupa direttamente Bootstrap.
Facciamo, ora, un esempio reale. Userai le conoscenze che hai già imparato in questa guida. Progettiamo un sito web, il tuo primo con Bootstrap framework! Scegliamo un layout a tre colonne. Nella prima mettiamo un titolo, del testo e un’immagine; nella seconda, un altro titolo, altro testo e un video di Youtube; poi, mettiamo dei box di domanda che usano alcune delle peculiarità di Bootstrap.
In particolare, per la formattazione usiamo Bootstrap versione 5.2.3.
La pagina include un contenitore principale con tre colonne all'interno, ognuna delle quali contiene un div con testo e un'immagine.
Per incorporare il video di YouTube usiamo un iframe.
Inoltre, la pagina include due pulsanti "Sì" e "No" che sfruttano la funzione collapse di Bootstrap per mostrare o nascondere un div in base alla scelta dell'utente.
Abbiamo già visto il file di base con le necessarie aggiunte per Bootstrap (in alto) e Javascript (in basso).
Abbiamo già visto anche come dichiarare un container.
<div class="container p-3 my-3 border rounded shadow-lg">
Questa è una versione più articolata di quella che hai già visto in precedenza.
Ora, stabiliamo di dividere la griglia in 3 componenti. Ci serve la classe row, riga:
<div class="row g-3">
In Bootstrap, la classe row crea una riga di colonne all'interno di un container. ipotizziamo di suddividere la riga in tre colonne di eguale larghezza. Poiché Bootstrap divide la riga in 12 elementi, per averne 3 dobbiamo avere colonne larghe 4 elementi (12/3). Ciascuna delle tre colonne verrà quindi configurata con la classe col-4. Dovremo inserire le tre colonne prima in un elemento row e più esternamente in un elemento container.
Inoltre, Bootstrap 5 ha introdotto le classi g-* (gutter, canale) per gestire facilmente la spaziatura tra gli elementi all'interno di un contenitore o una riga. Il valore numerico che segue la lettera g rappresenta l'ampiezza dello spazio. Può avere valori da 0 (niente canale) a 5 (canale largo).
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
</head>
<body>
<div class="container p-3 my-3 border rounded shadow-lg">
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<div class="p-3 border rounded bg-light">
<h1>Bel titolo</h1>
Questo codice HTML rappresenta una pagina web.
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="p-3 border rounded bg-light">
<h1>Bel titolo</h1>
Questo codice HTML rappresenta una pagina web.
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="p-3 border rounded bg-light">
<h1>Bel titolo</h1>
Questo codice HTML rappresenta una pagina web.
</div>
</div>
</div>
</div>
</body>
</html>
Questo codice produce la seguente schermata:
Come vedi, il browser occupa l’intero schermo, che è diviso in tre parti.
Ora puoi vedere una delle grandi funzionalità di Bootstrap. Riduci l’ampiezza del browser: vedrai che i contenuti vengono posti automaticamente in posizioni opportune!
Avendo fatto tre divisioni puoi vedere come reimpostare il sito su due colonne (come per un piccolo tablet) o una sola colonna (come per uno smartphone).
Non è grandioso? Pensa a come puoi organizzare la pagina avendo a disposizione fino a 12 colonne!
Ora arricchiamo un po’ il progetto. La struttura resta la stessa, articolata su tre sezioni. Ma nel primo mettiamo testo e un’immagine, nel secondo testo e un video di Youtube, e al posto della terza mettiamo una domanda e due possibili modi di rispondere.
<!-- Esempio sito Bootstrap completo -->
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
</head>
<body>
<div class="container p-3 my-3 border rounded shadow-lg">
<div class="row g-3">
<div class="col-12 col-md-6 col-lg-4">
<div class="p-3 border rounded text-bg-light">
<h1>Bel titolo 1</h1>
<img
style="width: 200px"
class="rounded float-end img-thumbnail"
alt="Colosseo"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Colosseo_2020.jpg/390px-Colosseo_2020.jpg"
/>
Questo codice HTML rappresenta una pagina web che utilizza il
framework di design Bootstrap in versione 5.2.3. La pagina include
un tag
<meta
name="viewport"
content="width=device-width, initial-scale=1"
/>
per garantire che la visualizzazione sia adatta ai dispositivi
mobili. Il framework Bootstrap è incluso tramite un link CSS
da una fonte esterna. Nella sezione <body> viene definito un
contenitore principale con classe "container" e una riga di tre
colonne all'interno di esso.
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="p-3 border rounded text-bg-warning">
<h1>Bel titolo 2</h1>
Ognuna delle tre colonne contiene un div con classe "p-3 border
rounded bg-***" Questi div contengono del testo di esempio.
<br />
Infine, la pagina include un file JavaScript da una fonte esterna
che include il bundle di Bootstrap.
<iframe
class="w-auto h-auto"
src="https://www.youtube.com/embed/cB3u1OLBm68"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="container">
<div class="row mb-3">
<div class="text-center p-3 border rounded text-bg-light shadow">
<h3 class="p-3 text-bg-secondary rounded">Pannelli</h3>
<h2>Siamo stati chiari?</h2>
<a
class="btn btn-success"
data-bs-toggle="collapse"
href="#chiariSi"
role="button"
>
Sì
</a>
<a
class="btn btn-danger"
data-bs-toggle="collapse"
href="#chiariNo"
role="button"
>
No
</a>
<div class="collapse" id="chiariSi">
<div class="card card-body">Bene!</div>
</div>
<div class="collapse" id="chiariNo">
<div class="card card-body">Come possiamo aiutarti?</div>
</div>
</div>
</div>
<!-- /row -->
<div class="row mb-3">
<div class="text-center p-3 border rounded text-bg-light shadow">
<h3 class="p-3 text-bg-secondary rounded">Popup Modali</h3>
<h2>Siamo stati chiari?</h2>
<!-- Button trigger modal -->
<button
type="button"
class="btn btn-success"
data-bs-toggle="modal"
data-bs-target="#exampleModalYes"
>
Sì
</button>
<button
type="button"
class="btn btn-danger"
data-bs-toggle="modal"
data-bs-target="#exampleModalNo"
>
No
</button>
<!-- Modal -->
<div
class="modal fade"
id="exampleModalYes"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">
Siamo stati chiari!
</h1>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">Bene!</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Chiudi
</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div
class="modal fade"
id="exampleModalNo"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">
Non siamo stati chiari...
</h1>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">Come possiamo aiutarti?</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Chiudi
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /row -->
</div>
<!-- /container -->
</div>
</div>
<!-- /row -->
</div>
<!-- /container -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"
></script>
</body>
</html>
Genera il file Html equivalente e mandalo in esecuzione: ecco il risultato!
Ora vediamo come abbiamo sviluppato il codice.
Nel primo box, “Bel titolo 1”, trovi del testo (parte della descrizione di questo stesso programma!) e un’ immagine presa da Wikipedia
Nel secondo box, “Bel titolo 2”, trovi un’altra parte della descrizione del programma e un video di Youtube inserito grazie ad un iframe:
<iframe
class="w-auto h-auto"
src="https://www.youtube.com/embed/cB3u1OLBm68"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
Il numero d’ordine di Youtube è cB3u1OLBm68: per inserire un video diverso basta sostituire a questo numero quello di un altro video che ti interessa.
Alla fine abbiamo messo una domanda semplice con due versioni di risposta: in un caso appare una breve scritta a seguire, nell’altro appaiono dei pop-up. Avevi già visto queste funzionalità, ricordi?
Ora non ti resta che cambiare scritte e link, e magari qualche elemento grafico, e avrai il tuo primo codice per sito web scritto in Bootstrap!
Questa guida ti ha dato un piccolo assaggio del framework CSS più utilizzato ad oggi, ma bootstrap framework è un mondo tutto da scoprire! Incuriosito? Iscriviti alla nuova Hackademy in partenza! Nel frattempo, però, non ti lasciamo a mani vuote: prova ad esercitarti con i nostri esercizi di bootstrap!
Sei indeciso sul percorso? 💭
Parliamone! Scrivici su Whatsapp e risponderemo a tutte le tue domande per capire quale dei nostri corsi è il più adatto alle tue esigenze.
Oppure chiamaci al 800 128 626
CONTENUTI GRATUITI IN EVIDENZA
Guide per aspiranti programmatori 👨🏻🚀
Vuoi muovere i primi passi nel Digital e Tech? Abbiamo preparato alcune guide per aiutarti a orientarti negli ambiti più richiesti oggi.
