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.
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.
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:
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.
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:
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.
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:
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.
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.
