Bootstrap 3 succintamente personalizzazione di Bootstrap 3

E così finalmente arriviamo all'ultimo tutorial della serie, che ti mostrerà come creare set di colori personalizzati.

Se ti ricordi di nuovo all'inizio, quando stavamo attraversando i principali cambiamenti, ho detto che gli autori di BS avevano fornito un file aggiuntivo per far sembrare BS3 proprio come BS2, piuttosto che usare il suo aspetto piatto.

In questa serie, abbiamo utilizzato l'aspetto flat di default BS3, ma se scarichi la versione JavaScript preconfigurata di BS3 dal sito Web Bootstrap, troverai un nuovo file all'interno dell'archivio scaricabile chiamato bootstrap-theme.css. 

Se colleghi questo file al tuo progetto subito dopo l'inclusione del file core bootstrap.css, scoprirai che anche se stai usando la nuova BS3, l'aspetto della tua applicazione somiglia ancora a BS2.

Gli autori hanno capito che uno dei principali ostacoli all'adozione di BS3 in nuove applicazioni era l'incapacità di modellarlo in modo personalizzato, ma con facilità.

Se fossi un utente di LESS, o anche di Sass (dato che BS3 ora ha collegamenti Sass), allora questo non era un problema. Hai semplicemente aperto le sorgenti LESS, ottimizzato le variabili e i Mixin necessari, e fatto scorrere le cose attraverso il compilatore LESS per ottenere il tuo nuovo script CSS.

Sfortunatamente, non tutti hanno usato MENO; infatti, molti sviluppatori e progettisti avevano solo la possibilità di scaricare e includere i semplici vecchi file precompilati CSS e JavaScript, quindi era necessario trovare un modo migliore.

La prima modifica è stata l'apertura dell'intero less di risorse per uno strumento di personalizzazione in-page direttamente sul sito principale di Bootstrap, ma questa non è una novità; sei stato in grado di usare questa pagina prima in un modo limitato. Con BS3, tuttavia, lo strumento di personalizzazione Minore ha subito una revisione completa e ora è possibile ridefinire qualunque cosa che BS3 utilizza, dalle dimensioni dei caratteri e dai caratteri tipografici, fino alle dimensioni della griglia, ai punti trigger e ai set di colori contestuali di base.

Di fatto, ora non c'è nulla che non possa essere cambiato prima di decidere di scaricare il nuovo CSS personalizzato, come mostra l'immagine seguente:

Screenshot della metà superiore del nuovo strumento di personalizzazione

A causa delle dimensioni dello strumento, è impossibile mostrare l'intero argomento in questo tutorial, ma è abbastanza facile accedervi. Basta andare sul sito Web Bootstrap e fare clic personalizzare nella barra dei menu in alto. Vedrai anche che hai molte altre opzioni, come ad esempio plug-in e toolkit JavaScript da includere, quali componenti includere e lo stile di base che potresti non voler.

Ad esempio, se tutto ciò che si desidera utilizzare è il sistema di griglia e nient'altro, è sufficiente selezionare solo il sistema di griglia e deselezionare tutti gli altri componenti.

Il sito BS3 genererà quindi solo il codice richiesto da includere e non di più. Questo è un vantaggio per coloro che si lamentano che tutti i siti Bootstrap hanno lo stesso aspetto, perché significa che il tuo sito non deve assolutamente avere lo stesso aspetto del resto: puoi semplicemente usare i bit che ti servono e usare le tue cose per tutto il resto.

Esistono altri due modi per personalizzare la tua build. Il primo è prendere il foglio di stile CSS 'bootstrap' addizionale, fare una copia e poi cambiare gli stili come meglio credi. Non è così facile come usare gli strumenti di personalizzazione, ma non è altrettanto difficile come l'alternativa.

La maggior parte dei nomi delle classi e delle impostazioni che vorresti cambiare per timbrare il tuo marchio personale in BS3 sono già separati nel tema BS2, quindi il modo più veloce per sperimentare è semplicemente quello di mettere insieme una pagina di prototipazione con i controlli e gli elementi principali vuoi cambiare e quindi collegare la tua copia del tema BS2.

Se stai usando Nodo e qualcosa come Bower, diventa ancora più semplice, perché puoi usare la ricarica live, quindi guarda la tua pagina di esempio cambiare quasi in tempo reale mentre modifichi la tua versione personalizzata del foglio del tema.

Il secondo modo è leggermente più coinvolto e, come descritto nei documenti BS3, è disponibile in due versioni: personalizzazioni leggere e personalizzazioni pesanti.

Un esempio di personalizzazione della luce è l'aggiunta di una classe di colori contestuale all'elemento button. Ad esempio, se si desidera aggiungere btn-sky a fianco del btn-info, btn-primaria, classi ecc., puoi definire un singolo foglio di stile per contenere le seguenti regole:

.btn-sky, .btn-sky: hover, .btn-sky: active color: # 000000; text-shadow: 0 -1px 0 rgba (0, 0, 0, 2); background-color: # AAD4FF; bordo: 1px solido nero;  .btn-sky background-repeat: repeat-x; background-image: linear-gradient (in alto, # 00FFFF 0%, # FFFF00 100%);  .btn-sky: hover background-position: 0 -10px; 

Quando aggiunto e collegato correttamente, dovrebbe assomigliare a questo: 

Output da codice di esempio, se utilizzato con l'esempio di personalizzazione

Se utilizzato con un normale tag button nel modo seguente:

My Sky Button 

La parte più difficile dell'uso di questo metodo è passare attraverso i fogli di stile CSS di base per trovare i nomi che si desidera sovrascrivere; non è esattamente difficile, solo prolisso.

Quando ne hai uno come il pulsante qui sopra, o hai trovato e copiato un avviso, pannello, elenco o altra classe, puoi facilmente creare un modello che può essere riutilizzato ogni volta che vuoi aggiungere una classe personalizzata genere.

Le personalizzazioni pesanti non sono molto diverse dalle personalizzazioni della luce; la principale differenza è che si ignora l'intera classe.

Quindi, per esempio, trovi tutte le classi correlate a btn, copiarli, modificarli e includerli separatamente.

La nuova architettura all'interno del framework BS3 ora significa che una volta conosci i selettori di destinazione e i loro fratelli, la creazione di un override è facile. Come ho già sottolineato, il file del tema bootstrap contiene già molto di ciò che potresti voler modificare in ogni caso, e se questa non è un'opzione, prova siti come Bootswatch.com:

Schermata del tema dolce e ciliegio di Bootswatch.com

Molti altri hanno migliaia di temi tra cui scegliere, sia gratuiti che a pagamento, quindi non ci sono scuse per il tuo sito Bootstrap che ha lo stesso aspetto di tutti gli altri.

Conclusione

Spero che questa serie ti sia piaciuta e che ti aiuti a diventare uno sviluppatore migliore con Bootstrap 3. In questo nuovo mondo di responsive web design, BS3 è un framework che non dovrebbe essere preso alla leggera: rappresenta una grande ricerca di uno dei le più grandi società di social media esistenti e vengono utilizzate per alimentare la maggior parte dei loro siti pubblici.

Se vuoi contattarmi e farmi qualche domanda sul libro, generalmente posso essere trovato su Twitter come @shawty_ds. Puoi anche trovarmi generalmente su LinkedIn o nel gruppo di utenti di Linked.NET (Lidnug) che aiuto a eseguire lì.

Alla prossima, mantieni la calma e procedi con il bootstrap.

Questo tutorial rappresenta un capitolo di Bootstrap 3 in modo succinto, un eBook gratuito del team di Syncfusion.