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.
| Bootstrap software | |
|---|---|
 | |
| Genere | Framework per applicazioni web |
| Data prima versione | 19 agosto 2011 |
| Ultima versione | 5.3.3 (20 febbraio 2024) |
| Sistema operativo | Multipiattaforma (su web browser) |
| Linguaggio | CSS JavaScript HTML Sass |
| Licenza | MIT (Apache 2.0 per versioni precedenti la 3.1.0) (licenza libera) |
| Lingua | Inglese |
| Sito web | getbootstrap.com |
Origine
modificaBootstrap è 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
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
| 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 |
Note
modifica- ^ (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.
- ^ (EN) Build software better, together, su GitHub. URL consultato il 16 marzo 2021.
- ^ (EN) Mark Otto, Bootstrap 3.3.0 released, su Bootstrap Blog, 29 ottobre 2014. URL consultato il 16 marzo 2021.
- ^ (EN) Mark Otto, Bootstrap 4 alpha, su Bootstrap Blog, 19 agosto 2015. URL consultato il 16 marzo 2021.
- ^ (EN) Bootstrap 5 - mergecommit, su Github - Bootstrap. URL consultato il 30 maggio 2024.
- ^ Twitter Bootstrap 2.0.2 Documentation - BootstrapDocs, su bootstrapdocs.com. URL consultato il 15 febbraio 2021.
- ^ (EN) Sass: Syntactically Awesome Style Sheets, su sass-lang.com. URL consultato il 17 novembre 2018.
- ^ (EN) The Core Less Team, Getting started | Less.js, su lesscss.org. URL consultato il 17 novembre 2018.
- ^ (EN) Mark Otto, Jacob Thornton, and Bootstrap contributors, Reboot, su getbootstrap.com. URL consultato il 17 novembre 2018.
- ^ (EN) Mark Otto, Jacob Thornton, and Bootstrap contributors, CSS · Bootstrap, su getbootstrap.com. URL consultato il 17 novembre 2018.
- ^ ECMAScript 6: New Features: Overview and Comparison, su es6-features.org. URL consultato il 17 novembre 2018.
- ^ (EN) Mark Otto, Jacob Thornton, and Bootstrap contributors, Components · Bootstrap, su getbootstrap.com. URL consultato il 17 novembre 2018.
- ^ (EN) Mark Otto, Jacob Thornton, and Bootstrap contributors, Cards, su getbootstrap.com. URL consultato il 17 novembre 2018.
- ^ (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.
- ^ (EN) Mark Otto, Jacob Thornton, and Bootstrap contributors, Migrating to v4, su getbootstrap.com. URL consultato il 17 novembre 2018.
Altri progetti
modifica
Wikimedia Commons contiene immagini o altri file su Bootstrap
Collegamenti esterni
modifica- (EN) Sito ufficiale, su getbootstrap.com.
- Bootstrap, su packages.debian.org.
- Repository sorgenti di Bootstrap, su github.com.
- (EN) Bootstrap, su Free Software Directory.
| Controllo di autorità | GND (DE) 1145079156 |
|---|
