Bootstrap (framework)

toolkit per il design responsivo

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.

Bootstrap
software
Logo
Logo
GenereFramework per applicazioni web
Data prima versione19 agosto 2011
Ultima versione5.3.3 (20 febbraio 2024)
Sistema operativoMultipiattaforma (su web browser)
LinguaggioCSS
JavaScript
HTML
Sass
LicenzaMIT (Apache 2.0 per versioni precedenti la 3.1.0)
(licenza libera)
LinguaInglese
Sito webgetbootstrap.com

Origine

modifica

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[2]. 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[3]. La prima versione alpha di Bootstrap 4 è stata distribuita il 19 agosto 2015[4].

Bootstrap 5 è stato rilasciato il 21 maggio 2021[5].

Caratteristiche

modifica
 
Esempio di utilizzo di Twitter Bootstrap[6]

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[7] invece di LESS[8] e di Reboot.css[9] invece di Normalize.css[10] per la gestione dinamica organica e dinamica dei CSS
  • Tutti i plugin JavaScript sono stati resi compatibili con ES6[11] e risultano più veloci e leggeri
  • Sostituzione dell'oggetto Panel[12] con Cards[13], che risultano più flessibili e potenti ma richiedono ovviamente la riscrittura di codici nati per Bootstrap 3
  • Eliminazione dei Glyphicons[14] 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[15] 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% 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% 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% 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% 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
  1. ^ (EN) Mark Otto, Bootstrap in A List Apart No. 342, su @mdo (sito personale di Mark Otto), 17 gennaio 2012. URL consultato il 9 luglio 2015.
  2. ^ (EN) Build software better, together, su GitHub. URL consultato il 16 marzo 2021.
  3. ^ (EN) Mark Otto, Bootstrap 3.3.0 released, su Bootstrap Blog, 29 ottobre 2014. URL consultato il 16 marzo 2021.
  4. ^ (EN) Mark Otto, Bootstrap 4 alpha, su Bootstrap Blog, 19 agosto 2015. URL consultato il 16 marzo 2021.
  5. ^ (EN) Bootstrap 5 - mergecommit, su Github - Bootstrap. URL consultato il 30 maggio 2024.
  6. ^ Twitter Bootstrap 2.0.2 Documentation - BootstrapDocs, su bootstrapdocs.com. URL consultato il 15 febbraio 2021.
  7. ^ (EN) Sass: Syntactically Awesome Style Sheets, su sass-lang.com. URL consultato il 17 novembre 2018.
  8. ^ (EN) The Core Less Team, Getting started | Less.js, su lesscss.org. URL consultato il 17 novembre 2018.
  9. ^ (EN) Mark Otto, Jacob Thornton, and Bootstrap contributors, Reboot, su getbootstrap.com. URL consultato il 17 novembre 2018.
  10. ^ (EN) Mark Otto, Jacob Thornton, and Bootstrap contributors, CSS · Bootstrap, su getbootstrap.com. URL consultato il 17 novembre 2018.
  11. ^ ECMAScript 6: New Features: Overview and Comparison, su es6-features.org. URL consultato il 17 novembre 2018.
  12. ^ (EN) Mark Otto, Jacob Thornton, and Bootstrap contributors, Components · Bootstrap, su getbootstrap.com. URL consultato il 17 novembre 2018.
  13. ^ (EN) Mark Otto, Jacob Thornton, and Bootstrap contributors, Cards, su getbootstrap.com. URL consultato il 17 novembre 2018.
  14. ^ (CS) Design and content - Jan Kovařík, Code - Petr Urbánek, Sharp and clean symbols - GLYPHICONS, su glyphicons.com. URL consultato il 17 novembre 2018.
  15. ^ (EN) Mark Otto, Jacob Thornton, and Bootstrap contributors, Migrating to v4, su getbootstrap.com. URL consultato il 17 novembre 2018.

Altri progetti

modifica

Collegamenti esterni

modifica
Controllo di autoritàGND (DE1145079156
  Portale Internet: accedi alle voci di Wikipedia che trattano di internet