Bootstrap (struttura)

Bootstrap
Informazione Generale
sviluppatore	Twitter
Versione iniziale	19 agosto 2011
Licenza	Licenza MIT ( Licenza Apache 2.0 precedente alla 3.0.1)
Stato attuale	Attivo
Informazioni tecniche
Previsto in	HTML , CSS , LESS (v3), Sass (v4) e JavaScript
Versioni
Ultima versione stabile	5.0.2 ( info ) (22 giugno 2021 (1 anno, 3 mesi e 25 giorni))
Ultima versione nei test	2021 ()
cronologia delle versioni	stabile 5.2.019 luglio 2022 5.1.39 ottobre 2021 5.1.25 ottobre 2021 5.1.17 settembre 2021 5.1.04 agosto 2021 5.0.222 giugno 2021 5.0.113 maggio 2021 5.0.05 maggio 2021 4.6.019 gennaio 2021 4.5.313 ottobre 2020 4.0.018 gennaio 2018 3.3.725 luglio 2016 3.3.624 novembre 2015 3.3.515 giugno 2015 3.3.416 marzo 2015 3.3.219 gennaio 2015 3.3.112 novembre 2014 3.3.029 ottobre 2014 3.2.026 giugno 2014 3.1.113 febbraio 2014 3.1.030 gennaio 2014 3.0.35 dicembre 2013 3.0.26 novembre 2013 3.0.130 ottobre 2013 3.0.019 agosto 2013 2.3.227 luglio 2013 2.3.11 marzo 2013 2.3.018 luglio 2013 2.2.218 luglio 2013 2.2.118 luglio 2013 2.2.018 luglio 2013 2.1.118 luglio 2013 2.1.018 luglio 2013 2.0.41 giugno 2012 2.0.325 aprile 2012 2.0.218 luglio 2013 2.0.118 luglio 2013 2.0.01 febbraio 2012 1.4.018 luglio 2013 1.3.018 luglio 2013 1.2.018 luglio 2013 1.1.118 luglio 2013 1.1.018 luglio 2013 1.0.018 agosto 2011                Prove 5.0.0-beta210 febbraio 2021 5.0.0-beta17 dicembre 2020
Collegamenti
Sito ufficiale repository di codice

Bootstrap è una libreria o toolkit multipiattaforma open source per la progettazione di siti Web e applicazioni Web . Contiene modelli di progettazione con tipografia, moduli, pulsanti, caselle, menu di navigazione e altri elementi di progettazione basati su HTML e CSS , nonché estensioni JavaScript aggiuntive . A differenza di molti framework web, si occupa solo di sviluppo front-end .

Bootstrap è il secondo progetto più importante su GitHub ed è utilizzato dalla NASA e MSNBC , tra le altre organizzazioni. ]

Origine

Bootstrap, originariamente chiamato Twitter Blueprint , è stato sviluppato da Mark Otto e Jacob Thornton di Twitter, come framework per incoraggiare la coerenza tra gli strumenti interni. Prima di Bootstrap, diverse librerie venivano utilizzate per lo sviluppo dell'interfaccia utente, causando incoerenze e pesanti carichi di lavoro di manutenzione. Secondo lo sviluppatore di Twitter Mark Otto, di fronte a queste sfide:

"... io e un piccolissimo gruppo di sviluppatori ci siamo riuniti per progettare e costruire un nuovo strumento interno e abbiamo visto l'opportunità di fare qualcos'altro. Attraverso quel processo, ci siamo visti costruire qualcosa di molto più sostanziale di un altro strumento interno. Mesi poi abbiamo finito con una prima versione di Bootstrap come un modo per documentare e condividere modelli di progettazione e risorse comuni all'interno dell'azienda".

Marco Otto ]

Il primo sviluppo in condizioni reali si è verificato durante il primo " Hackweek " di Twitter. ​ Mark Otto ha mostrato ad alcuni colleghi come accelerare lo sviluppo dei loro progetti con l'aiuto dello strumento di lavoro. Di conseguenza, dozzine di temi sono stati introdotti nel framework.

Nell'agosto 2011, Twitter ha rilasciato Bootstrap come open source. Nel febbraio 2012 è diventato il progetto di sviluppo più popolare su GitHub.

Versioni

Versioni
Versione 1	v1.4.0, v1.3.0, v1.2.0, v1.1.1, v1.1.0, v1.0.0
versione 2	v2.3.2 , v2.3.1, v2.3.0, v2.2.2, v2.2.1, v2.2.0, v2.1.1, v2.1.0, v2.0.4, v2.0.3, v2.0.2, v2.0.1, v2. 0.0
versione 3	v3.3.7 , v3.3.6, v3.3.5, v3.3.4, v3.3.2, v3.3.1, v3.3.0, v3.2.0, v3.1.1, v3.1.0, v3.0.3, v3.0.2, v3. 0.1, v3.0.0
versione 4	v4.6.0 , v4.5.3, v4.5.2, v4.5.1, v4.5.0, v4.4.1, v4.4.0, v4.3.1, v4.3.0, v4.2.1, v4.2.0, v4.1.3, v4. 1.2, v4.1.1, v4.1.0, v4.0.0
versione 5	v5.0.1, v5.0.0 -beta2 , v5.0.0-beta1, v5.0.0-alpha3, v5.0.0-alpha2, v5.0.0-alpha1

Caratteristiche

Bootstrap ha un supporto relativamente incompleto per HTML5 e CSS3 , ma è compatibile con la maggior parte dei browser web. Le informazioni di base sulla compatibilità del sito Web o dell'app sono disponibili per tutti i dispositivi e browser. Esiste un concetto di compatibilità parziale che rende le informazioni di base di un sito Web disponibili a tutti i dispositivi e browser. Ad esempio, le proprietà introdotte in CSS3 per angoli arrotondati, gradienti e ombre vengono utilizzate da Bootstrap nonostante la mancanza di supporto nei browser meno recenti. Ciò estende la funzionalità dello strumento, ma non è necessario per il suo utilizzo.

Dalla versione 2.0 supporta anche i progetti web reattivi . Ciò significa che il design grafico della pagina viene adattato dinamicamente, tenendo conto delle caratteristiche del dispositivo utilizzato (computer, tablet o telefoni cellulari).

Funzione e struttura

Esempio di una pagina web che utilizza Bootstrap Framework renderizzata in Mozilla Firefox

Bootstrap è modulare e consiste essenzialmente in una serie di fogli di stile LESS che implementano la varietà di componenti dello strumento. Un foglio di stile chiamato bootstrap.less contiene i componenti del foglio di stile. Gli sviluppatori possono personalizzare il file Bootstrap stesso, selezionando i componenti che desiderano utilizzare nel loro progetto.

Le impostazioni sono possibili in misura limitata tramite un foglio di stile di configurazione centrale. Cambiamenti più profondi sono resi possibili dalle dichiarazioni LESS.

L'uso del linguaggio dei fogli di stile LESS consente l'uso di variabili, funzioni e operatori, selettori annidati e classi mixin.

Dalla versione 2.0, le impostazioni di Bootstrap hanno anche un'opzione speciale "Personalizza" nella documentazione. D'altra parte, gli sviluppatori scelgono in una forma i componenti e le impostazioni desiderati e, se necessario, i valori delle varie opzioni in base alle proprie esigenze. Il pacchetto conseguentemente generato include già il foglio di stile CSS precedentemente compilato.

Sistema a griglia e design reattivo

Bootstrap viene fornito con un layout standard a griglia larga 940 pixel. In alternativa, lo sviluppatore può utilizzare un layout a larghezza variabile. Per entrambi i casi, lo strumento ha quattro varianti per utilizzare risoluzioni e tipi di dispositivi diversi: telefoni cellulari, formato verticale e orizzontale, tablet e computer a bassa e alta risoluzione (wide screen). Questo regola automaticamente la larghezza delle colonne.

Comprendere il foglio di stile CSS

Bootstrap fornisce una serie di fogli di stile che forniscono definizioni di stile di base per tutti gli elementi HTML. Ciò conferisce uniformità al browser e al sistema di larghezza, conferisce un aspetto moderno alla formattazione di elementi di testo, tabelle e moduli.

Componenti riutilizzabili

Oltre ai normali elementi HTML, Bootstrap contiene altri elementi di interfaccia comunemente usati. Ciò include pulsanti con funzionalità avanzate (ad es. gruppo di pulsanti o pulsanti con opzione a discesa, elenchi di navigazione, etichette orizzontali e verticali, percorso di navigazione, impaginazione, ecc.), etichette, funzionalità avanzate di miniature tipografiche, formattazione per messaggi di avviso e barre di avanzamento.

Plugin JavaScript

I componenti JavaScript per Bootstrap sono basati sulla libreria JavaScript jQuery . I plugin si trovano nello strumento plugin jQuery . Forniscono ulteriori elementi dell'interfaccia utente come finestre di dialogo, descrizioni comandi e caroselli. Inoltre estendono la funzionalità di alcuni elementi dell'interfaccia esistenti, inclusa ad esempio una funzione di completamento automatico per i campi di input. La versione 2.0 supporta i seguenti plug-in JavaScript : Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel e Typeahead.

È inoltre disponibile un'implementazione Bootstrap che utilizza il toolkit Dojo . Si chiama Dojo Bootstrap ​ ed è un port dei plug-in Bootstrap di Twitter. Utilizza il codice Dojo al 100% e ha il supporto AMD ( Definizione del modulo asincrono ).

Storia

Primi inizi

Dopo alcuni mesi di sviluppo da parte di un piccolo gruppo, molti sviluppatori di Twitter hanno iniziato a contribuire al progetto come parte di un hackweek , una settimana in stile hackathon per il team di sviluppo di Twitter. È stato rinominato da Twitter Blueprint a Bootstrap e rilasciato come progetto open source il 19 agosto 2011. Mark Otto, Jacob Thornton e un piccolo gruppo di sviluppatori principali, nonché una vasta comunità di contributori.

Bootstrap 2 e 3

Il 31 gennaio 2012 è stato rilasciato Bootstrap 2, aggiungendo il supporto integrato per glyphicons , diversi nuovi componenti e modifiche a molti dei componenti esistenti. Questa versione supporta il responsive web design, il che significa che il layout delle pagine web si adatta dinamicamente, tenendo conto delle caratteristiche del dispositivo utilizzato (sia esso desktop, tablet o cellulare). La successiva versione principale, Bootstrap 3, è stata rilasciata il 19 agosto 2013. Ha riprogettato i componenti per utilizzare un design piatto e un approccio mobile-first. ]

Bootstrap 4

Mark Otto ha annunciato Bootstrap 4 il 29 ottobre 2014. La prima versione alpha di Bootstrap 4 è stata rilasciata il 19 agosto 2015. La prima versione beta è stata rilasciata il 10 agosto 2017. Mark ha sospeso il lavoro su Bootstrap 3 il 6 settembre 2016 per liberare tempo per lavorare su Bootstrap 4. Bootstrap 4 è stato terminato il 18 gennaio 2018. ]

Le modifiche importanti includono:

• Riscrittura del codice principale
• Sostituire Less con Sass
• Aggiunta di Reboot, una raccolta di modifiche CSS specifiche dell'elemento in un unico file, basato su Normalize
• Elimina il supporto per IE8, IE9 e iOS 6
• Supporto per casella flessibile CSS
• Aggiungi opzioni di personalizzazione della navigazione
• Aggiunta di utilità di dimensioni e spaziatura ragionevoli
• Passa dall'unità pixel in CSS a root ems
• Aumentata la dimensione globale del carattere da 14px a 16px per migliorare la leggibilità
• Rilascia il pannello, la miniatura, il localizzatore e i componenti del pozzo
• Drop Icon Font Glyphicons
• Numero elevato [quantificare] di classi di utilità
• Stile dei moduli, pulsanti, menu a discesa, oggetti multimediali e classi immagine migliorati

Bootstrap 4 è compatibile con le ultime versioni di Google Chrome , Firefox , Internet Explorer , Opera e Safari (tranne Windows). Inoltre, supporta IE10 e l'ultima versione di supporto esteso (ESR) di Firefox . ]

Bootstrap 5 Alpha

Bootstrap 5 Alpha è stato ufficialmente rilasciato il 16 giugno 2020. ]

Le modifiche importanti includono ​:

• Rilascia jQuery a favore di JavaScript vanilla
• Riscrivi la griglia per supportare le colonne al di fuori delle righe e delle grondaie sensibili
• Migra la documentazione da Jekyll a Hugo
• Elimina il supporto per IE10 e IE11
• Spostamento dell'infrastruttura di test da QUnit a Jasmine
• Aggiungi un set personalizzato di icone SVG
• Aggiungi proprietà CSS personalizzate
• API migliorata
• Sistema a griglia migliorato
• Documenti di personalizzazione migliorati
• modulistica aggiornata

In totale sono state rilasciate 3 versioni di Bootstrap Alpha ]

Bootstrap 5 Beta

Bootstrap 5 Beta è stato ufficialmente rilasciato il 7 febbraio 2021, tre settimane dopo il rilascio della terza alpha.

La versione 5 Beta 2 è attualmente l'ultima versione del pacchetto.

Le modifiche importanti includono ​:

• Supporto RTL - visualizzazione del testo "da destra a sinistra" per es. Es. lingue arabe
• Classi rinominate per le proprietà logiche
• Aggiorna a Popper.js v2
• Attributi dei dati con spazio dei nomi
• Miglioramenti a JavaScript e correzioni di bug.
• API migliorata: stati nelle utilità

Modifiche in corso di valutazione ​:

• Sistema di moduli Sass
• Maggiore utilizzo delle proprietà personalizzate CSS
• Incorpora SVG in HTML anziché CSS

Primi casi d'uso

della versione Bootstrap 5 Beta apparsa pochi giorni dopo il rilascio ufficiale, le più importanti includono:

• MDB 5 - Kit UI per la progettazione dei materiali per Bootstrap 5. ]

MDB è stato anche il primo a integrare l'ultima versione di Bootstrap con le popolari tecnologie front-end come Angular , React e Vue . ]

Bootstrap 5

La versione 5 di Bootstrap è stata annunciata da Mark Otto il 21 dicembre 2018 e, dopo 3 versioni alpha e 3 beta, è stata ufficialmente rilasciata il 5 maggio 2021. Giorni dopo, il 13 maggio, è stata rilasciata la prima patch rilasciato, v5.0.1, che sarebbe l'ultima versione stabile.

Le nuove modifiche e integrazioni sono state le seguenti:

• Nuovo menu dei componenti "fuori tela".
• Passare da jQuery a Vanilla JavaScript .
• Migrazione della documentazione da Jekyll a Hugo .

• Il supporto è stato ritirato per Internet Explorer 10 e 11 , Microsoft Edge Legacy e le versioni seguenti: Firefox 60, Safari 10 e Chrome 60.

• Il test dell'infrastruttura passa da QUnit a Jasmine.
• Inserimento di un nuovo set di icone SVG e nuove proprietà CSS.
• API migliorata .
• Sistema a griglia migliorato.
• Creazione della sezione modulistica, con nuovi moduli inseriti.
• Supporto RTL (da destra a sinistra) per i sistemi di scrittura da destra a sinistra.
• Realizzazione Dart Sass.

Utilizzo

Per utilizzare Bootstrap in una pagina HTML , lo sviluppatore deve solo scaricare il foglio di stile CSS di Bootstrap e collegarlo ad esso nel file HTML . Un'altra opzione sarebbe quella di compilare il file CSS dal foglio di stile LESS o SASS scaricato . Questo può essere fatto con un compilatore speciale.

Se lo sviluppatore desidera utilizzare anche i componenti JavaScript, deve essere referenziato insieme alla libreria jQuery nel documento HTML.

L'esempio seguente illustra come funziona. Il codice HTML definisce un semplice modulo di ricerca e un elenco di risultati in forma tabellare. La pagina è composta da elementi HTML 5 regolari e semantici e da alcune informazioni aggiuntive sulla classe CSS secondo la documentazione di Bootstrap. La figura mostra la rappresentazione del documento in Mozilla Firefox 10 .

<!DOCTYPE html> 
< html > 
  < head > 
    < title > Esempio Bootstrap </ title >

    <!-- Bootstrap CSS --> 
   < link  rel = "stylesheet"  href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"  integrity = "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+ PmSTsz /K68vbdEjh4u"  crossorigin = "anonimo" >

   < meta  http-equiv = "Tipo di contenuto"  content = "testo/html; charset=utf-8" >

  </ testa >
 
  < body > 
    < div  class = "container" > 
      < h1 > Cerca </ h1 > 
      < label > Esempio di un semplice modulo di ricerca </ label >

      <!-- Modulo di ricerca con un campo di input e un pulsante --> 
      < form  class = "well form-search" > 
        < input  type = "text"  class = "input-medium search-query" > 
        < button  type = " submit"  class = "btn btn-primary" > Cerca </ button > 
      </ form >
 
      < h2 > Risultati </ h2 >
 
      <!-- Tabella con celle e cornice di colore di sfondo alternati --> 
      < table  class = "table table-striped table-bordered" > 
        < thead > 
          < tr > 
            < th > # </ th > 
            < th > Titolo </ th > 
          </ tr > 
        </ thead > 
        < tbody > 
          < tr > 
            < td > 1 </ td > 
            < td > Lorem ipsum pain sit amet. </ td > 
          </ tr > 
          < tr > 
            < td > 2 </ td > 
            < td > Consetetur sadipscing elitr. </ td > 
          </ tr > 
          < tr > 
            < td > 3 </ td > 
            < td > A vero eos et accusam. </ td > 
          </ tr > 
        </ tbody > 
      </ table > 
    </ div >

    <!-- jQuery --> 
    < script  src = "https://code.jquery.com/jquery-2.2.4.min.js" ></ script >

    <!-- Bootstrap JS --> 
    < script  src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"  integrità = "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"  crossorigin = "anonimo" ></ script > 
  </ corpo > 
</ html >

Creazione di una griglia di layout fissa

    < div  class = "riga" > 
      < div  class = "col-md-4" > ... </ div > 
      < div  class = "col-md-8" > ... </ div > 
    </ div >

Creazione di una griglia di layout fissa con una griglia di layout fluida nidificata

    < div  class = "riga" > 
      < div  class = "col-md-12" > 
        < div  class = "4" > ... </ div > 
        < div  class = "4" > ... </ div > 
        < div  class = "4" > ... </ div > 
      </ div > 
      < div  class = "col-md-8" > ... </ div > 
    </ div >

Bibliografia

• Angel Escobar, Alvarez Carmona e Alvarez Ocampo, David, Juan Esteban e Daniel (14 agosto 2019). Twitter Bootstrap Web Development (1a edizione). Editoria Packt . p. 100. ISBN  978-1849518826 . Archiviato dall'originale il 25 ottobre 2013 . Estratto il 17 febbraio 2013 . 

Collegamenti esterni

• esempio bootstrap con php
• Bootstrap - Sito ufficiale
• Bootstrap in spagnolo - Contenuto identico al sito ufficiale, tradotto e costantemente aggiornato dal progetto Esdocu.
• Crea pagine Web pulite con Twitter Bootstrap - Un breve articolo su CodeProject che mostra come iniziare con la libreria
• BootTheme: Web Designer e Generatore di temi per Twitter Bootstrap - Strumento online per progettare pagine Web e generare temi
• Bootstrap in spagnolo - la traduzione è stata approvata dal sito ufficiale Bootstrap e
• Bootstrap 3, il manuale ufficiale in spagnolo. Traduttore: Javier Eguiluz
• Bootstrap UI Kit - Modelli di pagina Bootstrap reattivi, layout, componenti e widget, puoi creare rapidamente un sito Web