Oltre 20 fantastiche risorse per gli amanti di Bootstrap
Bootstrap è semplicemente esploso nella comunità di sviluppo web. Ci saranno sempre scettici e nemici, ma nel complesso il progetto ha avuto un successo strepitoso e può essere costantemente visto in cima alle classifiche Forked e Watched di GitHub.
Come risultato della fama di Bootstrap, la comunità di sviluppo ha messo a disposizione molte grandi risorse correlate. Oggi abbiamo raccolto i nostri preferiti in un elenco di tutto il necessario per iniziare con Bootstrap. Dai tutorial introduttivi ai kit di wireframing e generatori personalizzati, c'è qualcosa qui per ogni amante di Bootstrap.
Esplora i modelli Bootstrap
Avvia Bootstrap
Start Bootstrap è una piattaforma all-in-one per tutti i tipi di temi, guide e modelli HTML gratuiti e premium pre-progettati creati con Bootstrap.
Il sito include modelli predefiniti gratuiti per la creazione di landing page, siti Web di curriculum personali, portafogli e molto altro. Esistono anche molti layout di modelli Bootstrap rapidi che puoi scaricare per iniziare rapidamente i tuoi progetti di web design.
Inoltre, Start Bootstrap ha un enorme elenco di risorse Bootstrap che include collegamenti a tutti i tipi di risorse relative a Bootstrap come plug-in, visual builder, integrazioni di framework e altro.
CodyHouse
CodyHouse è una libreria piena di componenti Web gratuiti costituiti da plugin HTML, CSS e JavaScript. La libreria include mega-menu dal design accattivante, modelli di portfolio, integrazioni di pagamento, effetti di animazione, modelli di video e altri plug-in.
Puoi scaricare questi plug-in e modelli per integrarli facilmente nei progetti del tuo sito Web Bootstrap per integrare gratuitamente varie funzioni e caratteristiche.
Bootsnipp
Questa è un'altra piattaforma che offre una vasta raccolta di risorse e plugin HTML e CSS. La specialità di Bootsnipp è che questa piattaforma presenta frammenti di codice e plugin creati anche da altri sviluppatori e designer web.
Bootsnipp include tutti i tipi di frammenti di codice e modelli per facilitare il processo di sviluppo Web, inclusi modelli di modulo, design dei pulsanti, barre di avanzamento, modelli di gallerie e altro ancora.
Puoi unirti alla piattaforma come utente registrato e creare anche la tua raccolta di risorse Bootstrap. Bootsnipp include anche risorse per altri framework HTML come Foundation e Semantic UI.
Codrops
Codrops è un blog che condivide tutorial e progetti su come creare modelli ed elementi unici con HTML e CSS. La cosa grandiosa di questo blog è che oltre a permetterti di scaricare gratuitamente modelli e plugin, descriverà in dettaglio come ogni modello è stato creato e come puoi personalizzarli secondo le tue preferenze.
Codrops include risorse, progetti, modelli e plug-in che è possibile integrare con Bootstrap per creare sezioni di portfolio alla moda, presentazioni, sfondi video, animazioni e molto altro.
Frammenti
Shards è un kit di interfaccia utente moderno e minimalista costruito con Bootstrap 4 per la progettazione di siti Web sorprendenti e mobile-first.
Quando si utilizza questo kit UI, non sarà necessario scrivere codice per dare uno stile agli elementi Bootstrap come pulsanti e menu. Il kit UI si occuperà di tutto ciò per te.
Bootswatch
Questo sito presenta una raccolta di temi personalizzati per il framework Bootstrap in diverse combinazioni di colori e design.
L'elenco include un tema Bootstrap a tema spaziale, un tema di design materiale, un tema di design piatto, temi di colore scuro e altro. Puoi scaricare e utilizzare questi temi per personalizzare l'aspetto dei tuoi progetti Bootstrap senza dover modificare il codice.
Fontello
Fontello è un elegante generatore di font che ti consente di sfogliare una vasta collezione di icone da diversi pacchetti di icone di font popolari, tra cui Font Awesome, Typicons, Brandico e altri.
I caratteri icona sono ampiamente utilizzati in quasi tutti i design di siti Web in questi giorni. È possibile utilizzare la funzione di ricerca su Fontello per trovare rapidamente un pacchetto di caratteri con un'icona relativa alla ricerca, regolare la dimensione dell'icona e scaricare il carattere dell'icona da utilizzare con i disegni Bootstrap.
Fuel UX
Fuel UX viene utilizzato principalmente da web designer avanzati per potenziare il framework Bootstrap con miglioramenti JavaScript più complicati e leggeri. Migliora Bootstrap con funzionalità estese e offre un maggiore controllo sulla personalizzazione del framework. Fuel UX fa parte anche di Salesforce Marketing Cloud.
Typehead.js
Vuoi aggiungere una fantastica funzione di completamento automatico simile a Google nella casella di ricerca del tuo sito Web? Quindi è possibile scaricare questa libreria JavaScript leggera e integrarla nel sito Web Bootstrap per aggiornare facilmente la casella di ricerca con frasi di ricerca di completamento automatico, suggerimenti automatici e altro.
Galleria Blueimp
Blueimp è una raccolta di modelli di gallerie reattivi e abilitati al tocco che è possibile utilizzare sul proprio sito Web per aggiungere gallerie di immagini e video nonché portafogli.
Il plug-in è realizzato in base alla libreria Swipe JavaScript, che è soprannominata il dispositivo di scorrimento tattile più preciso. Blueimp estende la funzionalità di Swipe permettendoti di scegliere tra tre diversi modelli di galleria, tra cui carosello di immagini, carosello di video e una galleria di immagini lightbox.
Bootstrap Expo
Questo è un sito che presenta una raccolta di splendidi siti Web creati con Bootstrap. La collezione è curata da Mark Otto, fondatore di Bootstrap e direttore del design di Github. È un ottimo posto per trovare ispirazione per il tuo prossimo progetto e vedere che tipo di cose incredibili puoi costruire con Bootstrap.
StyleBootstrap
Questo strumento consente di utilizzare una semplice interfaccia per personalizzare vari aspetti di Bootstrap. La differenza qui è che questo si concentra principalmente sugli aspetti visivi e di design. Puoi facilmente entrare e cambiare colori, caratteri, bordi e molto altro.
L'app stessa è anche più visiva del generatore di Twitter e ti consente di vedere come appariranno i tuoi stili prima di premere quel pulsante di download.
Bellissimi pulsanti per Bootstrap
Questo è un piccolo strumento semplice che fa solo una cosa: ti aiuta a progettare pulsanti belli da usare con Twitter Bootstrap. Comprende solo cursori a quattro e una casella per copiare il CSS risultante, né meno, né più. Non rivoluzionerà il modo in cui usi Bootstrap ma è divertente giocarci.
WrapBootstrap
“WrapBootstrap è un marketplace per temi e modelli Bootstrap premium. Stupisci i tuoi clienti e visitatori mentre usi un'unica, solida base. "
Pensa a WrapBootstrap come ThemeForest per Bootstrap. Puoi acquistare o vendere temi Bootstrap personalizzati. Se pensi che sia sciocco spendere soldi per un tema premium per una risorsa gratuita come Bootstrap, dai un'occhiata al successo del mercato dei temi di WordPress. Per impostazione predefinita, tutti i siti Bootstrap iniziano ad avere lo stesso aspetto e i temi ben progettati possono davvero aggiungere alcune belle variazioni mentre ti consentono di mantenere i grandi vantaggi offerti da Bootstrap.
Costruito con Bootstrap
Costruito con Bootstrap è un blog non ufficiale di Tumblr che mette in mostra vari siti Web che, come suggerisce ovviamente il nome, sono stati creati utilizzando Bootstrap. Questa è una risorsa fantastica per i progettisti che lavorano con Bootstrap in quanto ti consente di vedere cosa stanno facendo i veri sviluppatori con il framework, che ti ispirerà a spingerti oltre.
Se pensi che Bootstrap non sia in grado di portare a un design tutt'altro che semplice, questa galleria ti dimostrerà che hai torto. Siti come Provo Restaurant mi hanno davvero sorpreso non somigliando a un clone delle pagine di esempio di Bootstrap.
Libreria di widget gratuiti per Bootstrap di Twitter
Axure è un'applicazione potente e di livello professionale che consente di creare wireframe complessi e modelli interattivi. A $ 589 per licenza, è una soluzione solo per i wireframer seri.
Se desideri lavorare con Twitter Bootstrap e Axure, assicurati di scaricare questa fantastica libreria di widget gratuiti, che include rappresentazioni personalizzabili perfette degli elementi Bootstrap che funzionano perfettamente in Axure.
Bootstrap PSD
So cosa molti di voi pensano: “Fuochi d'artificio? Axure? OmniGraffle? Dammi solo un PSD! ” Bene, sei fortunato, perché Repix Design ha impiegato del tempo per creare e distribuire un PSD dettagliato e personalizzabile contenente tutti i vari componenti di Bootstrap.
Se ti piace fare il tuo wireframing in Photoshop e sei un Bootstrapper, questo download gratuito è un gioco da ragazzi. Vai a prenderlo ora.
Carattere fantastico
Font Awesome è probabilmente la mia risorsa Bootstrap Twitter preferita. Fondamentalmente è solo un carattere icona, quindi chiunque può usarlo per qualsiasi progetto. Tuttavia, è stato specificamente progettato per integrare l'estetica visiva di Bootstrap.
Font Awesome è gratuito per uso commerciale, compatibile con lo screen reader e contiene ben 150 icone (un numero che continua a crescere). Aggiungi questo segnalibro perché lo adorerai.
Sass Twitter Bootstrap
Quando la gente di Twitter ha creato Bootstrap, ha deciso di renderlo ancora migliore con LESS, un popolare preprocessore CSS che porta la magia di variabili, mixin e molto altro nei CSS.
Il fatto è che c'è una grande divisione nella base di fan del preprocessore. Alcune persone amano MENO perché è semplice e incredibilmente facile da usare, ma molti optano per l'alternativa più potente: Sass. Non possiamo incolpare gli sviluppatori di Twitter per aver preso la strada MENO, ma anche i fan di Sass hanno bisogno di un po 'd'amore! Fortunatamente, John W. Long ha portato Bootstrap a Sass, quindi ora entrambe le parti del dibattito sui preprocessori possono almeno concordare su una cosa: Bootstrap è rock.
I fan dello stilo non hanno bisogno di piangere per il fatto che spesso non riescono a farsi menzionare, c'è anche una porta Bootstrap Stilo.
Colorpicker e Datepicker per Bootstrap
Ecco un paio di elementi aggiuntivi che puoi aggiungere a Bootstrap. Entrambi sono gratuiti, ben documentati e si adattano perfettamente all'estetica Bootstrap.
Come si completa Bootstrap?
Ora che hai visto il nostro elenco di fantastiche risorse Bootstrap, vogliamo sentirti. Mandaci un tweet per dirci quali risorse di terze parti hai incorporato in quel processo.
