Bootstrap è semplicemente esploso nella comunità di sviluppo web. Ci saranno sempre scettici e odiatori, ma nel complesso, il progetto ha avuto un successo strepitoso e può essere visto costantemente in cima alle classifiche Forked and Watched di GitHub.
Come risultato della fama di Bootstrap, molte risorse correlate sono state messe in campo dalla comunità di sviluppo. 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 ai generatori personalizzati, c'è qualcosa qui per ogni amante di 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 creare pagine di destinazione, siti Web di resume personale, portafogli e molto altro. Ci sono anche molti layout di modelli di Bootstrap veloci 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, modelli di portfolio, integrazioni di pagamento, effetti di animazione, modelli di video e altri plugin ben progettati.
È possibile scaricare questi plug-in e modelli per integrarli facilmente nei propri progetti di siti Web Bootstrap per integrare varie funzioni e funzionalità, gratuitamente.
Bootsnipp
Questa è un'altra piattaforma che offre una vasta collezione di risorse e plugin HTML e CSS. La specialità di Bootsnipp è che questa piattaforma presenta frammenti di codice e plugin creati da altri sviluppatori e progettisti web.
Bootsnipp include tutti i tipi di frammenti di codice e modelli per rendere il processo di sviluppo Web molto più semplice, inclusi modelli di moduli, progetti di pulsanti, barre di avanzamento, modelli di gallerie e altro ancora.
Puoi unirti alla piattaforma come utente registrato e creare la tua collezione personale 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 bella di questo blog è che oltre a permettervi di scaricare gratuitamente modelli e plug-in, descriverà in dettaglio come è stato creato ciascun modello e come è possibile personalizzarlo in base alle proprie preferenze.
Codrops include risorse, progetti, modelli e plug-in che puoi integrare con Bootstrap per creare sezioni di portfolio alla moda, presentazioni, sfondi video, animazioni e molto altro ancora.
Frammenti
Shards è un kit per l'interfaccia utente moderno e minimalista realizzato con Bootstrap 4 per la progettazione di siti web reattivi e mobili-primi sorprendenti.
Quando si utilizza questo kit UI, non è necessario scrivere codice per applicare uno stile agli elementi Bootstrap come i pulsanti e i menu. Il kit per l'interfaccia utente si prenderà cura di tutto ciò che per te.
Bootswatch
Questo sito presenta una raccolta di temi personalizzati per il framework Bootstrap in diversi schemi e progetti di colori.
L'elenco include un tema Bootstrap a tema spaziale, un tema di design dei materiali, un tema di design piatto, temi di colore scuro e altro ancora. Puoi scaricare e utilizzare questi temi per personalizzare l'aspetto dei tuoi disegni Bootstrap senza dover modificare il codice.
Fontello
Fontello è un generoso generatore di icone 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 ancora.
I font icon 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 font con un'icona relativa alla ricerca, regolare le dimensioni dell'icona e scaricare il carattere dell'icona da utilizzare con i disegni Bootstrap.
Combustibile UX
Fuel UX è principalmente utilizzato dai web designer avanzati per potenziare il framework Bootstrap con miglioramenti JavaScript più complessi e leggeri. Migliora Bootstrap con funzionalità estese e offre un maggiore controllo sulla personalizzazione del framework. Anche Fuel UX fa parte di Salesforce Marketing Cloud.
Typehead.js
Vuoi aggiungere una fantastica funzione di completamento automatico di Google alla casella di ricerca del tuo sito web? Quindi puoi scaricare questa libreria JavaScript leggera e integrarla nel tuo sito Web Bootstrap per aggiornare facilmente la tua casella di ricerca con frasi di ricerca, suggerimenti automatici e altro ancora.
Galleria Blueimp
Blueimp è una raccolta di modelli di galleria reattivi e abilitati al tocco che puoi utilizzare sul tuo sito web aggiungendo gallerie di immagini e video e portafogli.
Il plug-in è realizzato in base alla libreria JavaScript di Swipe, che viene soprannominata come il cursore di tocco più preciso. Blueimp estende le funzionalità di Swipe consentendoti di scegliere tra tre diversi modelli di galleria, tra cui carosello di immagini, carosello video e una galleria di immagini lightbox.
Bootstrap Expo
Questo è un sito che presenta una collezione 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 l'ispirazione per il tuo prossimo progetto e vedere che tipo di cose straordinarie puoi creare con Bootstrap.
StyleBootstrap
Questo strumento ti consente di utilizzare un'interfaccia semplice 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 è anche più visiva del generatore di Twitter e ti consente di vedere come saranno i tuoi stili prima di premere il pulsante di download.
Bellissimi pulsanti per Bootstrap
Questo è un piccolo strumento semplice che fa solo una cosa: ti aiuta a progettare fantastici pulsanti da utilizzare con Twitter Bootstrap. Ha solo cursori a quattro e una scatola per copiare il CSS risultante, niente di meno, niente di 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 una base solida e solida.
Pensa a WrapBootstrap come ThemeForest per Bootstrap. È possibile acquistare o vendere temi Bootstrap personalizzati. Se pensi che sia sciocco spendere soldi per un tema premium per una risorsa gratuita come Bootstrap, basta dare un'occhiata al successo del mercato dei temi di WordPress. Per impostazione predefinita, i siti Bootstrap iniziano tutti ad avere lo stesso aspetto e temi ben progettati possono davvero aggiungere alcune interessanti varianti, consentendo allo stesso tempo di mantenere i grandi vantaggi offerti da Bootstrap.
Costruito con Bootstrap
Costruito con Bootstrap è un blog Tumblr non ufficiale che mette in mostra vari siti Web che, come il nome implica ovviamente, sono stati creati utilizzando Bootstrap. Questa è una risorsa fantastica per i designer che lavorano con Bootstrap in quanto ti consente di vedere cosa stanno facendo gli sviluppatori reali con il framework, il che ti ispirerà a portare avanti te stesso.
Se pensi che Bootstrap non sia in grado di portare a nulla se non un semplice design, questa galleria ti dimostrerà che hai torto. Siti come Provo Restaurant mi hanno davvero sorpreso non avendo l'aspetto di un clone delle pagine di esempio di Bootstrap.
Free Twitter Bootstrap Widgets Library
Axure è un'applicazione potente e professionale che ti consente di creare wireframes complessi e prototipi interattivi. A $ 589 per licenza, è una soluzione solo per i wireframer serie.
Se desideri lavorare con Twitter Bootstrap e Axure, assicurati di scaricare questa fantastica libreria di widget gratuiti, che include rappresentazioni perfettamente personalizzabili degli elementi Bootstrap che funzionano senza problemi in Axure.
Bootstrap PSD
So cosa molti di voi stanno pensando,? Fuochi d'artificio? Axure? OmniGraffle? Dammi solo un PSD !? Bene, sei fortunato, perché Repix Design ha avuto il tempo di 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.
Font Awesome
Font Awesome è probabilmente la mia risorsa di bootstrap Twitter preferita. In pratica è solo un font di icone, quindi chiunque può utilizzarlo per qualsiasi progetto. Tuttavia, è stato specificamente progettato per integrare l'estetica visiva di Bootstrap.
Font Awesome è gratuito per uso commerciale, compatibile con screen reader e contiene ben 150 icone (un numero che continua a crescere). Bookmark questo perché lo amerai.
Sass Twitter Bootstrap
Quando gli utenti di Twitter hanno creato Bootstrap, hanno deciso di renderlo ancora migliore con LESS, un popolare preprocessore CSS che porta la magia delle variabili, dei mix e molto altro ai 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 prendere la via LESS, ma i fan di Sass hanno bisogno anche di un po 'di amore! Fortunatamente, John W. Long ha portato Bootstrap in Sass, quindi ora entrambi i lati del dibattito sul preprocessore possono almeno concordare su una cosa: Bootstrap rocks.
Gli appassionati di stili non hanno bisogno di lamentarsi del fatto che spesso non riescono a ottenere una menzione, c'è anche una porta Bootstrap Stylus.
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 fai a completare Bootstrap?
Ora che hai visto la nostra lista di fantastiche risorse Bootstrap, vogliamo ascoltarti. Mandaci un tweet per dirci quali risorse di terze parti hai incorporato in quel processo.
bootstrap
Bootstrap è un toolkit open source per lo sviluppo con HTML, CSS e JS. La nostra serie offre suggerimenti e idee per lavorare con Bootstrap e ispirare collezioni di modelli per iniziare velocemente!