Bootstrap (framework)
# Bootstrap (framework)

Bootstrap è una libreria di strumenti liberi per la creazione di siti e applicazioni per il Web. Essa contiene modelli di progettazione basati su HTML e CSS, sia per la tipografia, che per le varie componenti dell'interfaccia, come moduli, pulsanti e navigazione, così come alcune estensioni opzionali di JavaScript.

## Origine

Bootstrap è stato sviluppato da Mark Otto e Jacob Thornton presso Twitter come un framework che uniformasse i vari componenti che ne realizzavano l'interfaccia web, dato che la presenza di diverse librerie aveva portato ad incoerenze ed elevati oneri di manutenzione. Lo stesso Otto racconta:

«Io e un piccolissimo gruppo di sviluppatori ci riunimmo per progettare e implementare un nuovo componente interno e notammo l'opportunità di fare qualcosa in più. Durante il processo, infatti, ci ritrovammo a costruire qualcosa di ben più sostanzioso. Mesi dopo concludevamo la prima versione di Bootstrap nell'ottica di documentare e condividere comuni modelli di progettazione e attività all'interno della società".»

È stato impiegato per la prima volta in condizioni reali durante la prima Hackweek di Twitter, quando Otto ha mostrato ad alcuni colleghi come lo sviluppo dei loro progetti potesse essere accelerato grazie al Bootstrap. Dopo quell'occasione decine di squadre di sviluppo di Twitter sono passate a questo strumento.

Nell'agosto 2011 Twitter ha lanciato Bootstrap come open source, invitando tutti gli sviluppatori a partecipare al progetto e a dare il loro contributo alla piattaforma. Nel febbraio 2012, è stato il progetto di sviluppo che sulla piattaforma GitHub ha ricevuto il maggior numero di apprezzamenti, ottenendo, al febbraio 2018, 122.000 stelle e 58.000 fork.

Il 31 gennaio 2012 è uscito Bootstrap 2. Questa versione aggiunge un layout a griglia a dodici colonne e componenti reattivi e molti componenti sono stati modificati. Bootstrap 3 è uscito il 19 agosto 2013. Ha iniziato a dare la priorità ai dispositivi mobili come criterio e ha iniziato a utilizzare il design piatto.

Il 23 aprile 2015, Mark Otto ha annunciato che Bootstrap 4 è in fase di sviluppo. La prima versione alpha di Bootstrap 4 è stata distribuita il 19 agosto 2015.

Bootstrap 5 Alpha è stato messo in commercio il 16 giugno 2020. Dopo meno di sei mesi, il 1 ° dicembre 2020, Mark Otto ha annunciato la prima versione Beta. Attualmente, l'ultima versione del pacchetto è Beta 2, lanciata il 10 febbraio 2021.

## Caratteristiche

Bootstrap è compatibile con le ultime versioni di tutti i principali browser.

Dalla versione 2.0 supporta anche il responsive web design. Ciò significa che il layout delle pagine web si regola dinamicamente, tenendo conto delle caratteristiche del dispositivo utilizzato, sia esso desktop, tablet o telefono cellulare. A partire dalla versione 3.0, Bootstrap ha adottato il responsive design come impostazione predefinita, sottolineando il suo essere nata come libreria multidispositivo e multipiattaforma.

I membri della comunità hanno tradotto la documentazione del software di Bootstrap in varie lingue (tra cui cinese, spagnolo e russo). La qualità della documentazione e degli esempi d'uso pratico è considerato uno dei punti di forza di Bootstrap.

La versione 4.0, pubblicata il 18 gennaio 2018 e attualmente la più recente in forma stabile, prevede varie novità rispetto alla precedente major release e risulta più leggera dal punto di vista del codice, tra le quali alcune delle più rilevanti sono:

* Cessato supporto di browser obsoleti, come Internet Explorer 8 e 9 e quelli integrati nei primi iPhone
* Adozione di SASS invece di LESS e di Reboot.css invece di Normalize.css per la gestione dinamica organica e dinamica dei CSS
* Tutti i plugin JavaScript sono stati resi compatibili con ES6 e risultano più veloci e leggeri
* Sostituzione dell'oggetto Panel con Cards, che risultano più flessibili e potenti ma richiedono ovviamente la riscrittura di codici nati per Bootstrap 3
* Eliminazione dei Glyphicons integrati e agevolazione per l'uso di font esterni, come per esempio Font Awesome.

Naturalmente la versione 4 di Bootstrap prevede molte altre funzionalità e modifiche, documentate sul sito del progetto stesso.

Di seguito i Colori Bootstrap predefiniti rispetto ai colori Web anonimi. In HTML, CSS, SVG e Canvas non si possono tradurre i colori, vanno mantenuti in lingua inglese. Ad esempio non si può scrivere color: rosso ma si deve scrivere color: red

Colori Bootstrap predefiniti rispetto ai colori Web con lo stesso nome :

| Nome | Esadecimale (RGB) | Rosso (RGB) | Verde (RGB) | Blu (RGB) | Tonalità (HSL/HSV) | Saturazione (HSL) | Luce (HSL) | Satur. (HSV) | Valore (HSV) | Alternative |
| - | - | - | - | - | - | - | - | - | - | - |
| Bootstrap White | #FFFFFF | 100% | 100% | 100% | 0° | 0% | 100% | 0% | 100% | White |
| Bootstrap Gray 100 | #F8F9FA | 97% | 98% | 98% | 210° | 17% | 98% | 1% | 98% |
| Bootstrap Gray 200 | #E9ECEF | 91% | 93% | 94% | 210° | 16% | 93% | 3% | 94% |
| Bootstrap Gray 300 | #DEE2E6 | 87% | 89% | 90% | 210° | 14% | 89% | 4% | 90% |
| Bootstrap Gray 400 | #CED4DA | 81% | 83% | 85% | 210° | 14% | 83% | 6% | 86% |
| Bootstrap Gray 500 | #ADB5BD | 68% | 71% | 74% | 210° | 11% | 71% | 9% | 74% |
| Bootstrap Gray 600 | #6C757D | 42% | 46% | 49% | 208° | 7% | 46% | 14% | 49% | Bootstrap Gray |
| Bootstrap Gray 700 | #495057 | 29% | 31% | 34% | 210° | 9% | 31% | 16% | 34% |
| Bootstrap Gray 800 | #343A40 | 20% | 23% | 25% | 210° | 10% | 23% | 19% | 25% | Bootstrap Dark Gray |
| Bootstrap Gray 900 | #212529 | 13% | 15% | 16% | 210° | 11% | 15% | 20% | 16% |
| Bootstrap Black | #000000 | 0% | 0% | 0% | 0° | 0% | 0% | 0% | 0% | Black |
| Bootstrap Blue | #0D6EFD | 5% | 43% | 99% | 216° | 98% | 52% | 95% | 99% |
| Bootstrap Indigo | #6610F2 | 40% | 6% | 95% | 263° | 90% | 51% | 93% | 95% |
| Bootstrap Purple | #6F42C1 | 44% | 26% | 76% | 261° | 51% | 51% | 66% | 76% |
| Bootstrap Pink | #D63384 | 84% | 20% | 52% | 330° | 67% | 52% | 76% | 84% |
| Bootstrap Red | #DC3545 | 86% | 21% | 27% | 354° | 71% | 54% | 76% | 86% |
| Bootstrap Orange | #FD7E14 | 99% | 49% | 8% | 27° | 98% | 54% | 92% | 99% |
| Bootstrap Yellow | #FFC107 | 100% | 76% | 3% | 45° | 100% | 51% | 97% | 100% |
| Bootstrap Green | #198754 | 10% | 53% | 33% | 152° | 69% | 31% | 82% | 53% |
| Bootstrap Teal | #20C997 | 13% | 79% | 59% | 162° | 73% | 46% | 84% | 79% |
| Bootstrap Cyan | #0DCAF0 | 5% | 79% | 94% | 190° | 90% | 50% | 95% | 94% |
| Gray | #808080 | 50% | 50% | 50% | 0° | 0% | 50% | 0% | 50% | Grey |
| Blue | #0000FF | 0% | 0% | 100% | 240° | 100% | 50% | 100% | 100% |
| Indigo | #4B0082 | 29% | 0% | 51% | 275° | 100% | 26% | 100% | 51% |
| Purple | #800080 | 50% | 0% | 50% | 300° | 100% | 25% | 100% | 50% |
| Pink | #FFC0CB | 100% | 75% | 80% | 350° | 100% | 88% | 25% | 100% |
| Red | #FF0000 | 100% | 0% | 0% | 0° | 100% | 50% | 100% | 100% |
| Orange | #FFA500 | 100% | 65% | 0% | 39° | 100% | 50% | 100% | 100% |
| Yellow | #FFFF00 | 100% | 100% | 0% | 60° | 100% | 50% | 100% | 100% |
| Green | #008000 | 0% | 50% | 0% | 120° | 100% | 25% | 100% | 50% |
| Teal | #008080 | 0% | 50% | 50% | 180° | 100% | 25% | 100% | 50% |
| Cyan | #00FFFF | 0% | 100% | 100% | 180° | 100% | 50% | 100% | 100% | Aqua |
