Bootstrap list

Bootstrap list

Bootstrap list – In questa lezione impareremo ad utilizzare le liste con Bootstrap, ovvero ad utilizzare gli elenchi puntati e numerati.

Bootstrap list – Esempio

Realizziamo un primo esempio di elenco non ordinato con il tag ul (unorderd list) ed il tag li per le singole voci.

Al tag ul assegniamo poi la classe di Bootstrap list-group, mentre ad li assegniamo la classe list-group-item.

Realizziamo dunque questo esempio:

 <ul class="list-group">
  <li class="list-group-item">HTML</li>
  <li class="list-group-item">CSS</li>
  <li class="list-group-item">Bootstrap</li>
 <li class="list-group-item">JavaScript</li>
</ul> 

Il risultato ottenuto sarà quindi questo:

  • HTML
  • CSS
  • Bootstrap
  • JavaScript

Si può applicare anche la classe active per evidenziare una determinata voce.

 <ul class="list-group">
  <li class="list-group-item active">HTML</li>
  <li class="list-group-item">CSS</li>
  <li class="list-group-item">Bootstrap</li>
 <li class="list-group-item">JavaScript</li>
</ul> 

Si avrà dunque questo risultato:

  • HTML
  • CSS
  • Bootstrap
  • JavaScript

Rimuovere il bordo

Possiamo anche escludere il bordo utilizzando la classe list-group-flush.


Bootstrap list – Secondo esempio

Realizziamo un secondo esempio utilizzando i collegamenti ipertestuali.

Ma attenzione utilizzeremo div al posto di ul e a al posto di li.

Applichiamo le stesse classi di prima:

 <div class="list-group">
  <a href="#" class="list-group-item">HTML5</a>
  <a href="#" class="list-group-item">CSS3</a>
  <a href="#" class="list-group-item">Bootstrap</a>
</div>

Otterremo dunque questo risultato:

Per disabilitare un link possiamo utilizzare la classe disabled.

 <div class="list-group">
  <a href="#" class="list-group-item">HTML5</a>
  <a href="#" class="list-group-item">CSS3</a>
  <a href="#" class="list-group-item disabled">Bootstrap</a>
</div>

L’effetto ottenuto sarà dunque questo:

Il terzo link appare disabilitato.

Bootstrap list – Terzo esempio

In questo esempio realizzeremo una lista disposta in orizzontale, utilizzando la classe list-group-horizontal.

Utilizzate dunque questo codice:

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">HTML</li>
  <li class="list-group-item">CSS</li>
  <li class="list-group-item">Bootstrap</li>
 <li class="list-group-item">JavaScript</li>
</ul> 

Otterremo una lista come questa:

Bootstrap list horizontal

Colorare le voci di un elenco

Al tag ul e al tag a è possibile anche applicare queste classi:

list-group-item-primary, list-group-item-secondary, list-group-item-success, list-group-item-info, list-group-item-warning, list-group-item-danger, list-group-item-dark e list-group-item-light per colorare lo sfondo della lista.

Provate dunque ad applicarli nei vostri esempi.


Badge

Si possono aggiungere dei badge ad esempio per evidenziare i conteggi o delle attività utilizzando la classe badge con il tag a oppure con il tag span.

 <ul class="list-group">
  <li class="list-group-item">
    HTML5 <a href="#" class="badge"> 5 ARTICOLI</a>
  </li>
  <li class="list-group-item">
    CSS3 <span class="badge">10 ARTICOLI</span>
  </li>
</ul>

Anche qui possiamo aggiungere gli effetti badge-primary, badge-secondary, badge-danger, badge-warning, badge-success, badge-info, badge-dark, ecc.

Bootstrap list con JavaScript

Si possono creare anche degli effetti dinamici utilizzando JavaScript.

Quindi abbiate cura di inserire il collegamento:

<script src="js/bootstrap.min.js"></script>

Dopo nella vostra pagina inserite il seguente codice:

<div class="container pt-5">
	<div class="row">
	    <div class="col-2">
		<div class="list-group" id="list-tab" role="tablist">
		     <a class="list-group-item list-group-item-action active" id="list-html-list" data-toggle="list" href="#list-html" role="tab" aria-controls="home">HTML5</a>
		<a class="list-group-item list-group-item-action" id="list-css-list" data-toggle="list" href="#list-css" role="tab" aria-controls="profile">CSS3</a>
		<a class="list-group-item list-group-item-action" id="list-bs-list" data-toggle="list" href="#list-bs" role="tab" aria-controls="messages">Bootstrap</a>
		</div>
	  </div>
          <div class="col-10">
		<div class="tab-content" id="nav-tabContent">
		   <div class="tab-pane fade show active" id="list-html" role="tabpanel" aria-labelledby="list-html-list">HTML5 è un linguaggio che consente di creare pagine web</div>
	           <div class="tab-pane fade" id="list-css" role="tabpanel" aria-labelledby="list-css-list">I CSS3 consentono di dare uno stile ad una pagina web</div>
		   <div class="tab-pane fade" id="list-bs" role="tabpanel" aria-labelledby="list-bs-list">Bootstrap è un framework utilizzato per creare siti web responsive con facilità</div>
		   </div>
		</div>
	</div>
</div>

Otterrete un effetto come quello visibile in questa pagina: liste 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

9 – Inserire i buttons in una pagina web

10 – Utilizzare le icone in Bootstrap 4

11 – Le tabelle in Bootstrap

12 – Come utilizzare i messaggi di avviso

Bootstrap text

Bootstrap text

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 posso utilizzare text-left per allineare tutto il testo a sinistra, come nell’esempio sotto:

Paragrafo allineato a sinistra. Questa classe permette di effettuare un allineamento a sinistra e quindi a destra il testo non sarà perfettamente allineato. Questa scritta di esempio è stata inserita a scopo dimostrativo per mostrare l’effetto della classe sul paragrafo.


Oppure posso utilizzare text-right per allineare tutto il testo a destra, come in questo esempio:

Esempio di paragrafo allineato a destra. Questa classe permette di effettuare un allineamento a destra e quindi a sinitra il testo non sarà perfettamente allineato. Questa scritta di esempio è stata inserita a scopo dimostrativo per mostrare l’effetto della classe sul paragrafo.


L’ultima opzione è rendere il testo giustificato con text-justify, come nell’esempio sotto:

Esempio di paragrafo allineato giustificato. Questa classe permette di effettuare un allineamento a sinistra e a destra. Questa scritta di esempio è stata inserita a scopo dimostrativo per mostrare l’effetto della classe sul paragrafo.


Inoltre si può decidere di applicare l’allineamento anche solo per alcuni dispositivi, quindi ad esempio se utilizziamo text-md-left allineiamo il testo solo per i dispositivi di dimensioni medie e superiori. Cioè a partire dalla dimensione in pixel maggiore o uguale di 768px, come ad esempio i tablet, si avrà un allineamento a sinistra.


Bootstrap text – Grassetto e corsivo

In Bootstrap è semplicissimo applicare il grassetto, infatti basta indicare font-weight-bold, font-weight-light oppure font-weight-normal per ottenere l’effetto desiderato.

Mentre con font-italic applichiamo il corsivo.


Bootstrap text – Testo in maiuscolo

Il testo può essere anche trasformato in maiuscolo, in minuscolo o con le iniziali maiuscole.

Quindi se ad esempio utilizziamo il seguente codice:

<p class="text-uppercase">Blog sul coding</p>
<p class="text-lowercase">CODING CREATIVO</p>
<p class="text-capitalize">Imparare ad usare Bootstrap</p>

Otterremo dunque questo risultato:

Blog sul coding

CODING CREATIVO

Imparare ad usare Bootstrap

Conclusioni

In questa lezione ‘Bootstrap text‘ abbiamo imparato ad allineare il testo, ad utilizzare il grassetto ed il corsivo, a trasformare un testo in maiuscolo o in minuscolo in maniera molto semplice.

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

Bootstrap colors

Bootstrap colors

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, text-white e text-light.

In questa pagina esempi Bootstrap colors, troverete alcuni esempi applicati al testo e ai collegamenti ipertestuali che ho realizzato utilizzato il codice sotto.

<p class="text-primary">text-primary - Esempio di colore del testo</p>
<p class="text-secondary">text-secondary - Esempio di colore del testo</p>
<p class="text-danger">text-danger - Esempio di colore del testo</p>
<p class="text-warning">text-warning - Esempio di colore del testo</p>
<p class="text-success">text-success - Esempio di colore del testo</p>
<p class="text-info">text-info - Esempio di colore del testo</p>
<p class="text-dark">text-dark - Esempio di colore del testo</p>
<p class="text-muted">text-muted - Esempio di colore del testo</p>
<p><a href="#" class="text-success">Esempio di collegamento con text-success</a></p>
<p><a href="#" class="text-danger">Esempio di collegamento con text-danger</a></p>

Potete inserire la formattazione descritta nelle vostre pagine web nel punto desiderato.

Si può applicare anche un’opacità del 50% per il bianco e nero. Quindi ad esempio posso utilizzare le classi .text-black-50 e .text-white-50.

Bootstrap colors per lo sfondo del paragrafo

Per il colore di sfondo di un paragrafo si possono usare queste classi:

bg-primary, bg-secondary, bg-info, bg-success, bg-warning, bg-danger, bg-dark, bg-light, bg-transparent e bg-white.

Queste classi possono essere applicate al tag p e al tag div.

Potete vedere degli esempi sempre nella stessa pagina che ho linkato prima, dove ho utilizzato il codice, indicato in basso, per realizzare i paragrafi che avete visto.

<p class="bg-primary p-2 mb-2">bg-primary per lo sfondo</p>
<p class="bg-primary  text-white p-2 mb-2">bg-primary bg-primary per lo sfondo e text-white per il testo</p>
<p class="bg-secondary text-white p-2 mb-2">bg-secondary per lo sfondo e text-white per il testo </p>
<p class="bg-success text-light p-2 mb-2">bg-success per lo sfondo e text-light per il testo</p>
<p class="bg-info text-muted p-2 mb-2">bg-info per lo sfondo e text-muted per il testo</p>
<p class="bg-warning text-white p-2 mb-2">bg-warning per lo sfondo e text-white per il testo</p>
<p class="bg-danger text-white-50 p-2 mb-2">bg-danger per lo sfondo e text-white-50 per il testo</p>
<p class="bg-dark text-white p-2 mb-2">bg-dark per lo sfondo e text-white per il testo</p>
<p class="bg-light text-dark p-2 mb-2">bg-light per lo sfondo e text-dark per il testo </p>

Conclusioni

In questo breve articolo abbiamo visto come utilizzare le classi necessarie per inserire i colori del testo, del paragrafo e dei collegamenti con Bootstrap.

Provate voi stessi a creare dei paragrafi o del testo e a personalizzarli come meglio credete con i Bootstrap colors.

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

9 – Inserire i buttons in una pagina web

10 – Utilizzare le icone in Bootstrap 4

11 – Le tabelle in Bootstrap

12 – Come utilizzare i messaggi di avviso

Bootstrap alerts

Bootstrap alerts

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 sfondo verde e testo nero

alert-warning crea un riquadro con i bordi arrotondati con sfondo arancione e testo nero

alert-danger crea un riquadro con i bordi arrotondati con sfondo rosso e testo nero

alert-primary crea un riquadro con i bordi arrotondati con sfondo azzurro e testo nero

alert-secondary crea un riquadro con i bordi arrotondati con sfondo grigio chiaro e testo nero

alert-light crea un riquadro con i bordi arrotondati sfondo trasparente e testo nero

alert-dark crea un riquadro con i bordi arrotondati con sfondo grigio scuro e testo nero

Quindi provate ad inserire nel punto desiderato il seguente codice:

<div class="alert alert-success">Successo!</div>
<div class="alert alert-warning">Warning!</div>
<div class="alert alert-danger">Danger!</div>
<div class="alert alert-info">Danger!</div>
<div class="alert alert-primary">Primary!</div>
<div class="alert alert-secondary">Secondary!</div>
<div class="alert alert-light">Trasparente</div>
<div class="alert alert-dark">Sfondo scuro!</div>

In output visualizzerete i vari alert con le diverse formattazioni.

Chiusura di un alert

Si può anche chiudere l’alert cliccando sulla x. Basta inserire un pulsante che provoca l’effetto di chiusura della finestra.

Bisogna però aggiungere prima della chiusura di head il collegamento a jquery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

E dopo creare un alert aggiungendo un pulsante con l’attributo data-dismiss posto uguale ad alert ad esempio in questo modo:

<div class="alert alert-success">
    <strong>Successo!</strong>
    <button type="button" class="close" data-dismiss="alert">&times</button>
</div>

Collegamento ipertestuale

Si possono inserire i collegamenti all’interno degli alert con la classe alert-link.

<div class="alert alert-success alert-dismissible fade show">
   <strong>Successo!</strong>
   <button type="button" class="close" data-dismiss="alert">&times;</button>
   <a href="#" class="alert-link">Collegamento</a>
</div>
<div class="alert alert-warning alert-dismissible fade show">
    Warning!
   <button type="button" class="close" data-dismiss="alert">&times;</button></div>
<div class="alert alert-danger alert-dismissible fade show">
   Danger!
   <button type="button" class="close" data-dismiss="alert">&times;</button></div>
<div class="alert alert-info alert-dismissible fade show">
  Danger!
  <button type="button" class="close" data-dismiss="alert">&times;</button></div>
<div class="alert alert-primary alert-dismissible fade show">
  Primary!
  <button type="button" class="close" data-dismiss="alert">&times;</button></div>
<div class="alert alert-secondary alert-dismissible fade show">
  Secondary!
  <button type="button" class="close" data-dismiss="alert">&times;</button></div>
<div class="alert alert-light alert-dismissible fade show">
  Trasparente!
  <button type="button" class="close" data-dismiss="alert">&times;</button></div>
<div class="alert alert-dark alert-dismissible fade show">
   Sfondo scuro!
   <button type="button" class="close" data-dismiss="alert">&times;</button></div>
			

Potete vedere un esempio d’uso degli alert alla seguente pagina web: esempio d’uso degli alert con Bootstrap.

In questa lezione abbiamo affrontato i Bootstrap alert, nella prossima lezione vedremo come inserire una progress bar.

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

Bootstrap table

Bootstrap table

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

Bootstrap icons

Bootstrap icons

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