Bootstrap è una libreria di stili grafici, inizialmente sviluppata per il sito di twitter, ma oggi è diventata libera ed è sicuramente una delle librerie più usate al mondo, secondo alcuni rilevamenti viene usata da più del 1% dei siti di tutto il mondo, cifra che in valore assoluto è un numero incredibilmente alto, successo dovuto anche al supporto di moltissimi sviluppatori in tutto il mondo, dalla semplicità dell'utilizzo e dell'uscita della versione 3 di CSS e del framework che ha ampliato le funzionalità e le personalizzazioni che verranno mostrate in questi articoli. Pur essendo un framework così popolare non è detto che debba essere una bibbia da seguire alla lettera e che bisogna necessariamente usare questa libreria in tutti i siti, infatti i puristi del codice non amano particolarmente l'uso di queste librerie e usare bootstrap può limitare la creatività di un web-designer che impone limiti e regole ben definite anche se con la versione 3 e la versione 4 la libertà è molto aumentata, infatti in inglese il termine boot ha il significato di "punto di partenza": con bootstrap si dovrebbe avere un punto di partenza per la creazione di un sito e non la soluzione finale del web-designer.

In questa categoria verranno compresi tutti gli articoli riguardarti il framework dalle basi della libreria grafica fino ad alcuni esempi pratici di personalizzazioni grafiche con riferimenti al sito ufficiale dove comunque è possibile trovare tutte le informazioni del framework, la personalizzazione del framework è un aspetto cruciale: le maggiori critiche rivolte a Bootstrap e agli altri framework simili della stessa categoria, è che i siti sviluppati con questi componenti sembrano tutti uguali e che "si vede subito che è fatto con Bootstrap", lo scopo delle personalizzazioni è proprio rendere unico un sito se necessario ovviamente con la spesa di tempo e risorse necessarie, basta guardare il sito Bootstrap-Expo per vedere come e quanto è possibile realizzare con queste librerie. La principale novità della versione 3 è senza dubbio rappresentata dal fatto che ora il framework è concepito come uno strumento adatto alla realizzazione di siti responsivi, è così possibile realizzare siti che di default saranno adattabili ad una gamma ampia di device, dagli smartphone a crescere fino ai desktop ad altissima risoluzione: il componente che ha subito le modifiche più radicali è la griglia, infatti il layout è di default fluido, con larghezze espresse in percentuale, e pertanto maggiormente adattabile a differenti risoluzioni di schermo. La versione 4 invece rivede praticamente tutti le classi grafiche per uno standard più semplice anche se questo ha voluto voler riscrivere tutti i siti.

Per quanto riguarda il supporto dei vari browser bisogna tenere a mente che con queste ultime release di Bootstrap, viene abbandonato Microsoft Internet Explorer 7 e Firefox 3.6, mentre ufficialmente il framework supporta le ultime versioni di Chrome, Safari, Firefox, Opera e Internet Explorer, per quanto riguarda Internet Explorer 8 il supporto pieno è garantito solo adoperando lo script Respond.js in grado di aggiungere a quel browser la capacità di gestire le media queries.

Conviene sempre avere a portata di mano i link alla documentazione ufficiale, in quanto è inutile imparare a memoria ogni singola classe e ogni singola caratteristica del framework ma conviene sempre avere a portata l'elenco completo così da perdere meno tempo e usare solo i componenti che servono. I link principali per le tre componenti base del framework sono:

• La pagina della documentazione ufficiale con i link alle varie sezioni
• Il sito della W3C
• Pagina con molti esempi grafici da cui si può prendere spunto

Molto utili sono sempre i vari esempi presenti che sono quasi sempre completi e comprendono anche una esempio grafico del risultato, di fatto, la documentazione è anche una collezione di snippet di codice HTML pronti per l’uso e da cui iniziare per comporre la nostra pagina, consiglio a tutti di leggersi un po' queste pagine se non si conosce nulla di bootstrap per avere una panoramica globale del framework.

Scaricando la vesione "compilata" del framework dal sito ufficiale troveremo due cartelle: la prima comprende i css, comprese le versioni nel formato .min ottimizzate per la pubblicazione nei siti internet ma non è più compresa la parte dei temi che è possibile trovare separata, la seconda cartella js contiene il javascript di bootstrap e il suo corrispettivo .min ottimizzato; dal download, rispetto alle versioni precedenti, sono stati tolti i font Glyphicons nei suoi diversi formati non più usati nella versione 4. Per utilizzare correttamente il framework Bootstrap si deve lavorare usando una definizione specifica dei componenti HTML in una struttura di markup, cioè ad ogni caratteristica del framework corrisponderà una eventuale personalizzazione ed ovviamente l'elemento del sito con quella caratteristica, cercando di lavorare il meno possibile sulla parte delle personalizzazioni e anche delegando al framework il più possibile scrivendo meno codice possibile nel sito. Partendo dalla versione base scaricabile dal sito ufficiale e dalla documentazione di Bootstrap si può costruire una prima pagina di esempio HTML come template di base:

<!doctype html>
<html lang="en">
 <head>
  <meta name="author" content="">
  <title>Template with Bootstrap 4</title>
  <link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script>
  <script src="https://getbootstrap.com/docs/4.0/assets/js/vendor/popper.min.js"></script>
  <script src="https://getbootstrap.com/docs/4.0/dist/js/bootstrap.min.js"></script>
 </head>
 <body>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
   <a class="navbar-brand" href="#">Navbar</a>
   <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
     <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="#">Link</a>
     </li>
    </ul>
   </div>
  </nav>
  <main role="main" class="container" style="padding: 3rem 1.5rem; ">
   <div class="">
    <h1>Bootstrap 4 template</h1>
    <p class="lead">Questo è un esempio di pagina vuota con bootstrap 4</p>
   </div>
  </main><!-- /.container -->
 </body>
</html>

Con questo esempio possiamo già lavorare ricordandoci sempre che le versioni più vecchie di Microsoft Internet Explorer possono avere molti problemi di visualizzazione con Bootstrap perché non supportano le versioni 3 di CSS3 e 5 di HTML, nella documentazione ufficiale del framework potete trovare guide e suggerimenti per risolvere i vari problemi di compatibilità con i vecchi browser.

Con Reboot su bootstrap si intendono quelle classi generiche di base che bootstrap imposta per creare il tema base con eleganza, consistenza e una semplice baseline (almeno quanto dice il sito ufficiale). Queste classi sono raggruppate come Reboot perché "ridefiniscono" le proprietà di default dei tag HTML, anche perché alcuni browser interpretano diersamente alcuni tag base, come il TABLE e la proprietà "margin-top" è evitata per evitare risultati grafici indesiderati.

Nei tag HTML e BODY sono definiti il box-sizing e la grandezza del font a 16px e 1rem per poi scalare il testo nelle media queries per l'approccio responsivo, come come sono definiti font-family, line-height e text-align. Lo sfondo del body "background-color" è definito a #fff.

I font di default (Helvetica Neue, Helvetica e Arial) sono rimossi e sostituiti da un "native font stack" per l'ottimizzazione per i device e sistemi operativi, l'elenco dei font è:

$font-family-sans-serif:
// Safari for OS X and iOS (San Francisco)
-apple-system,
// Chrome < 56 for OS X (San Francisco)
BlinkMacSystemFont,
// Windows
"Segoe UI",
// Android
"Roboto",
// Basic web fallback
"Helvetica Neue", Arial, sans-serif,
// Emoji fonts
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

A molti altri tag sono rimossi i margini superiori e ridefiniti i margini inferiori:

• tag H1,..,H6 0.5rem
• tag P : 1rem
• UL e OL : 1rem.

Alle tabelle costruite con TABLE sono collassati i bordi (cellspacing e cellpadding) e viene uniformato l'allineamento del testo nelle celle, ulteriori caratteristiche sono modificate con la classe ".table".

Nei Form molti elementi sono cambiati: i tag FIELDSET e LEGEND non hanno bordi, margini e può essere usato nei gruppi di input senza limitazioni di visualizzazioni, il tag LABEL ha la proprietà inline-block con dei margini applicati. I tag di inserimento dati INPUT, SELECT, TEXTAREA e BUTTON sono più normalizzati, senza margini e con la proprietà "line-height: inherit". Il tag TEXTAREA modificato per il ridimensionamento per evitare che il layout venga compromesso.

Altri tag come ADDRESS, SUMMARY, ABBR e BLOCKQUOTE sono modificati per essere graficamente simile al resto dei tag.

Come ultima caratteristica, sfruttando le potenzialità di HTML5, è stata introdotta una proprietà "hidden" , applicabile a (quasi) tutti i tag per nascondere un elemento, per esempio

<input type="text" hidden />
<p hidden>Test nascosto</p>

Ma questa proprietà è poco usata perché incompatibile con il comando jQuery $(..).show() e .hide();

Con la versione 4 di Bootstrap c'è stata una grandissima ristrutturazione delle classi di utilità per la visualizzazione e il posizionamento degli oggetti, rispetto alle versioni precedenti sono state eliminate alcune abbreviazioni generiche e sono definite solamente le caratteristiche definite come coppia di chiave-valore delle caratteristica: per esempio la classe hide è stata sostituita con d-none, dove d-none indica display:none e sono usate le stesse notazioni per i dispositivi come d-xl-none dove la regola del d-none è valida solo per i schermi molto larghi (xl), da notare che quando si ha una una classe specifica per una larghezza, la stessa caratteristica viene ereditata dai dispositivi più grandi se non specificato diversamente, cioè d-md-none viene usato anche dai dispositivi più grandi, per nascondere solo ai MD bisogna indicare anche la classe d-lg-block per dire che dai LG e più grandi l'elemento deve essere visualizzato.

Le nuove e principali classi della versione quattro per la visualizzazione e la posizione degli oggetti sono:

.d-none: Nascosto sempre
.d-block: Visibile sempre 
.position-static
.position-relative
.position-absolute
.position-fixed
.position-sticky
.float-left
.float-right
.float-none
.float-sm-left
.d-print-none
.d-print-inline
.d-print-inline-block
.d-print-block
.d-print-table

.d-none  .d-sm-block .d-md-none  .d-lg-block .d-xl-none

Per la gestione delle dimensioni, il framework mette a disposizione alcune classi molto utili infatti le classi sono create con Sass nella mappa variables.scss, compresi i valori di default di larghezze e altezze percentuali, per esempio le larghezze sono definite con lo standard w-dimensione:

w-25 p-3
w-50 p-3
w-75 p-3
w-100 p-3
w-auto p-3

mentre per le alezze è possibile usare

h-25
h-50
h-75
h-100 
h-auto

per esempio

<div style="height: 100px;">
  <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">75 percento</div>
 <div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Altezza automatica</div>
</div>

per semplificare la vita ai programmatori è stata messa a disposizione anche la classe:

mw-100

che sarebbe una abbreviazione del codice max-width: 100%; max-height: 100%; per poter porre un elemento al massimo delle dimensioni possibili.

Le classi abbreviate per impostare spaziature e margini sono molto semplici e gestite come le larghezze e le classi di visibilità viste nel precedente articolo.  Il nome delle classi è così formato, la prima lettera è:

• m - per definire il margine (margin)
• p - per definire il padding

La seconda lettera rappresenta

• t - per definire la proprietà top (superiore)
• b - per definire la proprietà bottom (inferiore)
• l - per definire la proprietà left (sinistra)
• r - per definire la proprietà right (destra)
• x - per definire la proprietà left e right (sinistra e destra)
• y - per definire la proprietà top e botto (superiore e inferiore)
• blank - per tutti i 4 elementi

Dopo il trattino è obbligatorio posizionare un numero che rappresenta:

• 0 - il valore zero
• 1 - rappresenta il valore della variabile $spacer * 0.25
• 2 - rappresenta il valore della variabile $spacer * 0.5
• 3 - rappresenta il valore della variabile $spacer
• 4 - rappresenta il valore della variabile $spacer * 1.5
• 5 - rappresenta il valore della variabile $spacer * 3

Dove il valore della variabile $spacer è definito nella mappa delle variabili Sass

Per esempio alcune classi e il loro significato:

.mt-0 { margin-top: 0 !important; }
.ml-1 { margin-left: ($spacer * .25) !important; }
.px-2 { padding-left: ($spacer * .5) !important; padding-right: ($spacer * .5) !important; }
.p-3 { padding: $spacer !important; }

In più in bootstrap è definita una ultetiore classe .mx-auto per poter centrare un blocco all'interno di un contenitore, con la particolarità che viene impostata la caratteristica display: block. Per esempio

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

Nella versione 4 di bootstrap, come nelle precedenti versioni, ci sono dei colori predefiniti ai quali sono dati dei nomi, i valori possono essere modificati con la creazione di un tema personalizzato tramite le variabili Sass come descritto nella sezione dedicata. I valori di default sono:

• primary : blu
• secondary : grigio
• success : verde
• danger : rosso
• warning : giallo
• info : azzurro
• light : bianco
• dark : nero
• body : nero
• muted grigio : chiaro
• white : bianco
• black-50 : grigio scuro
• white-50 : grigio molto chiaro

questa definizione di colori può essere usata nelle pagine per colorare del testo concatenando la classe "text-" con il nome del colore, per esempio con

<p class="text-success">success</p>
<p><a href="#" class="text-warning">Warning link</a></p>

oppure per impostare lo sfondo di un elemento usando "bg-" (abbreviazione di background)

<div class="p-3 mb-2 bg-danger text-white">Danger</div>
<div class="p-3 mb-2 bg-dark text-white">The dark side of moon</div>

oppure per impostare il colore di bordo di un elemento, per esempio

<span class="border border-primary"></span>
<span class="border-top border-secondary"></span>
<span class="border-right border-left border-success"></span>
<span class="border-right-0 border-danger"></span>

dove border indica di aggiungere un bordo concatenato eventualmente alla sola posizione del bordo oppure aggiungendo "-0" per aggiungere la pozione del bordo in tutti i lati tranne in quello specificato.

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-sm-left">Left aligned on sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned on sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned on sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned on sized XL (extra-large) or wider.</p>
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-italic">Italic text.</p>
<p class="text-monospace">This is in monospace</p>

• primary : blu
• secondary: grigio
• success: verde
• danger: rosso
• warning: giallo
• info: azzurro
• light: bianco
• dark: nero
• body: nero
• muted: grigio chiaro
• white: bianco

<div class="alert alert-primary" role="alert">Questo è un alert primario, tipicamente azzurro</div>
<div class="alert alert-secondary" role="alert">Questo è secondario, di default grigio/div>
<div class="alert alert-success" role="alert">Questo è il messaggio di successo, tipicamente verde</div>
<div class="alert alert-danger" role="alert">Questo è il messaggio di pericolo, tipicamente rosso</div>
<div class="alert alert-warning" role="alert">Questo messaggio di warning, tipicamente arancio</div>

<div class="alert alert-warning alert-dismissible fade show" role="nomealert">
  <strong>Stai attento!</strong> Cliccando sulla X questo messaggio si autodistruggerà
  <button type="button" class="close" data-dismiss="nomealert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

L'elemento più semplice da usare con bootstrap è il Containers, spesso tradotto in italiano con il termine contenitore, esistono due tipi diversi di contenitori: il primo a larghezza massima fissa relativa cioè la sua larghezza massima è determinata dalla larghezza del dispositivo attivo in quel momento e il secondo a larghezza fluida (dall'inglese fluid) cioè largo sempre il massimo possibile.

<div class = "container">
  elemento mai largo al 100% ma a larghezza relativa
</div>
<div class = "container-fluid">
  fluido, largo sempre il massimo
</Div>

in questo modo è possibile avere siti che si-auto adattano alla larghezza del dispositivo usato senza dover eseguire controlli ulteriori ma delegando bootstrap a gestire larghezze.

Per la gestione dei breakpoints nei siti responsivi, esistono delle media-queries di default per la gestione delle larghezze, le queries esistenti su bootstrap sono simili a:

@media (min-width: 576px) { ... }// Piccoli dispositivi come smartphone (da 576px )
@media (min-width: 768px) { ... }// Dispositivi medi come i tablet (da 768px )
@media (min-width: 992px) { ... }// Dispositivi con monitor piccoli (da 992px)
@media (min-width: 1200px) { ... }// Dispositivi con monitor larghi (da 1200px)

Allo stesso modo è possibile usare Sass per creare stili personalizzati, per esempio:

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

E allo stesso modo è possibile creare media-queries personalizzate

@media (min-width: 768px) and (max-width: 1199.98px) { ... }

Ma con Sass la classe diventa:

@include media-breakpoint-between(md, xl) { ... }

Il concetto di griglia responsiva è considerato uno delle più importanti evoluzioni del web degli ultimi anni e uno dei motivi princiali dell'uso di Bootstrap, il concetto base è la creazione di griglie responsive introdotte con CSS3, le configurazioni di default di bootstrap prevedono di dividere un contenitore in 12 colonne, la tredicesima colonna viene spostata sempre alla riga successiva. Il sistema a grigia è implementato con una serie di classi già pronte per l'uso:

• containers: gestice i padding e la posizione di tutti gli elemento
• rows: gestisce le posizioni delle celle per allinearle
• columns: gestice larghezze e le dimensioni del contenuto

Un esempio pratico

<div class="container">
  <div class="row">
    <div class="col-sm">A</div>
    <div class="col-sm">B</div>
    <div class="col-sm">C</div>
  </div>
</div>

Nell'uso delle colonne (col), se non si indica nessun numero come nell'esempio viene preso tutto lo spazio disponibile, nell'esempio avendo 3 colonne lo spazio viene diviso per 3 come se fosse indicato 33% di larghezza ma è possibile indicare quanto larga deve essere una colonna con l'uso di

<div class="container">
  <div class="row">
    <div class="col-2">A</div>
    <div class="col-4">B</div>
    <div class="col-6">C</div>
 </div>
</div>

In questo caso la larghezza delle colonne non è omogenea, perché la larghezza del contenitore viene divisa per 12 e poi la prima colonna occupa i primi due, poi quattro e poi sei, pensandola proprio simile ad una tabella. Queste caratteristiche poi vengono molto usate per nascondere e mostrare colonne a seconda della larghezza del browser, cioè è possibile usare le classi per dispositivo:

• .col-X <586
• .col-sm-X ≥576px
• .col-md-X ≥768px
• .col-lg-X ≥992px
• .col-xl-X ≥1200px

per esempio:

<div class="container">
  <div class="row">
    <div class="d-none d-lg-block col-lg-2">A</div>
    <div class="col-2 col-lg-4">B</div>
    <div class="col-10 col-lg-6">C</div>
  </div>
</div>

in questo esempio fino a dispositivi lg (esclusi) vengono mostrate due colonne con larghezza di 2 e 10, mentre con i dispositivi lg o più grandi le colonne mostrate sono 3, con la dimensioni due, quattro e sei. Questa tecnica viene molto usata per disegnare pagine che cambiano "forma" a seconda della dimensione dello schermo usato dall'utente e può essere usato per disegnare tabelle come vedremo in un prossimo articolo.

Come per il testi e gli alert, anche per i bottoni sono definite delle classi di default per la visualizzazione dei bottoni, la classe base btn deve essere seguita dalla classe specifica per il colore dello sfondo e del testo, per esempio:

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>

esiste anche la classe per creare un bottone con la grafica di un link

<button type="button" class="btn btn-link">Link</button>

esistono anche le classi per la visualizzazioni di un bottone con sfondo bianco ma solo con il bordo e il testo colorato aggiungendo outline alla classe specifica, per esempio:

<button type="button" class="btn btn-outline-primary">Primary</button>

esistono anche le classi per aumentare e diminuire le dimensioni dei bottoni, così come la possiblità di renderlo "block" cioè largo ed è possibile aggiungere la classe active per rendere il bottone con l'effetto grafico di attivazione, per esempio:

<button type="button" class="btn btn-primary btn-lg">Grande</button>
<button type="button" class="btn btn-primary btn-sm">Piccolo</button>
<button type="button" class="btn btn-primary btn-lg btn-block">Block</button>
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Attivo</a>

E' possibile raggruppare bottoni vicini per dare l'effetto grafico classico di bootstrp, aggiungendo un div con la classe btn-group, per esempio:

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Sinistra</button>
  <button type="button" class="btn btn-secondary">Centrale</button>
  <button type="button" class="btn btn-secondary">Destra</button>
</div>

E' possibile anche utilizzare i gruppi di input per dare l'effetto grafico che un bottone sia vicino ad un input text, per esempio:

<div class="input-group">
  <div class="input-group-prepend">
    <div class="input-group-text" id="btnGroupAddon">@</div>
  </div>
  <input type="text" class="form-control" 
    placeholder="Input group example" aria-label="Input group example" 
    aria-describedby="btnGroupAddon" />
</div>

E' possibile anche creare un gruppo di checkbox con la grafica dei bottoni di bootstrap, per esempio:

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Uno
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Due
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Tre
  </label>
</div>

Una delle caratteristiche maggiori dei siti realizzati con bootstrap è la presenta della barra di navigazione superiore che permette all'utente di cambiare pagine e sezione velocemente, gli utenti ormai infatti sono abituati ad avere la barra superiore con il logo, i link alle sezioni importanti ed un filtro di ricerca, nonostante sia solo una questione di abitudine, senza questa barra la maggior parte degli utenti si trova spaesata in assenza della barra di navigazione. Di regola la navbar di bootstrap è definita dal tag NAV oppure con un tag DIV con la proprietà role="navigation", con le classi "navbar" e "navbar-expand-md" per definire la funzionalità di collasso della barra per i dispositivi piccoli, funzionalità attiva con il plugin javascript e non è stampabile meno che non venga forzata la classe "d-print". All'interno della navbar è possibile inserire solo un determinato tipo di elementi:

• navbar-brand per inserire loghi e/o nomi (come il nome di una compagnia o di un prodotto)
• navbar-nav link di navigazione
• navbar-toggler usato per il bottone per nascondere e visualizzare la barra stessa
• form-inline usato per inserire nella barra un form come il form di ricerca
• navbar-text testo addizionale da visualizzare nella pagina
• navbar-collapse usato per inserire l'icona in caso di dispositivi piccoli dove la barra collassa.

Un esempio di navbar è

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Nomeprodotto</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" 
      data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" 
      aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <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="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" 
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Dove il brand può essere un titolo, un'icona o entrambi, un esempio con entramabi:

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
  <img src="./ico.svg" width="30" height="30" class="d-inline-block align-top" alt="">Bootstrap</a>
</nav>

La "nav" è l'insieme di tutti i link semplici di navigazione definita dalla classe "navbar-nav", l'elenco è definito con un UL e i singoli elementi come LI con un tag A al proprio interno oppure è possibile usare tutti elementi DIV con sempre i link di tipo A, ogni tag ha a disposizione molte classi per personalizzare la grafica visualizzata:

<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
  <div class="navbar-nav">
    <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
    <a class="nav-item nav-link" href="#">Features</a>
    <a class="nav-item nav-link" href="#">Pricing</a>
    <a class="nav-item nav-link disabled" href="#">Disabled</a>
  </div>
</div>

Mentre per creare delle voci espandibili "dropdown link" si usano le classi specifiche "dropdown" e "dropdown-toggle":

<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">
    Dropdown link
  </a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</li>

Per il classico form di ricerca è indispensabile usare le classi form-inline, per esempio

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

Per quanto riguarda i bottoni e i testi è possibile usare tutto quello che bootstrap mette a disposizione, per esempio:

<button class="btn btn-outline-success" type="button">Main button</button>
<button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>

Così come per i colori di sfondo della barra si può personalizzare con classi specifiche, per esempio:

<nav class="navbar navbar-dark bg-dark">
<nav class="navbar navbar-dark bg-primary">
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">

E' possibile modificare la posizione della barra per renderla fissa in alto oppure in posizionato in basso in fondo alla pagina sempre con le classi dedicate:

<nav class="navbar fixed-top navbar-light bg-light">
<nav class="navbar fixed-bottom navbar-light bg-light">
<nav class="navbar sticky-top navbar-light bg-light">

Uno dei problemi principali dei siti creati con le tecniche responsive è come riuscire a rappresentare tanti dati in strutture tabellari, evitando di appesantire troppo la pagina e rendere il contenuto leggibile nei vari dispositivi. Il metodo base previsto di HTML è l'uso del tag TABLE e di tutti i sottotag per creare la struttura della tabella, con bootstrap 4 è possibile usare la classe principale "table" , un esempio semplice è

<table class="table">
  <thead>
    <tr>
      <th scope="col">N°</th>
      <th scope="col">Nome</th>
      <th scope="col">Cognome</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mario</td>
      <td>Rossi</td>
    </tr>
  </tbody>
</table>

poi ci sono a disposizione le classi per la gestione dei colori di sfondo come "table-dark" oppure "thead-dark", mentre per rendere zebrato il contenuto si può usare la classe "table-striped" nel tbody, per i bordi standard si usa la classe "table-bordered" mentre per togliere qualsiasi tipo di bordo si usa la classe "table-borderless" . Per la gestione del "hover" cioè l'effetto che, al passaggio del mouse, una riga si evidenzia si usa la classe "table-hover".

La novità del framework in realtà è l'uso delle classi responsive per le tabelle, con la creazione di un DIV con classe "table-responsive" si crea una struttura adattiva, per esempio

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

oppure è possibile usare le sottoclassi specifiche per la gestione dei dispositivi più piccoli, come per esempio:

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

e tutte le altre dimensioni con le classi table-responsive-XX.

La gestione delle tabelle con i tag TABLE rende le pagine sempre rigide vista la poca flessibilità del tag TABLE e dei suoi sottotag, può risultare complicato e arduo nascondere colonne e righe a seconda del dispositivo usato, inoltre i diversi browser si possono comportare in maniera diversa nonostante l'uso dei tag standard.

Una possibile soluzione è disegnare la struttura tabellare come un insieme di righe e colonne a DIV e non usando i TR/TD previsti da HTML: la filosofia di questa tecnica è disegnare la tabella con un numero di colonne a DIV e gestire la visibilità con le classi standard del framework bootstrap 4.

Questa tecnica presenta una grande limitazione: la larghezza della struttura deve essere divisa per 12 e le colonne devono essere multipli di 1/12, per esempio è possibile creare una tabella con due colonne, la prima con larghezza 2/12 e la seconda larga 10/12, inoltre è possibile pensare di far comparire una terza colonna di larghezza 3/12 solo nei dispositivi larghi (cioè di tipo xl) riducendo la seconda colonna a 7/12.
Un esempio di struttura tabellare con i DIV ha 4 colonne ma la terza colonna è visibile solo i dispositivi larghi cioè quelli superiori ai 992 px (i LG e i XL), il codice HTML della tabella:

<div class=""> <!--tabella-->
	<div class=""> <!--riga -->
		<div class="col-1">Num</div>
		<div class="col-9 col-lg-3">Nome e Cognome</div>
		<div class="d-none d-lg-block col-lg-6 text-truncate">Indirizzo</div>
		<div class="col-2 text-right">Modifica</div>
	</div>
	<div class=""> <!--riga -->
		<div class="col-1">1</div>
		<div class="col-9 col-lg-3">Mario Rossi</div>
		<div class="d-none d-lg-block col-lg-6 text-truncate">Via Roma 1</div>
		<div class="col-2 text-right"><a href="#">Modifica</a></div>
	</div>
</div>

da notare che la seconda colonna di default è larga 9 delle 12 colonne ma nei dispositivi larghi (lg e xl) si riduce per far spazio alle 6 colonne occupate dalla colonna indirizzo, l'uso della classe text-truncate evita che gli elementi sforino delle dimensioni prefissate impostate dal col-X e il contenuto in eccesso viene nascosto.

Con questa tecnica è possibile sbizarrirsi nella creazione di strutture tabellari anche complesse, sicuramente questa tecnica può sembrare molto complessa e può essere anche dispendiosa in termini di tempo ma sicuramente è la tecnica migliore per la creazione di tabelle con il framework di Bootstrap 4.

Nello sviluppo di siti con questa tecnica, il programmatore deve tener conto che per ogni larghezza del dispositivo la somma delle colonne deve sempre essere 12, un altro esempio complesso con 6 colonne:

		CF	Cognome		Nome	Indirizzo	Comune 	Bottoni
Default		2	6		hide	hide		hide	4
Piccolo (sm)	2	4		4	hide		hide	2
Medio 	(md)	1	3		3	3		hide	2
Largo	(lg)	1	2		2	3		3	1
Grande	(xl)	1	2		2	3		3	1

In questo esempio le colonne Codice Fiscale, Cognome e Bottoni sono sempre visibili mentre la colonna Nome compare compare solo dai piccoli(sm) ai più grandi, la colonna Indirizzo è visibile dai dispositivi di media grandezza (md) mentre la colonna Comune è visibile dai dispositivi larghi (lg), ovviamente la somma dello spazio occupato dalle colonne è sempre 12. Le classi usate per creare questa struttura sono:

• Codice fiscale: col-2 col-md-1
• Cognome: col-6 col-sm-4 col-md-3 col-lg-2
• Nome: d-none d-sm-block col-sm-4 col-md-3 col-lg-2
• Indirizzo: d-none d-md-block col-md-3 text-truncate
• Comune: d-none d-lg-block col-lg-3 text-truncate
• Bottoni: col-4 col-sm-2 col-md-2 col-lg-1 text-right

Il framework mette a disposizione due componenti per la gestione del movimento di porzioni di pagina, queste tecniche sono molto usate in quasi tutti i siti visto che questi sono ormai diventati uno standard.
Con collapse è possibile nascondere e visualizzare parti ti pagina al click di un link o di un bottone, per esempio:

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link per mostrare e nascondere id div collapseExample con href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Bottone per mostrare e nascondere il div collapseExample con il data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Questo è il testo che verrà mostrato e nascosto, importante la corrispondenza tra l'id del div e l'href del link oppure il data-target del bottone
  </div>
</div>

Con la tecnica dei collapse è possibile creare un accordion:

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" 
			data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Bottone del gruppo 1
        </button>
      </h5>
    </div>
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Testo del gruppo 1
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" 
			data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Bottone del gruppo 2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Testo del gruppo 2
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" 
			data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Bottone del gruppo 3
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
         Testo del gruppo 3
      </div>
    </div>
  </div>
</div>

Per quanto riguarda il scrollspy invece permette di gestire, con bottoni o link, lo scroll verso un punto specifico o una sottosezione della pagina, per esempio è la disposizione dei bottoni in verticale

<nav id="navbar-example2" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link" href="#uno">@uno</a></li>
    <li class="nav-item"><a class="nav-link" href="#due">@due</a></li>
   </ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
  <h4 id="uno">@uno</h4>
  <p>...testo dell'uno </p>
  <h4 id="due">@due</h4>
  <p>...testo del due </p>
</div>

Altro semplice esempio con i bottoni in verticale con il testo a lato

<nav id="navbar-example3" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <nav class="nav nav-pills flex-column">
    <a class="nav-link" href="#item-1">Item 1</a>
    <a class="nav-link" href="#item-2">Item 2</a>
    <a class="nav-link" href="#item-3">Item 3</a>
  </nav>
</nav>
<div data-spy="scroll" data-target="#navbar-example3" data-offset="0">
  <h4 id="item-1">Item 1</h4>
  <p>...</p>
  <h4 id="item-2">Item 2</h4>
  <p>...</p>
  <h4 id="item-3">Item 3</h4>
  <p>...</p>
</div>

Altro semplice esempio con la list-group

<div id="list-example" class="list-group">
  <a class="list-group-item list-group-item-action" href="#listitem1">Item 1</a>
  <a class="list-group-item list-group-item-action" href="#listitem2">Item 2</a>
  <a class="list-group-item list-group-item-action" href="#listitem3">Item 3</a>
  <a class="list-group-item list-group-item-action" href="#listitem4">Item 4</a>
</div>
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
  <h4 id="listitem1">Item 1</h4>
  <p>... testo uno</p>
  <h4 id="listitem2">Item 2</h4>
  <p>... testo due</p>
  <h4 id="listitem3">Item 3</h4>
  <p>... testo tre</p>
  <h4 id="listitem4">Item 4</h4>
  <p>... testo quattro</p>
</div>

Bootstrap mette a disposizione varie classi per la formattazione di blocchi, chiamati card, e liste. Una semplice card è:

<div class="card">
  <div class="card-body">
    Testo all'interno del box
  </div>
</div>

dove all'interno è possibile posizionare qualsiasi elemento

<div class="card w-75" >
  <div class="card-body">
    <h5 class="card-title">Titolo</h5>
    <h6 class="card-subtitle mb-2 text-muted">Sottotitolo</h6>
    <p class="card-text">Testo di esempio anche molto lungo.</p>
    <a href="#" class="card-link">Primo link</a>
    <a href="#" class="card-link">Secondo link</a>
  </div>
</div>

Per quanto riguarda le liste è possibile usare più card in sequenza ma sono previste classi specifiche con l'utilizzo dei tag UL e LI di HTML, per esempio:

<ul class="list-group">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item disabled">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-info">Vestibulum at eros</li>
</ul>

è possibile aggiungere stili agli elementi della lista per differenziare i vari elementi della lista (come il testo, sfondo, icone, ecc…)
L'aggiunta di Badge ad un elemento è possibile

<li class="list-group-item d-flex justify-content-between align-items-center">
    Quattordici
    <span class="badge badge-primary badge-pill">14</span>
</li>

Con bootstrap è possibile creare velocemente una classica barra per la navigazione con link, si utilizza sempre il tag UL con sottotag LI per i singoli elementi

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

oppure è possibile usare anche il tag NAV e una lista di tag A

<nav class="nav">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Disabled</a>
</nav>

E' possibile personalizzare la barra aggiungendo le classi

• flex-column per posizionare gli elementi in verticale
• nav-pills per mostrare i link come bottoni (pills)
• nav-fill per allargare i bottoni e in modo che occupino tutta lo spazio
• nav-tabs per creare l'effetto a tab
  

E' possibile creare sottomenù usando il dropdown, per esempio:

<li class="nav-item dropdown">
	<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
	<div class="dropdown-menu">
		<a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<a class="dropdown-item" href="#">Something else here</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="#">Separated link</a>
	</div>
</li>

Questo tipo di elemento, combinato con i javascript base del file bootstrap.js, è usato per creare le classiche schede, per esempio

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

Elemento usato spesso negli elenchi molto lungo è l'elemento di paginazione, cioè un effetto grafico che permette di gestire il movimento tra pagine uniformi, di default si usano i tag elenchi UL e LI previsti da HTML con delle classi specifiche, per esempio:

<nav >
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Precedente</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Successivi</a></li>
  </ul>
</nav>

E' anche possibile posizionare un'icona negli elementi "precedente" e "successivo", per esempio

<li class="page-item">
  <a class="page-link" href="#" aria-label="Previous">
	<span aria-hidden="true">«</span>
	<span class="sr-only">Previous</span>
  </a>
</li>

Aggiungendo poi all'elemento della lista LI la classe active si può creare l'effetto grafico di attivazione mentre con disabled si imposta l'effetto grafico di disattivazione. Per rendere la lista più grande si usa la classe "pagination-lg" nel tag UL oppure la classe "pagination-sm" per visualizzare il testo in piccole dimensioni.

Tutti i browser supportano i tooltip standard di HTML sviluppati con la proprietà title però questo sistema è superato da tutti i vari plugin e framework che mettono a disposizione grafiche e funzionalità migliori di quella base prevista da HTML, con bootstrap lo standard è sempre usare il title ma usare alcune proprietà aggiuntive:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Elemento con Tooltip semplice in cima
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>con</u> <b>HTML</b>">
  Elemento con Tooltip con HTML
</button>

tuttavia è importante sapere che bootstrap usa la libreria standard di jquery per visualizzare e nascondere il messaggio, cioè la funzione

$().tooltip(options)

con la sola differenza che utilizzare le classi di bootstrap permette di evitare di usare direttamente javascipt infatti usare le classi delega alla libreria l'onere di visualizzare e nascondere il tooltip. I tooltip standard vengono visualizzati al passare del mouse sopra una zona e scompaiono al movimento del mouse fuori della zona, mentre i popovers funzionano alla stessa maniera ma sono visualizzati ad un click in un punto prefissato come un bottone e scompaiono al click successivo dello stesso punto. Per esempio

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Testo del popover, devi ri-cliccare nel pulsante per chiudere">
  Testo con un popover, clicca qui per farlo comparire
</button>

e anche in questo caso la libreria bootstrap utilizza la funzionalità di jquery

$().popover(options)

Con un paio di iscruzioni è anche possibile impostare che gli elementi popovers si chiudano anche ad un qualsiasi click, non solo nell'oggetto di apertira:

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Popover" data-content="Clicca dove vuoi">Dismissible popover</a>
<script>
  $('.popover-dismiss').popover({
    trigger: 'focus'
  });
</script>

Le finestre modali hanno quasi completamente sostituito le finestre popup, grazie alla facilità di programmazione e alla ottima gestione che permette di creare effetti molto belli. Per la gestione di questo componente è necessario l'utilizzo di Javascript e Jquery per la visualizzazione il posizionamento della finestra modale stessa, la finestra modale infatti usa la proprietà posizion:fixed per il rendering e il posizionamento dell'oggetto DOM. L'istruzione base presente in Bootstrap che il programmatore non deve scrivere ma deve sicuramente conoscere è:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

Per aprire una modale basta aggiungere un bottone con le proprietà data-toogle fissa a modal per indicare qual'è l'effetto grafico e il data-targhet con l'id dell'ogetto DOM da posizionare nella modale

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Modale demo
</button>

Poi basta definire il corpo della finestra con l'id precedente indicato e tutta una serie di di regole e classi per la gestione: all'interno dell'oggetto con classe modal-dialog, compare un modal-content che al suo interno ha tre oggetti con classe modal-header, modal-body, modal-footer

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"Titolo della modale</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span><!--X chiusi denza testo -->
        </button>
      </div>
      <div class="modal-body">
        Testo della modale
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>

Questi componenti possono essere anche personalizzati

• per centrare la modale basta aggiungere la classe modal-dialog-centered all'oggetto con classe modal-dialog
• se si usano tooltip e popover standard bootstrap non ci sanno problemi con la visualizzazione, se si usano altre librerie potrebbero presentarsi problemi di visualizzazione
• all'interno della modale, in uno dei tre componenti del modal-content, è possibile usare la griglia responsiva a 12 colonne
• togliendo la classe fade nella modale si rimuove la breve animazione che apre e chiude la finestra
• è possibile aggiungere le classi modal-lg e modal-sm (all'oggetto con modal-dialog) per rendere la finestra grande (lg) o piccola (sm)

$body-bg: yellow;

$primary: $blue !default;
$blue: #007bff !default;

$chiaro: rgb(200,200,200); 
.container{ background-color: $chiaro1; }

Nella versione 3 di Bootstrap era compresa una libreria di icone chiamata Glyphicons, tale aggiunta non è presente nella versione 4, e per aggiungere le icone esistono varie strade, la più semplice è quella di usare la libreria fontawesome

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

e poi usare gli stili

<i class="fas fa-file"></i>
<div class="fas fa-bars"></div>

questa tecnica viene preferita ad altre perché si delega alla libreria la "decisione" della grandezza delle icone, per esempio all'interno del tag H1, l'icona viene ingrandita proporzionalmente alla dimensione del testo.
L'elenco lunghissimo di icone disponibili (alla attuale versione 5) è disponibile nel sito della W3C.

Altra libreria consigliata dal sito ufficiale di Bootstrap è octicons, disponibile sul sito ufficiale octicons.github.com e basta scaricare e importare il CSS per l'uso. Altre librerie disponibili anche se non ufficiali sono la libreria Material di Google all'indirizzo material.io e la libreria ionicons all0indirizzo ionicons.com.

Esiste anche la possibilità di utilizzare la libreria Glyphicons della versione Tre di bootstrap anche se non ufficialmente comrpesa nella quattro, basta infatti scaricare il css della libreria "Glyphicons.css" e scaricare i font della libreria che comprendono 4 file (eot, svg, ttf, woff2) che devono essere posti in una cartella font come sottocartella dove è posizionato il file CSS. Poi basta importare gli stili con il tag link:

<link rel="stylesheet" href="./styles/Glyphicons.css" type="text/css"></link>

Una delle tendenze del web recente è l'utilizzo delle barre laterali sinistre per inserire un elenco di link per elencare sotto-pagine o sottoargomenti, un esempio semplice è proprio il sito ufficiale di bootstrap dove è quasi sempre presente una sezione laterale con i link e sottolink, un esempio ed un esercizio per gli sviluppatori è quello di creare una griglia dove le prime due colonne sono dedicate ai link mentre le altre 10 sono dedicate al contenuto della pagina e grazie alla media-queries è possibile poi gestire la visibilità di questa barra solo sui dispositivi large, evitando così di visualizzare la barra nei dispositivi piccoli dove ovviamente c'è meno spazio. Basta infatti creare una row, con due colonne: la prima con "col-2 d-none d-lg-block bg-dark sidebar fixed" mentre la seconda con "col-12 col-lg-10 mt-3 mb-3", ecco l'esempio completo:

<html>
  <head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" >
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" ></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" ></script>
</head>
<body>
  <header class="navbar navbar-expand navbar-dark bg-primary">
    ... header ...
  </header>
  <div class="container-fluid" >
    <div class="row">
      <div class="col-2 d-none d-lg-block bg-dark sidebar fixed">
        <nav class="sidebar-sticky">
          <ul class="nav flex-column">
            <li class="nav-item" style="">Esterni</li> 
            <li class="nav-item" style="line-height: 1;font-size:0.8rem;"> 
              <a class="nav-link active" href="https://www.alnao.it" target="_blank">
                <span data-feather="home"></span>AlNao.it</span>
              </a>
            </li>
          </ul>
        </nav>
      </div>
      <main role="main" class="col-12 col-lg-10 mt-3 mb-3">
         body della pagina
      
         qui c'è il corpo della pagina
      </main>
    </div>
  </div>
  <footer class="navbar navbar-expand navbar-dark bg-secondary">
    footer della pagina fisso in basso
  </footer>
<body>
</html>

La gestione dei box flessibili è stata gestita ulteriormente nel framework di Bootstrap, infatti sono disponibili alcune classi base che permettono di gestire i flexbox in maniera rapida e veloce.

Il caso base prevede due classi d-flex e flex-row per indicare l'ordinamento a righe

<div class="d-flex flex-row">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

Mentre l'allineamento centrale si imposta con la classe align-items-center

<div class="d-flex align-items-center">...</div>

Mentre negli elementi interni è possibile impostare l'allineamento specifico con la classe align-self-center

Per ogni classe qui indicata è possibile anche specificare il dispositivo nella filosofia responsive: in ogni classe è possibile aggiungere il dispositivo, per esempio align-items-center diventerebbe align-items-md-center per i dispositivi medi.

Un semplice caso d’uso è definire un elenco di eventi e doverli graficamente rappresentare in orizzontale, NON usiamo le tabelle o blocchi fluttuanti come si faceva in passato ma, si può definire una lista e posizionarla in una struttura orizzontale. La lista base diventa:

<div class='container-fluid'>
  <ul class="htimeline">
    <li class="col-sm-3" event-data="01/01/2022">Primo evento</li>
    <li class="col-sm-3" event-data ="12/04/2022">Secondo evento</li>
    <li class="col-sm-3" event-data ="31/07/2022">Terzo evento</li>
    <li class="col-sm-3" event-data ="04/09/2022">Quarto evento</li>
  </ul>
</div>

Lo stile CSS custom può essere usato per graficare gli oggetti

.htimeline { list-style: none; min-height:100px;}
.htimeline > LI { 
  float: left; position: relative; 
  border-top-style: solid; border-top-width: 1px;
}

E per posizionare il valore della custom-property “event-data” poco sopra il bordino basta aggiungere:

.htimeline >LI::after { 
  content: attr(event-date); position: absolute; top: -24px; left: 17px;
}

Ma è possibile usare le classi di bootstrap native:

<div class='container-fluid'>
  <ul class="list-unstyled min-vh-100 p-0 htimeline">
    <li class="float-start position-relative border-top border-success col-sm-3"
      event-date="01/01/2022">Primo evento</li>
    <li class="float-start position-relative border-top border-success col-sm-3"
      event-date="12/04/2022">Secondo evento</li>
    <li class="float-start position-relative border-top border-success col-sm-3"
      event-date="31/07/2022">Terzo evento</li>
    <li class="float-start position-relative border-top border-warning col-sm-3"
      event-date="04/09/2022">Quarto evento</li>
  </ul>
</div>

Questo tipo di definizione della pagina toglie quasi completamente la necessità di definire stili CSS ma questo rende molto più pesante la lettura del codice e più complicata la manutenzione della pagina. Per risolvere il problema si può usare un precompilatore SASS.

L'esempio è liberamente ispirato agli esempi di Jorge Barderas.

Le classi di Bootstrap per i form sono una espansione delle classi contenute nella libreria reboot, infatti con la libreria base viene uniformato l'aspetto grafico degli oggetti che poi possono essere personalizzati con queste classi specifiche.

Queste classi sono utilizzate non solo per l'aspetto degli oggetti input all'interno del form ma soprattutto il posizionamento del testo e oggetti non input all'interno del form, la classe base infatti è chiamata form-control ed è utilizzata nei tag input per indicare che il posizionamento deve essere calcolato rispetto al form. Per esempio:

<form>
 <div class="form-group">
  <label for="exampleFormControlInput1">Email address</label>
  <input type="email" class="form-control" 
    id="exampleFormControlInput1" placeholder="name@example.com">
 </div>
 <div class="form-group">
  <label for="exampleFormControlSelect1">Example select</label>
  <select class="form-control" id="exampleFormControlSelect1">
    <option>1</option><option>2</option><option>3</option>  
    <option>4</option><option>5</option>
  </select>
 </div>
</form>

Inoltre è possibile ridimensionare le dimensioni di tutti gli oggetti con le sottoclassi large e small: form-control-lg e form-control-sm.

Una classe molto utile è quella del Readonly nel tag input, per la creazione di oggetti input ma con l'aspetto grafico di una label, in questo caso si usa "form-control-plaintext"

<form>
 <div class="form-group row">
  <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
  <div class="col-sm-10">
   <input type="text" readonly class="form-control-plaintext" 
     id="staticEmail" value="email@example.com" />
  </div>
 </div>
</form>

Esistono delle classi per il posizionamento inline di elementi che di default non lo sono come i radiobutton, in questo caso l'uso di "form-check-inline" e "form-check" riduce al minimo i problemi e il codice scritto:

<div class="form-check form-check-inline">
 <input class="form-check-input" type="checkbox" 
    id="inlineCheckbox1" value="option1" />
 <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>

Uno degli aspetti più importanti dei form sono il posizionamento in una griglia (a tebella seconso le vecchie versioni di HTML), con bootstrap questo è possibile come sempre con "row" e "col" nella struttura a 12 colonne, per esempio:

<form>
 <div class="form-row">
  <div class="form-group col-md-6">
   <label for="inputEmail4">Email</label>
   <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
  </div>
  <div class="form-group col-md-6">
   <label for="inputPassword4">Password</label>
   <input type="password" class="form-control" 
     id="inputPassword4" placeholder="Password"/>
  </div>
 </div>
 <div class="form-group">
  <label for="inputAddress">Address</label>
  <input type="text" class="form-control" id="inputAddress" 
    placeholder="1234 Main St" />
 </div>
 <div class="form-group">
  <label for="inputAddress2">Address 2</label>
  <input type="text" class="form-control" id="inputAddress2"
    placeholder="Apartment, studio, or floor" />
 </div>
</form>

mentre una struttura a due colonne label-input può essere usata sempre usando le classi bootstrap:

<form>
 <div class="form-group row">
  <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
  <div class="col-sm-10">
  <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
 </div>
 <div class="form-group row">
  <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
  <div class="col-sm-10">
   <input type="password" class="form-control" 
     id="inputPassword3" placeholder="Password" />
  </div>
 </div>
</form>

ovviamente questa tecnica permette di usare colonne responsive dove gli elementi del form si posizionano a seconda della larghezza del dispositivo, è possibile usare anche "col-auto" per il calcolo automatico delle dimensioni:

<form>
 <div class="form-row align-items-center">
  <div class="col-auto">
   ...

Per il tag particolare select (sempre diverso dagli input), bootstrap necessita della classe speciale "custom-select" per apparire graficamente omogeneo agli altri tag, argomento che verrà trattato in uno dei prossimi articoli.

La validazione automatica dei form è una novità introdotta con bootstrap e, in generale, i siti di nuova generazione dove si blocca l'utente dove i dati inseriti in un form non sono conformi a determinate regole, in questo modo di evitano chiamate al server di dati incompleti e si può guidare in maniera ottimale l'utente ad inserire tutti i dati necessari. La validazione è ovviamente gestita dalle classi javascript di bootstrap ed è automatica se si usano le classi CSS del framework.

L'aspetto grafico viene indicato grazie a due pseudo-classi ":invalid" e ":valid" applicabili ai tag input, select e textarea, oltre che alla classe aggiuntiva "was.validated" applicata al form, inoltre sono definite classi specifiche "is-invalid" e "is-valid". Un esempio pratico di input con controllo è

<div class="col-auto">
 <label for="validationCustom03">City</label>
 <input type="text" class="form-control" 
   id="validationCustom03" placeholder="City" required/>
 <div class="invalid-feedback">
  Please provide a valid city.
 </div>
</div>

in questo esempio l'uso di required causa un "evendo" di controllo al momento del submit del form, codice però non sufficiente perchè bisogna aggiungere il javascript per la gestione del blocco del submit

<scr ipt>
// Example for disabling form submissions if there are invalid fields
(function() {'use strict';
  window.addEventListener('load', function() {
    // Fetch all forms to apply validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

da tenere conto che ogni browser mostra gli errori di validazione in maniera diversa, per esempio Chrome mostra un tooltip con un aspetto grafico, altri browser sono diversi, per vedere come visualizzano il messaggio basta usare il semplice codice:

<div class="col-auto">
  <label for="validationDefault03">City</label>
  <input type="text" class="form-control" 
    id="validationDefault03" placeholder="City" required />
</div>

Per una gestione unica dei tooltip, come sembra, basta delegare a bootstrap con delle classi specifiche, per esempio:

<div class="col-auto">
  <label for="validationTooltip03">City</label>
  <input type="text" class="form-control" 
    id="validationTooltip03" placeholder="City" required />
  <div class="invalid-tooltip">
    Please provide a valid city.
  </div>
</div>

Con input-group la libreria di bootstrap permette di gestire graficamente al meglio degli input per "decorarli" con oggetti posizionati prima e dopo l'input stesso. Per esempio se si vuole creare un input dove l'utente deve inserire un indirizzo web e si vuole inserire un elemento grafico con la scritta "http:\\" prima dell'input si può usare il codice:

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon3">https://</span>
  </div>
  <input type="text" class="form-control" id="basic-url" 
    aria-describedby="basic-addon3" />
</div>

Oppure un testo dopo l'input

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" 
     aria-label="Recipient's username" aria-describedby="basic-addon2" />
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">@gmail.com</span>
  </div>
</div>

Allo stesso modo è possibile ingrandire o rimpicciolire gli input con

<div class="input-group input-group-sm mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
  </div>
  <input type="text" class="form-control" aria-label="Sizing example input" 
    aria-describedby="inputGroup-sizing-sm" />
</div>

Una delle cose più carine è la grafica dei checkbox e dei radiobutton

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="checkbox" aria-label="checkbox input" />
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with checkbox">
</div>
<div class="input-group">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="radio" aria-label="Radio button input">
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with radio">
</div>

Oltre a testi semplici è possibile anche posizionare bottoni

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button" 
      id="button-addon1">Button</button>
  </div>
  <input type="text" class="form-control" placeholder="" 
    aria-label="Example text with button addon" aria-describedby="button-addon1">
</div>

Allo stesso modo è possibile usare questi elementi per aggiungere dropdowns, utilizzando anche dei tag Select o FileInput.

Per la selezione di un valore in una lista non esiste un vero standard tra i browser e anche il tag SELECT non sempre è uguale tra i vari programmi, tanto che si cerca sempre di gestire la selezione tramite un altro tag. In Bootstrap, di base il tag prevede la stessa classe degli input, per esempio:

<div class="form-group">
  <label for="exampleFormControlSelect1">Seleziona il numero</label>
  <select class="form-control" id="exampleFormControlSelect1">
    <option value="1">uno</option>
    <option value="2">due</option>
    <option value="3">tre</option>
  </select>
</div>

Tuttavia la select, una volta aperta non cambia d'aspetto visto che quell'elemento non è personalizzabile con i CSS. L'unico modo per rendere graficamente una tendina select graficamente uniforme all'aspetto grafico di bootstrap è usare altri componenti e altre librerie che si basano su bootstrap, una delle tecniche per la selezione è quella di usare il tag DataList come consigliato dalla pagina dedicata nel sito ufficiale W3CSchool:

<input list="encodings" value="" class="col-sm-6 custom-select custom-select-sm">
<datalist id="encodings">
  <option value="ISO-8859-1">ISO-8859-1</option>
  <option value="cp1252">ANSI</option>
  <option value="utf8">UTF-8</option>
</datalist>

ma questo tag è sconsigliato perchè non sempre supportato dai browser e Bootstrap 4.
Se si vuole qualcosa di graficamente più bello e curato è necessario dover importare una "espansione" della libreria bootstrap che inevitabilmente utilizzi dei componenti javascript per il comportamento della tendina per la scelta. Una delle librerie più usate al mondo è quella di snapappointments dove non è necessario fare altro che utilizzare le classi specifiche della libreria, per esempio:

<select class="selectpicker" multiple>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

I riferimenti per questa libreria sono sul sito ufficiale. Se si utilizza npm (e angular) basta lanciare il comando :

npm install bootstrap-select

per importare la libreria nel progetto Angular oppure per importare la libreria in HTML puro basta importare con il tag LINK e SCRIPT i componenti disponibili nel web:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/i18n/defaults-*.min.js"></script>

Gli oggetti dropdowns possono essere essere confusi con le menù a tendina, infatti alcuni programmatori li usano al posto del tag SELECT soprattutto nei progetti sviluppati con Angular. In realtà questo componente è stato pensato per essere un gestore di menù o sotto-azioni, la base del componente è

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown testo
  </a>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Azione base</a>
    <a class="dropdown-item" href="#">Altra azione</a>
    <a class="dropdown-item" href="#">Terza azione</a>
  </div>
</div>

dove il tag A può essere sostituito con il tag button e tutte le sottoclassi per l'aspetto grafico (primary, secondary, success, info, warning, danger)

<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  Azione
</button>

E il bottone vero può essere diviso tra l'oggetto testo e la freccetta che apre la tendina

<button type="button" class="btn btn-danger">Testo</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  <span class="sr-only">Apri</span>
</button>

Può essere aggiunta la classe "btn-lg" e "btn-sm" ai bottoni per aumentare e diminuire le dimensioni dell'elemento grafico mentre con le classi "dropup", "dropright" e "dropleft" si può forzare la posizione dell'elemento grafico a scomparsa. Con questo elemento, con javascript o typescript, è possibile gestire l'evento di apertura, chiusura e selezione di un elemento con gli eventi dedicati ed è questo il motivo per cui viene a volte usato come sostituto del tag SELECT.

I contenuti di AlNao.it potrebbero avere inesattezze o refusi. Non potrà in alcun caso e per qualsiasi motivo essere ritenuta responsabile di eventuali imprecisioni ed errori né di danni causati. Il sito web e tutte le informazioni ed i contenuti in esso pubblicati potranno essere modificati in qualsiasi momento e di volta in volta e senza preavviso. Poiché ogni materiale sarà scaricato o altrimenti ottenuto attraverso l’uso del servizio a scelta e a rischio dell’utente, ogni responsabilità per eventuali danni a sistemi di computer o perdite di dati risultanti dalle operazioni di scarico effettuato dall'utente, ricade sull'utente stesso e non potrà essere imputata ad AlNao.it che declina ogni responsabilità per eventuali danni derivanti dall'inaccessibilità ai servizi presenti sul sito o da eventuali danni causati da virus, file danneggiati, errori, omissioni, interruzioni del servizio, cancellazioni dei contenuti, problemi connessi alla rete, ai provider o a collegamenti telefonici e/o telematici, ad accessi non autorizzati, ad alterazioni di dati, al mancato e/o difettoso funzionamento delle apparecchiature elettroniche dell’utente stesso.

AlNao.it ha adottato ogni possibile accorgimento al fine di evitare che siano pubblicati, nel sito web, contenuti che descrivano o rappresentino scene o situazioni inappropriate o tali che, secondo la sensibilità degli utenti, possano essere ritenuti lesivi delle convinzioni civili, dei diritti umani e della dignità delle persone, in tutte le sue forme ed espressioni. In ogni caso non garantisce che i contenuti del sito web siano appropriati o leciti in altri Paesi, al di fuori dell’Italia. Tuttavia, qualora tali contenuti siano ritenuti non leciti o illegali in alcuni di questi Paesi, ti preghiamo di evitare di accedere al nostro sito e ove scegliessi, in ogni caso, di accedervi, ti informiamo che l’uso che deciderai di fare dei servizi forniti dal sito sarà di tua esclusiva e personale responsabilità. L’utente sarà esclusivo responsabile della valutazione delle informazioni e del contenuto ottenibile mediante il sito web. Il sito web e tutte le informazioni ed i contenuti in esso pubblicati potranno essere modificati in qualsiasi momento e di volta in volta e senza preavviso.

Le pagine di questo sito sono protette dal diritto d’autore (copyright). In particolare a norma della legge sul diritto d’autore e il contenuto del sito è protetto contro duplicazioni, traduzioni, inserimento o trasformazione dello stesso in altri media, incluso l’inserimento o la trasformazione con mezzi elettronici. La riproduzione e lo sfruttamento economico di tutto o di parte del contenuto di questo sito sono consentite solo a seguito del consenso scritto dell’avente diritto. Sia il contenuto che la struttura del sito sono protetti dal diritto d’autore. In particolare, la duplicazione di informazioni o dati, l’uso dei testi o di parte di essi o delle immagini contenute nel sito (eccetto per le foto ad uso stampa) è consentita solo previo consenso scritto dell’avente diritto. Anche le illustrazioni, a norma dell’art. 1 della legge 633/1941 – e successive modifiche e integrazioni – sono protette dal diritto d’autore. Il diritto di pubblicazione e riproduzione di questi disegni è di titolarità dell’avente diritto. Il diritto d’autore sui disegni rimane in vigore anche per i disegni automaticamente o manualmente aggiunti a un archivio. Nulla di quanto contenuto in questo sito vale come concessione a terzi dei diritti di proprietà industriale ed intellettuale indicati in questa sezione. Ci riserviamo tutti i diritti di proprietà intellettuale del sito web.

Marchi ed immagini riferibili a soggetti terzi utilizzati in questo sito non appartengono a AlNao.it e sono da ritenersi di proprietà esclusiva dei rispettivi titolari. Le denominazioni dei prodotti pubblicati su questo sito web o delle società menzionate, anche qualora non siano indicate con il simbolo identificativo della registrazione del marchio sono marchi di titolarità di terzi e sono protetti dalla legge sui marchi (D.lgs. 30/2005 e successive modifiche e integrazioni) e dalle norme in tema di concorrenza sleale. Qualsiasi riproduzione degli stessi è da ritenersi vietata ai sensi di legge. In particolare è espressamente vietato qualsiasi uso di questi marchi senza il preventivo consenso scritto del relativo titolare ed, in particolare, è vietato utilizzarli in modo da creare confusione tra i consumatori in merito all'origine dei prodotti o per finalità di sponsorizzazione, nonché in qualsiasi modo tale da svilire e discreditare il titolare del marchio. Tutti i diritti che non sono espressamente concessi sono riservati al titolare del marchio.

In aggiunta a quanto indicato in altre previsioni delle Condizioni Generali d’Uso, AlNao.it non potrà essere ritenuta in alcun caso responsabile di alcun danno derivante dall'utilizzo o dall'impossibilità di utilizzare il sito web, i contenuti, le informazioni o connessi alla qualità degli stessi.