Personalizarea tentativelor, instrumentelor și a cadrelor pentru planurile Bootstrap Layouts

bootstrap este în prezent numărul unu cadru frontal și ușor de cel mai rapid mod de a construi machete. Acesta a fost de ani de zile și dezvoltatorii terți au publicat chiar și resursele proprii online. Aceste resurse variază de la teme gratuite la pachete detaliate și cadre.

În acest articol, aș dori să împărtășesc o parte din acestea resursele și cele mai bune practici pentru dezvoltatorii care doresc să meargă mai departe cu Bootstrap.

Toate resursele din acest post sunt gratuite, astfel încât să le poți folosi oricum considerați potrivit. Chiar dacă nu ați folosit niciodată Bootstrap, veți găsi cu siguranță aici ceva care vă va ajuta să începeți.

Restyling cu Bootstrap

Biblioteca implicită Bootstrap vine împreună cu ea proprii design unic care arata fantastic. Este cunoscut pe scară largă pe web și puteți spune cu ușurință când este un site web folosind elementele tradiționale Bootstrap.

Dar, puteți, de asemenea restyl aceste elemente tine pentru a utiliza codul Bootstrap ca fundație pentru aspectul dvs..

Sunt în câteva moduri diferite poți sa faci asta:

Adăugați o foaie de stil proprie pentru a suprascrie implicit.
Personalizați ieșirea BootStrap, astfel încât să obțineți doar elementele pe care le doriți.
Combinați cu suplimente și pluginuri / teme.

Această ultimă opțiune este cea mai comună și este unul dintre motivele pentru care Bootstrap a crescut atât de repede.

Sunt de asemenea un mare fan al lor instrument de personalizare pentru că este absolut gratuit și vă oferă un control atât de mare care caracteristici pe care doriți să le utilizați.

Există tone de resurse pentru BootStrap 3/4, create de dezvoltatori terți, astfel încât este mai ușor ca niciodată să creați propriile planuri BootStrap unice fără a scrie mult cod.

Plugin-uri și add-on-uri

Din moment ce Bootstrap vine cu o bibliotecă masivă JavaScript, este destul de ușor să extindeți caracteristicile JavaScript. Și dezvoltatorii au făcut-o cu plugurile proprii, multe dintre ele fiind gratuite online.

Acestea sunt toate preferatele mele suport Bootstrap nativ. Multi dintre ei rulați pe jQuery, astfel încât acestea sunt, de asemenea, ușor de personalizat dacă cunoașteți drumul în jurul bibliotecii jQuery.

Validator de formular

Primul este preferatul meu formular de validare plugin, Form Validator. Se execută pe jQuery și suportă o grămadă de cadre frontend: Bootstrap, Foundation, Pure, UIKit și altele.

Poti adăugați manual orice număr de 51 de validatori la orice formă pe site-ul dvs. Aceasta înseamnă că vizitatorii vor trebui să îndeplinească acele cerințe de validare înainte de a putea trimite conținutul.

Multe formulare de contact utilizează aceste validatoare necesită adrese de lucru de lucru. Dar, le puteți utiliza și pentru încărcări de imagini, sau parole, aproape orice doriți de inimă Bootstrap.

Setul de date

Pick-up-uri de date sunt, de asemenea, o mare durere pentru a te codifica. Multe forme utilizează doar meniurile derulante pentru setările zi / lună / an, dar puteți utiliza și acest meniu Bootstrap plugin pentru selectarea datei pentru a vă salva hassle.

Este complet open-source și rulează pe biblioteca Bootstrap 3.x. Veți observa de asemenea sprijină atât data si timpul utilizând un alt plugin jQuery, Moment.js.

În ansamblu, această bibliotecă este fantastic pentru a obține un selector de date de lucru activ. Ea are o mulțime de dependențe dar, din fericire, nu va fi nevoie să scrieți prea multe coduri pentru a funcționa.

Evaluări de stele

Iată o altă trăsătură interesantă evaluări de stele pe internet. Poti adăugați o evaluare de la unu la cinci oriunde pe site-ul dvs., folosind biblioteca Bootstrap pentru comportamente JavaScript.

Când utilizatorul se deplasează deasupra acestor stele, afișajul se modifică indiferent de clasificarea bazată pe poziția cursorului. Apoi, cu un singur click, utilizatorul votează și stabilește un rating de stele, inclusiv evaluări pe jumătate de stele.

Acest plugin este sigur complicat să se înființeze pentru că poți schimbați o mulțime de setări implicite pentru tehnici mai avansate. Dar, puteți vedea un simplu demo live pentru a măsura dacă acest plugin de rating de stele se potrivește cu site-ul dvs..

WATable

Bootstrap vine cu ei propriul stil de aranjare a mesei pentru afișarea datelor tabulare pe interfață. Dar, cu WATable plugin, puteți adăuga o grămadă de caracteristici suplimentare la mesele Bootstrap.

Acesta este unul dintre cele mai detaliate plugin-uri jQuery acolo și acestea sunt doar câteva dintre caracteristicile pe care le puteți adăuga:

Paginare particularizată.
Sortarea coloanelor.
Filtrarea datelor.
Efecte animație tabel.
Verificați-pentru a selecta rânduri întregi.

WATable este descris ca a Elvețianul cu armă elvețiană de pluginuri de masă și trebuie să fiu de acord cu această descriere. Faptul că îl susține pe Bootstrap este doar cireasa de pe tort.

Acestea au fost unele dintre pluginurile mele preferate, dar sunt atât de mulți alții acolo. Puteți căuta mai multe pe această pagină dacă sunteți curios.

Bootstrap cadre

Bootstrap este de fapt un cadru larg, deoarece permite utilizatorilor personalizați stilurile implicite HTML și CSS cu câteva clase.

Dar, dezvoltatorii au luat biblioteca implicită BootStrap și și-au adăugat propriile stiluri pentru a crea cadre chiar mai mari lucrează ca teme, astfel încât nu este nevoie să restyle Bootstrap de la zero.

Din fericire, toți sunt liberi și toți se clasează pe clasele implicite de BootStrap.

Bootflat

Poate cel mai cunoscut cadru BootStrap este Bootflat UI acea urmează tendința de design plat.

Funcționează cu toate caracteristicile implicite Bootstrap, inclusiv toate componentele JavaScript. Diferențele majore sunt mai multe design și structură unde elementele de pagină utilizează scheme de culoare plată pentru a se îndepărta de stilurile de gradient ale Bootstrap.

Bootflat nu a fost folosit prea mult foarte mult, astfel încât să puteți adăuga acest cadru pe orice pagină de destinație sau pagină de pornire pentru a crea un aspect unic pentru site-ul dvs..

Este gratuit 100% și chiar vine cu un selector de culoare, astfel încât să puteți găsi planuri de culori plane pentru a se potrivi aspectului dvs..

Ia terminat rahatul

Acest surprinzător de tare UI kit se bazează, de asemenea, pe biblioteca Bootstrap 3 și este lansată gratuit pe GitHub.

Get Shit Done vine de la echipa de la Creative Tim, unde vinde câteva resurse premium. Acest kit UI specific are o versiune pro, dar nu este deloc necesar.

Versiunea open-source are mai mult decât suficient pentru toată lumea și puteți verifica live demo pentru a vedea cum arată în browser.

Designul materialelor de tip Bootstrap

O altă tendință de design populară este Google design material. Acesta este un limbaj de design creat inițial pentru designeri de aplicații Android, dar de atunci răspândit pe web și a câștigat o mulțime de sprijin din partea designerilor UI / UX.

Acest cadru incredibil de materiale Bootstrap folosește caracteristicile de design material construi un stil de design personalizat din biblioteca lui Bootstrap.

În mod implicit, acesta suportă totul în BootStrap 3 și este în curs de revizuire pentru a sprijini, de asemenea, Bootstrap 4. Puteți afla mai multe pe pagina oficială care are documentație și demo-uri.

O bibliotecă similară pe care o puteți încerca este MDBootstrap, deși mi se pare că este mai dificil să lucrez cu acesta.

Bootplus

Google a creat limbajul de design material, dar au, de asemenea, stiluri proprii pentru multe dintre instrumentele și aplicațiile lor web.

Bootplus imită stilul interfeței Google+, împreună cu multe dintre documentele de ajutor Google, Google Drive și alte aplicații web similare. Are toate aceleași caracteristici ca Bootstrap, inclusiv grile, stiluri de layout, stiluri de elemente și componente JavaScript.

Puteți chiar să parcurgeți o demonstrație pe site pentru a vedea diferențele dintre Bootplus și interfața de pornire inițială Bootstrap. Pentru o resursă gratuită, Bootplus este extinsă și este perfectă pentru oricine preferă tehnicile de design Google.

Instrumente și resurse

În cele din urmă, vreau să mă scufund în numeroasele instrumente gratuite pentru personalizarea și construirea layout-urilor Bootstrap.

Aceste instrumente sunt toate aplicațiile web și multe dintre ele sunt chiar deschise pe GitHub. Acestea sunt făcute pentru a economisi timp și pentru a vă ajuta să proiectați machete incredibile Bootstrap fără mult cod.

Editor live

Liberul Bootstrap editor live este unul dintre cele mai bune instrumente pentru designerii non-tehnici. Dacă nu știți cum să codificați, puteți încă să vă bazați pe acest constructor Bootstrap pentru a crea un aspect întreg de la zero.

Aceasta rulează în browserul dvs. și puteți alege chiar și din șabloane pre-făcute pentru a începe.

Opțiunile din bara laterală vă permit adăugați anumite valori CSS dacă știți unele codificare frontend. Dar, puteți utiliza și interfața grafică pentru a schimba culorile, fonturile, dimensiunile și aproape orice altceva doriți.

Odată ce ați terminat, clic “Obtine tema” și puteți copia / lipi stilurile CSS actualizate în propriul proiect. O modalitate foarte ușoară de restabilire a Bootstrap fără a fi nevoie să recodezi totul de la zero.

Formator de formulare

Acest lucru este gratuit Bootstrap formator de formular este a drag-and-drop instrument de browser care vă permite să creați formularele Bootstrap de la zero.

Din nou, asta necesită cunoștințe de codare zero și aveți acces complet la toate elementele Bootstrap 3. Doar selectați elementul dorit și trageți-l direct în caseta din stânga. De aici, puteți schimba totul, de la textul substituentului la clasa CSS.

De departe cel mai tare constructor de forme pe care l-am văzut vreodată și este gratuit 100%!

BootSwatchr

Un alt instrument gratuit îmi place foarte mult BootSwatchr. Se bazează pe cadrul Bootstrap și vă permite actualizați culorile, stilurile temelor, si aspect general a paginii.

Ceea ce îmi place despre această aplicație este cum vine de asemenea cu o galerie gratuită de stiluri pre-proiectate.

Deci, puteți descărca un design care să fie altcineva deja făcut sau puteți folosi ca punct de plecare pentru a personaliza propria temă.

A merge inainte

Bootstrap crește doar în popularitate, deci acum este cel mai bun moment scufundați în acest cadru. Din fericire, există zeci de pluginuri, cadre și instrumente gratuite pe care le puteți utiliza pentru a accelera procesul dev.

În acest articol, am arătat vârful aisbergului, deci dacă nu vedeți nimic aici care este util să ieșiți la Google și să vedeți ce mai puteți găsi.