Personalizzazione dei layout Bootstrap Tendenze, strumenti e framework

bootstrap è attualmente il struttura numero uno front-end e facilmente il il modo più veloce per creare layout. È in giro da anni e gli sviluppatori di terze parti hanno persino pubblicato le proprie risorse online. Queste risorse vanno da temi gratuiti a plugin e framework dettagliati.

In questo articolo, vorrei condividere una manciata di questi risorse e buone pratiche per sviluppatori che vogliono andare oltre con Bootstrap.

Tutti i le risorse in questo post sono gratuite, quindi puoi usarli come meglio credi. Anche se non hai mai usato Bootstrap, troverai sicuramente qualcosa che ti aiuterà a iniziare.

Restyling con Bootstrap

La libreria Bootstrap predefinita viene fornita con la sua proprio design unico sembra fantastico È ampiamente conosciuto in tutto il Web e puoi facilmente sapere quando si trova un sito web usando i tradizionali elementi Bootstrap.

Ma puoi anche Rinnova questi elementi da solo utilizzare il codice Bootstrap come base per il layout.

Ci sono alcuni modi diversi Puoi farlo:

Aggiungi il tuo foglio di stile per sovrascrivere il valore predefinito.
Personalizza l'output di BootStrap, in modo da ottenere solo gli elementi desiderati.
Combina con componenti aggiuntivi e plugin / temi.

Quest'ultima opzione è la più comune ed è uno dei motivi per cui Bootstrap è cresciuto così velocemente.

Certo, sono anche un grande fan di loro personalizzare lo strumento perché è totalmente gratuito e ti dà così tanto controllo quali caratteristiche vuoi usare.

Ci sono tonnellate di risorse per BootStrap 3/4, create da sviluppatori di terze parti, quindi è più facile che mai crea i tuoi esclusivi layout BootStrap senza scrivere molto codice.

Plugin e componenti aggiuntivi

Dal momento che Bootstrap è dotato di una massiccia libreria JavaScript, è abbastanza facile espandi le funzionalità JavaScript. E gli sviluppatori lo hanno sicuramente fatto con i propri plugin, molti rilasciati gratuitamente online.

Questi sono i miei preferiti di tutti supporta Bootstrap in modo nativo. Molti di loro corri su jQuery, quindi sono anche facili da personalizzare se sai orientarti nella libreria jQuery.

Validatore di moduli

Il primo è il mio preferito plugin di convalida del modulo, Form Validator. Funziona su jQuery e supporta un intero mucchio di framework frontend: Bootstrap, Foundation, Pure, UIKit e altri.

Puoi aggiungere manualmente un numero qualsiasi di 51 validatori a qualsiasi forma sul tuo sito. Ciò significa che i visitatori dovranno soddisfare i requisiti di convalida prima di poter inviare i contenuti.

Molti moduli di contatto utilizzano questi validatori per richiedono indirizzi di posta elettronica funzionanti. Ma puoi anche usarli per caricare immagini, o password, praticamente tutto ciò che il tuo cuore di Bootstrap desidera.

Selettore datetime

Raccoglitori di date sono anche un enorme dolore per te stesso codice. Molte forme usano solo menu a discesa per le impostazioni giorno / mese / anno, ma puoi anche usarlo Plugin data picker Bootstrap per salvare te stesso la seccatura.

È completamente open-source e gira sulla libreria Bootstrap 3.x.. Lo noterai anche tu supporta sia la data E tempo usando un altro plugin jQuery, Moment.js.

Nel complesso, questa libreria è fantastica per rendere attivo un selettore di date lavorative. Ha molte dipendenze ma, per fortuna, non avrai bisogno di scrivere molto codice per farlo funzionare.

Classificazione a stelle

Ecco un'altra caratteristica interessante per classificazione a stelle In rete. Puoi aggiungere una valutazione da una a cinque stelle ovunque sul tuo sito, utilizzando la libreria Bootstrap per i comportamenti JavaScript.

Quando l'utente si posiziona su queste stelle, il display cambia a qualsiasi valore si basi sulla posizione del cursore. Quindi, con un clic, l'utente esegue il voto e imposta una valutazione a stelle, comprese le valutazioni a mezza stella.

Questo plugin è sicuramente complicato da configurare perché tu puoi cambia molte delle impostazioni predefinite per tecniche più avanzate. Ma puoi vedere una semplice demo dal vivo per valutare se questo plug-in di stelle si adatta al tuo sito.

WATable

Bootstrap viene fornito con il suo proprio stile di layout della tabella per la visualizzazione di dati tabulari sul frontend. Ma con il Plugin WATable, puoi aggiungere un sacco di funzioni extra ai tuoi tavoli Bootstrap.

Questo è uno dei plugin jQuery più dettagliati là fuori e queste sono solo alcune delle funzionalità che puoi aggiungere:

Impaginazione personalizzata.
Ordinamento colonne.
Filtraggio dei dati.
Effetti di animazione della tabella.
Selezionare per selezionare intere righe.

WATable è descritto come a Coltellino svizzero di plugin da tavolo e devo essere d'accordo con questa descrizione. Il fatto che supporti Bootstrap è solo la ciliegina sulla torta.

Questi erano alcuni dei miei plugin preferiti ma ce ne sono tanti altri là fuori. Puoi curiosare ancora di più su questa pagina se sei curioso.

Quadri di bootstrap

Bootstrap è in realtà un framework di grandi dimensioni perché consente agli utenti personalizzare gli stili HTML e CSS predefiniti con poche lezioni.

Ma gli sviluppatori hanno preso la libreria BootStrap predefinita e hanno aggiunto i propri stili per creare framework ancora più grandi lavorare come temi, quindi non è necessario riavviare Bootstrap da zero.

Per fortuna, sono tutti gratuiti e funzionano tutti con le classi BootStrap predefinite.

Bootflat

Forse il framework BootStrap più conosciuto è UI Bootflat quello segue la tendenza del design piatto.

Funziona con tutte le funzionalità di bootstrap predefinite, compresi tutti i componenti JavaScript. Le principali differenze sono più in design e struttura dove gli elementi della pagina utilizzano combinazioni di colori piatte per allontanarsi dagli stili di sfumatura di Bootstrap.

Bootflat non è stato abusato molto, quindi puoi aggiungere questo framework su qualsiasi pagina di destinazione o home page per creare un look unico per il tuo sito.

È gratuito al 100% e viene fornito con a color Picker, così puoi trovare combinazioni di colori piatte per adattarle al tuo layout.

Ottieni merda

Questo kit UI sorprendentemente smussato si basa anche sulla libreria Bootstrap 3 ed è rilasciata gratuitamente su GitHub.

Get Shit Done proviene dal team di Creative Tim, dove vendono alcune risorse premium. Questo kit specifico per l'interfaccia utente ha una versione pro, ma non è affatto necessario.

La versione open-source è più che sufficiente per tutti e puoi controllare il dimostrazione dal vivo per vedere come appare nel browser.

Design del materiale Bootstrap

Un'altra tendenza di design popolare è Design dei materiali di Google. Questo è un linguaggio di progettazione originariamente creato per i progettisti di app Android ma da allora diffondere sul web e ha raccolto molto supporto dai progettisti UI / UX.

Questa incredibile struttura del materiale Bootstrap utilizza le caratteristiche del design del materiale costruire uno stile di design personalizzato fuori dalla libreria di Bootstrap.

Di default, supporta tutto in BootStrap 3 ed è attualmente in fase di rilavorazione per supportare anche Bootstrap 4. Puoi saperne di più sulla homepage ufficiale che contiene documentazione e demo.

Una libreria simile che potresti provare è MDBootstrap, anche se trovo questo un po 'più difficile da lavorare.

Bootplus

Google ha creato il linguaggio di material design ma ha anche i propri stili per molti dei suoi strumenti e app web.

Bootplus riproduce lo stile dell'interfaccia di Google+, insieme a molti documenti di assistenza di Google, Google Drive e app Web simili. Ha tutte le stesse funzionalità di Bootstrap, incluse griglie, stili di layout, stili di elementi e componenti JavaScript.

Puoi anche sfogliare una demo sul sito per vedere il differenze tra Bootplus e l'interfaccia utente di Bootstrap originale. Per una risorsa gratuita, Bootplus è ampio ed è perfetto per chiunque ami le tecniche di progettazione di Google.

Strumenti e risorse

Infine, voglio tuffarmi nei tanti strumenti gratuiti per personalizzazione e creazione di layout Bootstrap.

Questi strumenti sono tutte applicazioni web e molti di questi sono persino open source su GitHub. Sono fatti per farti risparmiare tempo e aiutarti a progettare incredibili layout Bootstrap senza molto codice.

Editor live

Il libero Bootstrap editor live è uno dei migliori strumenti per designer non tecnici. Se non sai come codificare puoi ancora contare su questo builder Bootstrap per creare un intero layout da zero.

esso funziona direttamente nel tuo browser e puoi anche scegliere tra modelli predefiniti per iniziare.

Le opzioni nella barra laterale ti consentono aggiungi determinati valori CSS se conosci qualche codifica del frontend. Ma puoi anche usare la GUI per cambiare colori, caratteri, dimensioni e praticamente qualsiasi altra cosa che ti piace.

Una volta che hai finito, clic “Ottieni il tema” e puoi copiare / incollare gli stili CSS aggiornati nel tuo progetto. Un modo super facile per riavviare Bootstrap senza dover ricodificare tutto da zero.

Costruttore di moduli

Questo è gratuito Costruttore di moduli Bootstrap è un trascinare e rilasciare lo strumento del browser che ti permette di creare moduli Bootstrap da zero.

Ancora una volta richiede conoscenze di codifica zero e hai pieno accesso a tutti gli elementi di Bootstrap 3. Basta selezionare l'elemento desiderato e trascinarlo a destra nella casella di sinistra. Da qui, puoi cambiare tutto dal testo segnaposto alla classe CSS.

Di gran lunga il costruttore di forme più bello che abbia mai visto ed è gratuito al 100%!

BootSwatchr

Un altro strumento gratuito che mi piace davvero è BootSwatchr. Si basa sul framework Bootstrap e ti lascia aggiornare i colori, gli stili del tema, e il layout generale della pagina.

Quello che mi piace di questa app è come anche con galleria gratuita di stili pre-progettati.

Quindi, puoi scaricare un design che qualcun altro già fatto oppure puoi usarlo come punto di partenza per personalizzare il tuo tema.

Andando avanti

Bootstrap sta crescendo solo in popolarità, quindi ora è il momento migliore per tuffarsi in questo quadro. Per fortuna, ci sono dozzine di plugin, framework e strumenti gratuiti che puoi utilizzare per accelerare il processo di sviluppo.

In questo articolo ho appena mostrato la punta dell'iceberg, quindi se non vedi nulla qui è utile uscire da Google e vedere cos'altro puoi trovare.