da Cristina | Gen 18, 2020 | Bootstrap, Web
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 la nostra tabella utilizzando i tag tr per la riga e td per la cella. Utilizzeremo inoltre th per le intestazioni di colonna e di riga.
Al tag th si può aggiungere l’attributo scope dando il valore col o row, il quale specifica che l’intestazione fa riferimento alla colonna o alla riga, ma attenzione questo attributo non è supportato dall’HTML5.s
Nel costruire la nostra tabella useremo anche i tag semantici thead e tbody. Dell’importanza di questi tag ne abbiamo parlato in questo articolo: tabelle in html.
Tabelle personalizzate
Nel nostro esempio al tag thead assegniamo la classe thead-dark per creare l’intestazione della tabella di colore grigio scuro e testo bianco.
Inoltre alla tabella assegniamo la classe table-striped per colorare di grigio, in maniera alternata, le righe.
Chiaramente si possono utilizzare delle classi personalizzate per creare degli effetti nuovi.
Ecco un esempio di possibile tabella con Bootstrap:
<table class="table table-striped">
<thead class="thead-dark">
<tr>
<th></th>
<th>Linguaggi</th>
<th>Tutorial</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Bootstrap</td>
<td><a href="https://www.codingcreativo.it/tutorial-bootstrap/" target="blank">Tutorial Bootstrap</a></td>
</tr>
<tr>
<th>2</th>
<td>HTML5</td>
<td><a href="https://www.codingcreativo.it/tutorial-bootstrap/" target="blank">Tutorial HTML5</a></td>
</tr>
<tr>
<th>3</th>
<td>CSS3</td>
<td><a href="https://www.codingcreativo.it/tutorial-bootstrap/" target="blank">Tutorial CSS3</a></td>
</tr>
</tbody>
</table>
Potete visualizzare un esempio d’uso delle tabelle in questo link: tabelle Bootstrap.
Sfondi tabella, righe e celle
Così come abbiamo visto per i pulsanti si possono assegnare delle classi predefinite alle tabelle, righe o celle.
table-primary crea uno sfondo con sfondo blu e testo bianco.
table-secondary crea uno sfondo con sfondo grigio e testo bianco.
table-success crea uno sfondo con sfondo verde e testo bianco.
table-info crea uno sfondo con sfondo azzurro e testo bianco.
table-warning crea uno sfondo con sfondo arancione e testo nero.
table-danger crea uno sfondo con sfondo rosso e testo bianco.
table-light crea uno sfondo con sfondo grigio chiaro e testo nero.
table-dark crea uno sfondo con sfondo nero e testo bianco.
Oppure è possibile utilizzare anche le classi bg-primary, bg-success, ecc…
Bordo della tabella
Utilizzando la classe table-bordered si imposta il bordo alla tabella, mentre con table-borderless si elimina il bordo della tabella.
Tabelle responsive
E’ possibile creare delle tabelle responsive utilizzando la classe table-responsive{-sm|-md|-lg|-xl} dove al solito sm, md, lg, ed xl (quest’ultimo introdotto con Bootstrap 4) sono i breakpoint.
Questa classe deve essere assegnata al div.
Potete consultare i vari esempi sul sito ufficiale: tabelle con Bootstrap.
Link utili
Indice argomenti tutorial Bootstrap
1 – Introduzione a Bootstrap
2 – Creazione del primo template
3 – Come inserire una Navbar
4 – Personalizzare la posizione del menù
5 – Come utilizzare il grid system
6 – Bootstrap Container
7 – Inserire lo slideshow di immagini con Carousel
8 – Come utilizzare le Bootstrap images
da Cristina | Gen 18, 2020 | Bootstrap, Web
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 maniera gratuita, almeno per la versione base.
Glyphicons
Le prime Bootstrap icons, da poter utilizzare, che vi presento sono le Glyphicons.
Fino alla versione Bootstrap 3 trovavamo una cartella con le Glyphicons, ma nella nuova versione è stata tolta.
Si possono sempre utilizzare andando sul sito ufficiale glyphicons e andando a vedere le specifiche di utilizzo. Alcuni set di icone sono però a pagamento.
Quindi basta aggiungere il seguente codice tra il tag head:
<link rel="stylesheet" href="glyphicons/glyphicons.css">
E poi utilizzarle in un punto qualsiasi della pagina, inserendo la classe opportuna. Ad esempio per visualizzare la casetta della home posso utilizzare questo codice.
<span class="glyphicon glyphicon-home" aria-hidden="true"></span>
Oppure per la stampante ad esempio posso usare questo codice:
<span class="glyphicon glyphicon-print"></span>
Potete trovare il codice completo delle icone in questa pagina: glyphicons icone.
Fontawesome
Si possono utilizzare altre Bootstrap icons e le più utilizzare sono i Fontawesome.
Si può andare sul sito ufficiale di Fontawesome e scaricare tutta la cartella.
La cartella webfonts all’interno contiene i caratteri tipografici che il CSS utilizza.
Per utilizzare i fontawesome si può collegare il file all.css che contiene lo stile base più tutti gli stili icona.
Quindi provate ad inserire prima della chiusura del tag head il seguente codice:
<link href="fontawesome/css/all.css" rel="stylesheet">
Chiaramente mettete il vostro percorso al file.
Dopo per utilizzare le icone sarà sufficiente utilizzare il tag i con la classe opportuna.
<i class="fas fa-user"></i>
<i class="fas fa-hands"></i>
<i class="fas fa-hand-point-right"></i>
Per poter combina due icone e dunque creare una forma con un colore, si può sfruttare la potenza di SVG in Font Awesome.
Quindi al posto del precedente collegamento al file all.css inserisco sempre tra il tag head questo script:
<script defer src="fontawesome/js/all.js"></script>
E così è possibile inserire icone come questa:
<i class="fab fa-facebook-f" data-fa-transform="shrink-3.5 down-1.6 right-1.25" data-fa-mask="fas fa-circle" style="background:lightblue"></i>
Potete trovare la lista delle icone complete al seguente link: fontawesome.
Ecco un esempio di utilizzo di icone che ho realizzato a questo link: esempio di icone con Bootstrap.
In questa lezione abbiamo visto come utilizzare le Bootstrap icons ed in particolare Fontawesome e Glyphicons per inserire delle icone nelle nostre pagine web.
Si possono utilizzare altri font per le icone in Bootstrap, come ad esempio Octicons.
Link utili
Indice argomenti tutorial Bootstrap
1 – Introduzione a Bootstrap
2 – Creazione del primo template
3 – Come inserire una Navbar
4 – Personalizzare la posizione del menù
5 – Come utilizzare il grid system
6 – Bootstrap Container
7 – Inserire lo slideshow di immagini con Carousel
8 – Come utilizzare le Bootstrap images
da Cristina | Gen 18, 2020 | Bootstrap, Web
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 bianco.
btn-secondary crea un pulsante con sfondo grigio e testo bianco.
btn-success crea un pulsante con sfondo verde e testo bianco.
btn-info crea un pulsante con sfondo azzurro e testo bianco.
btn-warning crea un pulsante con sfondo arancione e testo nero.
btn-danger crea un pulsante con sfondo rosso e testo bianco.
btn-light crea un pulsante con sfondo grigio chiaro e testo nero.
btn-dark crea un pulsante con sfondo nero e testo bianco.
btn-link crea un pulsante con sfondo trasparente e testo blu.
Come si utilizzano
Le classi dei Bootstrap buttons si utilizzano con il tag button ma possono essere utilizzate anche con il tag input oppure anche il tag a a cui però deve essere associato l’attributo role=”button” in modo da essere interpretati bene anche dagli screen reader.
Eliminare il riempimento
Se si vuole rimuovere il contorno dai pulsanti si possono utilizzare le classi btn-outline-dark, btn-outline-warning, ecc…
Dimensioni del pulsante
Se si desidera un pulsante di dimensione minore o maggiore si può usare btn-lg oppure btn-sm.
Pulsanti disabilitati
Un pulsante può essere reso inattivo con l’attributo disabled.
Pulsanti estesi
Per estendere la larghezza di un pulsante per tutto il livello che lo contiene si usa btn-block.
Active
La classe active rende l’aspetto del pulsante come quando si fa clic su di esso.
Esempi d’uso dei buttons
Realizziamo adesso degli esempi mettendo in pratica quanto spiegato finora.
Al seguente link potete vedere la pagina di esempio che vi mostra i pulsanti: Bootstrap buttons.
Di seguito la parte di codice inerenti i pulsanti che ho creato che potete inserire nel punto della pagina desiderato.
<div class="container">
<div class="row">
<div class="col-sm-6">
<button type="button" class="btn btn-primary">Primario</button>
<button type="button" class="btn btn-secondary">Secondario</button>
<button type="button" class="btn btn-link">Link</button>
<button type="button" class="btn btn-light">Chiaro</button>
<button type="button" class="btn btn-dark">Scuro</button>
</div>
<div class="col-sm-6">
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-success">Successo</button>
<button type="button" class="btn btn-info">Informazioni</button>
<button type="button" class="btn btn-danger">Pericolo</button>
</div>
</div>
</div>
<hr>
<div class="container">
<h3>Applicati agli input</h3>
<input class="btn btn-warning" type="button" value="Input">
<input class="btn btn-warning" type="submit" value="Submit">
<input class="btn btn-warning" type="reset" value="Reset">
</div>
Provate ad applicare all’esempio proposto le altre classi che ho citato.
Questi sono solo dei semplici utilizzi dei Bootstrap buttons, più avanti vedremo altre applicazioni.
Link utili
Indice argomenti tutorial Bootstrap
1 – Introduzione a Bootstrap
2 – Creazione del primo template
3 – Come inserire una Navbar
4 – Personalizzare la posizione del menù
5 – Come utilizzare il grid system
6 – Bootstrap Container
7 – Inserire lo slideshow di immagini con Carousel
8 – Come utilizzare le Bootstrap images
da Cristina | Gen 17, 2020 | Bootstrap, Web
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 dispositivi.
Realizziamo dunque un esempio utilizzando il tag semantico figure e figcaption.
Inserite questo codice nella vostra pagina web, anche dopo il tag di chiusura nav. Chiaramente al posto di img/img-2.jpg inserite il nome della vostra immagine.
Esempio d’uso di Bootstrap images:
<div class="container pt-5">
<div class="row">
<div class="col-sm-6">
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-sm-6">
<figure class="figure">
<img src="img/img-2.jpg" class="figure-img img-fluid" alt="sfondo">
<figcaption class="figure-caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>
</div>
</div>
</div>
Nella riga, all’interno dell’apposito container, abbiamo inserito due colonne, infatti utilizziamo la classe col-sm-6. Nella prima colonna inseriamo il testo segnaposto utilizzato come testo di esempio, mentre nella seconda inseriamo l’immagine scelta.
Ricordiamo che con col-sm le colonne si visualizzano una accanto all’altra a partire dai dispositivi small, come descritto nell’articolo sul grid system: Bootstrap grid system.
All’immagine diamo le classi figure-img e img-fluid, quest’ultima come abbiamo detto prima garantisce una corretta visualizzazione su tutti i dispositivi.
Per inserire un’immagine con bordi arrotondati basta inserire sempre all’interno di img la classe rounded.
Se poi desideriamo racchiudere l’immagine in un cerchio utilizziamo invece la classe rounded-circle.
La classe img-thumbnail serve a dare un bordo di 1px.
Facciamo dunque un esempio d’uso di Bootstrap images:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Template Bootstrap</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark" style="background:#3f675e">
<div class="container p-2">
<a class="navbar-brand" href="#">Coding Creativo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Chi siamo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dove siamo</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Link utili
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Contatti</a>
<a class="dropdown-item" href="#">Form</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" >
<div class="carousel-item active" >
<img src="img/slide-1.jpg" class="d-block w-100" alt="coding" >
</div>
<div class="carousel-item">
<img src="img/slide-5.jpg" class="d-block w-100" alt="fare coding">
</div>
<div class="carousel-item">
<img src="img/slide-3.jpg" class="d-block w-100" alt="coding a scuola">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="container pt-5">
<div class="row">
<div class="col-sm">
<h2>HTML5<h2>
<p class="lead">HTML5 è un linguaggio che consente di creare pagine web</p>
</div>
<div class="col-sm">
<h2>CSS3<h2>
<p class="lead">I CSS3 consentono di dare uno stile ad una pagina web</p>
</div>
<div class="col-sm">
<h2>Bootstrap<h2>
<p class="lead">Bootstrap è un framework utilizzato per creare siti web responsive con facilità</p>
</div>
</div>
</div>
<div class="container pt-5">
<div class="row">
<div class="col-sm-6">
<figure class="figure">
<img src="img/img-1.jpg" class="figure-img img-fluid rounded" alt="immagine di sfondo">
<figcaption class="figure-caption">Titolo immagine</figcaption>
</figure>
</div>
<div class="col-sm-6">
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="container pt-5">
<div class="row">
<div class="col-sm-6">
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-sm-6">
<figure class="figure">
<img src="img/img-2.jpg" class="figure-img img-fluid img-thumbnail" alt="sfondo">
<figcaption class="figure-caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>
</div>
</div>
</div>
<div class="container pt-5">
<div class="row">
<div class="col-sm-3">
<figure class="figure">
<img src="img/farfalla.jpg" class="figure-img img-fluid rounded-circle" alt="immagine di sfondo">
<figcaption class="figure-caption">Descrizione dell'immgagine, si può inserire un testo descrittivo o un titolo in questo punto.</figcaption>
</figure>
</div>
<div class="col-sm-3">
<figure class="figure">
<img src="img/img2.jpg" class="figure-img img-fluid rounded-circle" alt="sfondo">
<figcaption class="figure-caption">Descrizione dell'immgagine, si può inserire un testo descrittivo o un titolo in questo punto.</figcaption>
</figure>
</div>
<div class="col-sm-3">
<figure class="figure">
<img src="img/img3.jpg" class="figure-img img-fluid rounded-circle" alt="sfondo">
<figcaption class="figure-caption">Descrizione dell'immgagine, si può inserire un testo descrittivo o un titolo in questo punto.</figcaption>
</figure>
</div>
<div class="col-sm-3">
<figure class="figure">
<img src="img/img4.jpg" class="figure-img img-fluid rounded-circle" alt="sfondo">
<figcaption class="figure-caption">Descrizione dell'immgagine, si può inserire un testo descrittivo o un titolo in questo punto.</figcaption>
</figure>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Potete provare l’esempio completo al seguente link: esempio Bootstrap images.
Nel vostro browser visualizzerete una serie di immagini distribuite su colonne che si adattano in maniera automatica a tutti i dispositivi. Provate dunque la pagina nelle diverse risoluzioni.
Nelle prossime lezioni parleremo ancora di come gestire le immagini in Bootstrap e di come inserire degli effetti.
Link utili
Indice argomenti tutorial Bootstrap
1 – Introduzione a Bootstrap
2 – Creazione del primo template
3 – Come inserire una Navbar
4 – Personalizzare la posizione del menù
5 – Come utilizzare il grid system
6 – Bootstrap Container
7 – Inserire lo slideshow di immagini con Carousel
8 – Come utilizzare le Bootstrap images
da Cristina | Gen 14, 2020 | Bootstrap, Web
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 nav.
Io ad esempio ho inserito questo codice:
<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" >
<div class="carousel-item active" >
<img src="img/slide-1.jpg" class="d-block w-100" alt="coding" >
</div>
<div class="carousel-item">
<img src="img/slide-5.jpg" class="d-block w-100" alt="fare coding">
</div>
<div class="carousel-item">
<img src="img/slide-3.jpg" class="d-block w-100" alt="coding a scuola">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Scegliete delle immagini della stessa dimensione, io ad esempio ho scelto 3 immagini di 1600*800px e le ho inserite nella cartella img.
Provate la pagina in un browser, otterrete un risultato come quello visibile in questa pagina di esempio: esempio Bootstrap Carousel.
Potete scorrere le immagini dalle frecce laterali o dalla barra in basso.
Carousel è responsive, dunque la visualizzazione delle immagini si adatta a qualsiasi dispositivo.
Allego tutto il codice che è servito per realizzare l’esempio per chi lo volesse utilizzare:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Template Bootstrap</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark" style="background:#3f675e">
<div class="container p-2">
<a class="navbar-brand" href="#">Coding Creativo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Chi siamo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dove siamo</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Link utili
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Contatti</a>
<a class="dropdown-item" href="#">Form</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" >
<div class="carousel-item active" >
<img src="img/slide-1.jpg" class="d-block w-100" alt="coding" >
</div>
<div class="carousel-item">
<img src="img/slide-5.jpg" class="d-block w-100" alt="fare coding">
</div>
<div class="carousel-item">
<img src="img/slide-3.jpg" class="d-block w-100" alt="coding a scuola">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="container pt-5">
<div class="row">
<div class="col-sm">
<h2>HTML5<h2>
<p class="lead">HTML5 è un linguaggio che consente di creare pagine web</p>
</div>
<div class="col-sm">
<h2>CSS3<h2>
<p class="lead">I CSS3 consentono di dare uno stile ad una pagina web</p>
</div>
<div class="col-sm">
<h2>Bootstrap<h2>
<p class="lead">Bootstrap è un framework utilizzato per creare siti web responsive con facilità</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Carousel
Analizziamo adesso il codice che abbiamo utilizzato per la creazione del carousel.
L’utilizzo di carousel richiede un id per far funzionare correttamente i controlli, nel nostro esempio l’id è carouselExampleIndicators.
Nel div abbiamo anche specificato le classi:
carousel prende le specifiche dello slideshow;
slide aggiunge una transizione CSS e un effetto di animazione;
carousel-fade aggiunge un effetto a scomparsa tra un’immagine e l’altra.
Dopo il div principale abbiamo inserito un elenco ordinato con i punti elenco che rappresentano gli indicatori, ovvero i punti che si trovano nella parte inferiore di ciascuna immagine. Cliccando su questi punti è possibile scorrere le immagini.
<ol class="carousel-indicators">
A questo elenco abbiamo assegnato la classe carousel-indicator. Ogni punto elenco ha un attributo data-target che punta all’id del carousel. Possiede anche un attributo data-slice-to che specifica su quale immagine andare quando si fa clic sul punto.
Dopo si crea un livello che contiene le nostre immagini a cui si assegna la classe carousel-inner mentre al livello che contiene ciascuna immagine viene assegnata la classe carousel-item.
Per essere visibile il carousel dobbiamo aggiungere la classe active a una delle immagini.
Infine abbiamo le frecce destra e sinistra per scorrere le immagini. Si crea un collegamento ipertestuale a cui si assegna la classe carousel-control-prev per andare indietro nelle slide, e carousel-control-next per andare avanti.
Le classi carousel-control-prev-icon e carousel-control-next-icon fanno visualizzare le frecce per scorrere le immagini.
Personalizzate il vostro carousel come meglio credete, i più esperti possono intervenire anche sul foglio di stile.
Link utili
Indice argomenti tutorial Bootstrap
1 – Introduzione a Bootstrap
2 – Creazione del primo template
3 – Come inserire una Navbar
4 – Personalizzare la posizione del menù
5 – Come utilizzare il grid system
6 – Bootstrap Container
7 – Inserire lo slideshow di immagini con Carousel
8 – Come utilizzare le Bootstrap images
da Cristina | Gen 12, 2020 | Bootstrap, Web
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 finestra a prescindere dalla risoluzione.
Container
La classe container restituisce un contenitore a larghezza fissa.
Questa larghezza cambia a seconda delle dimensioni dello schermo.
Nella scorsa lezione abbiamo parlato di dispositivi con risoluzione extra small, small, medium, large ed extra large.
Dunque la max-width dei container nei dispositivi extra small è comunque del 100%.
Mentre la max-width dei container nei dispositivi small è di 540px.
Invece la max-width dei container nei dispositivi medium è di 720px.
La max-width dei container nei dispositivi large è di 960px.
La max-width dei container nei dispositivi extra large è di 1140px.
Container Responsive
Possiamo anche utilizzare le seguenti classi:
La classe container-sm visualizza il contenuto all’interno del container al 100% sui dispositivi extra-small per gli altri dispositivi permangono le stesse proprietà elencate sopra.
Invece la classe container-md visualizza il contenuto all’interno del container al 100% sui dispositivi small e inferiori mentre per gli altri dispositivi permangono le stesse proprietà elencate sopra.
La classe container-lg visualizza il contenuto all’interno del container al 100% sui dispositivi medium e inferiori mentre per gli altri dispositivi permangono le stesse proprietà elencate sopra.
Infine la classe container-xl visualizza il contenuto all’interno del container al 100% sui dispositivi large e inferiori mentre sui dispositivi extra-large permane la stessa proprietà elencata sopra.
Provate ad inserire questi contenitori con le 4 classi diverse e con il bordo in modo da capire il loro comportamento.
Dopo provate ad allargare e restringere la finestra del browser.
<div class="container-md border">
<div class="row">
<div class="col-sm">
<h2>HTML5<h2>
<p class="lead">HTML5 è un linguaggio che consente di creare pagine web</p>
</div>
<div class="col-sm">
<h2>CSS3<h2>
<p class="lead">I CSS3 consentono di dare uno stile ad una pagina web</p>
</div>
<div class="col-sm">
<h2>Bootstrap<h2>
<p class="lead">Bootstrap è un framework utilizzato per creare siti web responsive con facilità</p>
</div>
</div>
</div>
<div class="container-lg border">
<div class="row">
<div class="col-sm">
<h2>HTML5<h2>
<p class="lead">HTML5 è un linguaggio che consente di creare pagine web</p>
</div>
<div class="col-sm">
<h2>CSS3<h2>
<p class="lead">I CSS3 consentono di dare uno stile ad una pagina web</p>
</div>
<div class="col-sm">
<h2>Bootstrap<h2>
<p class="lead">Bootstrap è un framework utilizzato per creare siti web responsive con facilità</p>
</div>
</div>
</div>
<div class="container-xl border">
<div class="row">
<div class="col-sm">
<h2>HTML5<h2>
<p class="lead">HTML5 è un linguaggio che consente di creare pagine web</p>
</div>
<div class="col-sm">
<h2>CSS3<h2>
<p class="lead">I CSS3 consentono di dare uno stile ad una pagina web</p>
</div>
<div class="col-sm">
<h2>Bootstrap<h2>
<p class="lead">Bootstrap è un framework utilizzato per creare siti web responsive con facilità</p>
</div>
</div>
</div>
Esempio
Facciamo un esempio pratico realizzando una semplice pagina web di esempio.
Notate la disposizione del logo testuale e del menù rispetto alla dimensione della pagina nelle varie risoluzioni.
<!doctype html>
<html lang="it">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Template Bootstrap</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-secondary ">
<div class="container">
<a class="navbar-brand" href="#">Coding Creativo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Chi siamo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dove siamo</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Link utili
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Contatti</a>
<a class="dropdown-item" href="#">Form</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm">
<h2>HTML5<h2>
<p class="lead">HTML5 è un linguaggio che consente di creare pagine web</p>
</div>
<div class="col-sm">
<h2>CSS3<h2>
<p class="lead">I CSS3 consentono di dare uno stile ad una pagina web</p>
</div>
<div class="col-sm">
<h2>Bootstrap<h2>
<p class="lead">Bootstrap è un framework utilizzato per creare siti web responsive con facilità</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Padding del container
Di default il padding del container impostato è di 15px sia a destra sia a sinistra, senza padding superiore o inferiore.
Per migliorare la leggibilità del testo allora aggiungiamo un padding superiore ed inferiore di 0.5rem (p-2) al primo container mentre al secondo container aggiungiamo un padding superiore di 3rem (pt-5), in questo modo:
<div class="container p-2">
....
<div class="container pt-5">
Ricordiamo che rem è un’unità di misura relativa che ha il vantaggio di riferirsi alla misura del root e quindi di rendere proporzionali le dimensioni di font, padding e di tanti altri elementi.
In base al valore impostato nel root di Bootstrap 1rem equivale a 16px e così via.
Link utili
Indice argomenti tutorial Bootstrap
1 – Introduzione a Bootstrap
2 – Creazione del primo template
3 – Come inserire una Navbar
4 – Personalizzare la posizione del menù
5 – Come utilizzare il grid system
6 – Bootstrap Container
7 – Inserire lo slideshow di immagini
8 – Come utilizzare le Bootstrap images
