Share
Benvenuti in questa serie che copre l'interfaccia utente e l'infrastruttura CSS di Twitter Bootstrap (BS).
Nel mio libro, Twitter Bootstrap Affine, ho preparato le basi iniziali e ho iniziato con Bootstrap 2.
Da quando è stato rilasciato quel libro, tuttavia, Bootstrap 3 è diventato la versione mainstream.
In questa serie continueremo a costruire su questa base e ad utilizzare BS v3. Cercheremo di vedere dove sono le cose diverse e mentre esploriamo le nuove funzionalità, vedremo che una grande fetta di ciò che era presente in v2 è ancora applicabile a v3.
Se non hai ancora letto il libro su Bootstrap 2, ti incoraggio a farlo, poiché mi riferirò a esso in vari punti di questa serie.
Perché? Credo che per comprendere l'intero panorama Bootstrap, è necessario esaminarlo dall'inizio. Devi essere in grado di capire cosa si propone di raggiungere e come.
Sarai in grado di seguire solo questa serie e apprendere le basi di BS v3, ma otterrai una comprensione molto più profonda e migliore se prima leggi il libro v2.
Quindi cosa è cambiato da v2 a v3?
Parecchio.
Il principale cambiamento tra le due versioni è che v3 è ora "Mobile First". Bootstrap v2 era un kit CSS di layout reattivo, ma le sue funzionalità mobili e reattive erano sempre al secondo posto rispetto alle sue ricche funzionalità dell'interfaccia utente. Infatti, per far funzionare correttamente le cose reattive, dovevi includere un secondo file CSS il cui unico scopo era quello di abilitare le funzionalità mobili, reattive e nient'altro.
In v3 questa intera situazione è stata completamente invertita. L'intero framework ora è mobile-friendly e reattivo, e ora è necessario ulteriore lavoro per adattare i layout a formati di schermo più grandi. Non fraintendermi: non è affatto un'enorme quantità di lavoro. La maggior parte di ciò che è necessario modificare è semplicemente lo scambio di classi e la strutturazione corretta della markup HTML.
L'altro grande cambiamento riguarda la denominazione di classi e chiamate API. Molti dei nomi di classe introdotti in v2 ora sono deprecati o sono stati rinominati in qualcosa di più adatto allo scopo previsto.
C'è stato anche un grande sforzo per rinominare le classi per essere più coerenti. Ad esempio, nella v2, per gli articoli che hanno come target il colore dell'errore RED, abbiamo avuto le seguenti classi:
Accentsconagua
btn-pericolo text-error tr.error .importante .importante .errore il progresso-pericolo Ora, in v3, questi sono stati consolidati in modo che la denominazione sia simile tra tutti i componenti come segue:
btn-pericolo text-pericolo .Pericolo .Pericolo progress-bar-pericolo Come puoi vedere, la coerenza è ora un giocatore importante nelle classi v3 e molte altre modifiche simili sono state apportate all'intero framework.
Ci sono stati anche alcuni piccoli cambiamenti. Ad esempio, il modello di box utilizzato da Bootstrap ora è stato considerevolmente migliorato, con tutti gli elementi ora in uso border-box come il modello di dimensionamento della scatola CSS predefinito.
Anche il sistema di rete è stato ampliato e migliorato, e invece di essere un sistema di griglia monolitico con classi opzionali, ora è composto da quattro livelli di dimensioni della griglia specificamente rivolti a telefoni, tablet, desktop e desktop di grandi dimensioni.
Tutti gli elementi JavaScript sono ora stati denominati per ridurre il conflitto con altri codici JavaScript; gli eventi disponibili ora sono meglio nominati per riflettere il loro scopo e sono documentati molto più chiaramente.
Modals e Navbars sono stati notevolmente migliorati in termini di reattività, e insieme alle modifiche ai nomi delle classi, le classi di dimensionamento per tutti i componenti (Inc Nav Modals) sono state ora allineate.
Dal punto di vista dei componenti, alcuni dei vecchi componenti meno utilizzati sono stati deprecati e rimossi, il più importante dei quali è il Fisarmonica componente. Ma non disperare: la fisarmonica è stata sostituita con una nuova di zecca pieghevole-panel componente che è molto più flessibile rispetto al suo predecessore.
Abbiamo anche un nuovo, stretto jumbotron, nuovo pannello tipi, gruppi di elenchi e molto altro.
Alla fine, l'unica cosa cambia tutti noterà è l'aspetto grafico: TWB V3 è piatto. Ha una singola interfaccia colorata, nuova, ma con angoli arrotondati piatti.
Le classi al passaggio del mouse non hanno più effetti graduali e le barre di avanzamento e i pulsanti non sembrano più semi-3D come nella v2. Invece, ciò che i maintainer di Twitter Bootstrap hanno deciso di fare è rendere più semplice la personalizzazione dell'aspetto degli elementi presenti nel CSS.
I manutentori hanno persino reso disponibile un tema "Bootstrap" che fa apparire la v3 come il design originale della v2 per iniziare. Nell'ultima parte di questa serie, ti mostrerò quanto sia semplice ora ignorare le varie classi e mostrarti come rivedere il tema piatto per assumere il tuo aspetto personale.
Per ora però, se vuoi la v2 experience, dovrai assicurarti di includere anche il file CSS appropriato come richiesto. Se vuoi mantenere il default v3, non hai bisogno di nulla in più.
Quando BS2 è stato rilasciato per la prima volta, l'unico modo per ottenerlo era tramite un download dal sito web del progetto. Questo è stato ampiamente trattato nel primo libro con una discussione approfondita su quali erano esattamente i file nel file zip e perché.
Dato che così tante persone stavano usando Bootstrap, non ci è voluto molto tempo prima che fosse reso disponibile gratuitamente su un CDN dalle persone che gestiscono MaxCDN. Questa tradizione è continuata nella base di codice v3 e ora è possibile ottenere semplicemente l'installazione standard v3 scelta utilizzando i seguenti tag di script HTML:
Se utilizzi le versioni CDN, ricorda che dovrai anche assicurarti di includere una copia recente di JQuery; nessuna delle funzionalità di BS3 JS funzionerà a meno che tu non lo faccia.
Oltre al collegamento CDN, ora è disponibile anche un download diretto sul sito getbootstrap.com, non solo per il pacchetto standard JavaScript e CSS come descritto nel libro precedente, ma anche un collegamento diretto a un file zip dell'originale " Meno "fonti" e una conversione a "Sass" per quelle persone che vorrebbero poter includere una versione completamente personalizzabile del kit nel proprio sistema di build usando strumenti come Grunt per automatizzare le cose.
Oltre alle nuove fonti, ora puoi anche utilizzare Bower per installare tutto ciò che ti serve utilizzando quanto segue dalla riga di comando della cartella del progetto:
bower installa bootstrap
Bower è un sistema di impalcature e pacchetti HTML progettato per automatizzare gran parte della piastra di applicazione della caldaia. Non hai bisogno di capirlo per capire BS v3, ma una rapida ricerca su Google per "Bower" farà apparire molti riferimenti per approfondire la tua comprensione.
In una nota simile, BS v3 può anche essere installato utilizzando il gestore pacchetti NuGet se si sta lavorando in Visual Studio. Come Bower, questo automatizzerà gran parte del processo di installazione e configurazione dei file richiesti. Fai attenzione però: ci sono molti pacchetti Bootstrap disponibili in NuGet, alcuni dei quali ti causano più lavoro di quello che ti salvano.
Infine, il personalizzatore TWB è ancora disponibile. È stato notevolmente ristrutturato e ricostruito per offrire più opzioni e un aspetto più semplice e intuitivo di ciò che stai cambiando e perché.
In effetti, ora è così facile cambiare le cose usando il customizer che il progettista o il team di progettazione può fare il 90 percento del lavoro necessario per impostare i colori e il marchio del download prima che i file richiesti siano anche scaricati. Ciò consente al reparto di progettazione di iniziare immediatamente a scegliere il colore e il layout, mentre si lavora sui layout di pagina e sul codice aggiuntivo per l'interattività richiesta. Quindi, tutto ciò che serve è che tu possa semplicemente sostituire i tuoi file predefiniti con i file forniti dai tuoi designer, e dovrebbe verificarsi un cambiamento istantaneo del tema.
Ufficialmente, BS v3 supporta solo l'ultimo round di browser compatibili con HTML 5 e Internet Explorer 10 e versioni successive.
In realtà, il framework supporta anche IE8 e IE9; tuttavia, alcune funzioni di CSS3 e HTML5 non funzionano come previsto. In particolare, se vuoi che gli elementi reattivi funzionino correttamente, dovrai usarli respond.js, che è possibile scaricare da questo repository GitHub.
Una volta aggiunto rispondere per il tuo progetto, è fondamentalmente solo un'aspettativa generale di ciò che è stato e non è stato aggiunto ai vari browser, in momenti diversi.
Le parti che verranno maggiormente notate come mancanti sono le seguenti:
Per IE8:
border-radius è non supportato.box-ombra è non supportato.trasformare è non supportato.transizione è non supportato.segnaposto il testo è non supportato.Ciò significa essenzialmente che il testo segnaposto negli elementi di input non verrà visualizzato e qualsiasi cosa che utilizza angoli arrotondati o ombre esterne o che ha qualsiasi tipo di transizione o trasformazione sull'elemento non verrà visualizzato correttamente.
Per IE9:
border-radius è supportato.box-ombra è supportato.trasformare è supportato (ma solo con -Signorina prefisso).transizione è non supportato.segnaposto il testo è non supportato.Le cose sono leggermente migliorate rispetto a IE9: gli angoli arrotondati e le ombreggiature ora vanno bene e anche le trasformazioni funzioneranno, purché abbiano anche un -Signorina versione prefisso.
Transizioni e segnaposto sugli elementi di input, tuttavia, sono ancora purtroppo mancanti.
La matrice di supporto ufficiale per la versione corrente di BS3 nei browser correnti è simile alla seguente:
| Cromo | Firefox | IE | musica lirica | Safari | |
|---|---|---|---|---|---|
| androide | ✓ | ✗ | ✗ | ||
| iOS | ✓ | ✗ | ✓ | ||
| Mac OS X | ✓ | ✓ | ✓ | ✓ | |
| finestre | ✓ | ✓ | ✓ | ✓ | ✗ |
Se stai prendendo di mira IE9 e IE8, e stai usando respond.js per sostenere tali sforzi, quindi si prega di essere consapevoli dei seguenti punti:
Dovrai fare riferimento a respond.js documenti se stai ospitando CSS, ecc. su un dominio diverso (ad esempio un CDN) per mitigare i problemi interdominio.
La sicurezza del browser ti causerà problemi file:// e @importare riferimenti alle risorse basate.
Specifico a @importare è questo respond.js non può leggere correttamente le regole, che è importante per gli utenti di Drupal, come Drupal usa @importare abbastanza pesantemente.
Le modalità di compatibilità IE precedenti impediranno il corretto funzionamento di Bootstrap, non solo con respond.js, quindi fai attenzione se stai testando la retrocompatibilità usando un IE moderno in modalità emulazione - i risultati saranno più probabili non sii quello che ti aspetti.
Questo tutorial rappresenta un capitolo di Bootstrap 3 in modo succinto, un eBook gratuito del team di Syncfusion.
