Share
Și, în sfârșit, ajungem la ultimul tutorial din serie, care vă va arăta cum să creați seturi de culori personalizate.
Dacă vă amintiți din nou la început, când treceam prin modificările majore, am menționat că autorii BS au furnizat un fișier suplimentar pentru a face BS3 să arate ca BS2, mai degrabă decât să se uite la aspectul său plat.
De-a lungul acestei serii, am folosit aspectul standard BS3, dar dacă descărcați versiunea JavaScript precompilată a BS3 de pe site-ul Bootstrap, veți găsi un nou fișier în arhiva pe care o descărcați numită bootstrap-theme.css.
Dacă conectați acest fișier la proiectul dvs. imediat după includerea fișierului core bootstrap.css, veți observa că, chiar dacă acum folosiți noul BS3, aspectul aplicației dvs. încă seamănă cu BS2.
Autorii și-au dat seama că una dintre principalele bariere în calea adoptării BS3 în aplicații noi a fost incapacitatea de a-l modela într-o manieră personalizată, dar cu ușurință.
Dacă ați fost un utilizator de LESS sau chiar Sass (deoarece BS3 are acum legături Sass), atunci aceasta nu a fost o problemă. Ați deschis pur și simplu sursele LESS, ameliorat variabilele și mixurile de care aveți nevoie și ați alergat prin intermediul compilatorului LESS pentru a obține noul dvs. script CSS.
Din păcate, nu toată lumea a folosit mai puțin; de fapt, mulți dezvoltatori și designeri aveau abilitatea de a descărca și de a include doar fișierele CSS și JavaScript pre-compilate vechi, deci o modalitate mai bună trebuia găsită.
Prima modificare a fost deschiderea tuturor surselor mai puțin la un instrument de personalizare în pagină direct pe site-ul principal Bootstrap, dar acest lucru nu este un lucru nou; ați reușit să utilizați această pagină înainte într-un mod limitat. Cu BS3, cu toate acestea, instrumentul de personalizare mai puțin a avut o revizuire completă și acum puteți redefini Tot pe care BS3 le folosește, de la mărimea fonturilor și fonturi, până la dimensiunile rețelei, punctele de declanșare și seturile de culori contextuale de bază.
De fapt, acum nu există nimic care nu poate fi schimbat înainte de a vă decide să descărcați noua dvs. CSS personalizată, după cum arată următoarea imagine:
Captură de ecran a jumătății superioare a noului instrument de personalizareDin cauza dimensiunii mari a instrumentului, este imposibil să arătați întregul lucru în acest tutorial, dar este destul de ușor să îl accesați. Pur și simplu accesați site-ul Bootstrap și faceți clic pe Personalizați în bara de meniu de sus. De asemenea, veți vedea că aveți multe alte opțiuni, cum ar fi pluginurile și seturile de instrumente JavaScript pe care să le includeți, ce componente să includă și stilul de bază pe care probabil nu doriți.
De exemplu, dacă tot ce doriți să utilizați este sistemul de rețea, și nimic altceva, atunci puteți selecta pur și simplu numai sistemul de rețea, și selectați toate celelalte componente.
Site-ul BS3 va genera doar codul necesar pentru a include și nu mai mult. Aceasta este o binefacere pentru acei oameni care se plâng că toate site-urile Bootstrap arată la fel, pentru că înseamnă că site-ul dvs. absolut nu trebuie să arate la fel ca restul - puteți folosi doar biții de care aveți nevoie și puteți utiliza propriile lucruri pentru orice altceva.
Există și alte două moduri în care vă puteți personaliza construirea. Primul este să iei foaia de stil CSS suplimentară "temă de bootstrap", să faci o copie și apoi să schimbi stilurile după cum crezi de cuviință. Acest lucru nu este la fel de ușor ca utilizarea instrumentelor de personalizare, dar nu este la fel de dificil ca alternativa.
Cele mai multe nume și setări de clasă pe care doriți să le schimbați pentru a-ți șterge marca personală în BS3 sunt deja separate în tema BS2, astfel încât cea mai rapidă modalitate de a experimenta este pur și simplu să punem împreună o pagină de prototipuri cu comenzile și elementele principale pe care doriți să le schimbați, apoi faceți legătura în copia temei BS2.
Dacă utilizați nodul și ceva asemănător cu Bower, devine și mai ușor, deoarece puteți utiliza reîncărcarea live, apoi urmăriți doar schimbarea paginii dvs. de probă aproape în timp real, pe măsură ce modificați versiunea personalizată a fișierului temă.
Cea de-a doua cale este puțin mai implicată și, așa cum este descrisă în documentele BS3, vine în două arome: personalizări ușoare și personalizări grele.
Un exemplu de personalizare ușoară este adăugarea unei clase de culoare contextuală elementului buton. De exemplu, dacă doriți să adăugați BTN-sky alături de BTN-info, BTN-primar, etc, puteți defini o singură foaie de stil pentru a ține următoarele reguli:
.btn-cer, .btn-cer: hover, .btn-cer: activ culoare: # 000000; text-shadow: 0 -1px 0 rgba (0, 0, 0, 2); fundal-culoare: # AAD4FF; frontieră: 1px solid negru; .btn-cer background-repeat: repeat-x; fundal-imagine: gradient liniar (top, # 00FFFF 0%, # FFFF00 100%); .btn-sky: poziționați background-position: 0 -10px;
Atunci când se adaugă și se leagă corect, ar trebui să arate ceva de genul:
Ieșire din proba de cod, atunci când este utilizată cu eșantionul de personalizareCând se utilizează cu o etichetă cu buton normal în modul următor:
Cea mai dificilă parte a utilizării acestei metode trece prin foile de stil CSS de bază pentru a găsi numele pe care doriți să le înlocuiți; nu este chiar dificil, doar cu mult timp în urmă.
Odată ce aveți unul, cum ar fi butonul de mai sus sau ați găsit și ați copiat o alertă, un panou, o listă sau o altă clasă, puteți face cu ușurință un șablon care poate fi refolosit ori de câte ori doriți să adăugați o clasă particularizată tip.
Personalizările grele nu sunt foarte diferite de personalizarea ușoară; diferența majoră este că eliminați întreaga clasă.
De exemplu, veți găsi toate clasele legate de BTN, copiați-le, modificați-le și includeți-le separat.
Noua arhitectură în interiorul cadrului BS3 înseamnă acum că odată ce știi selectorii țintă și frații lor, crearea unei suprascrieri este ușoară. După cum am subliniat deja, fișierul temă bootstrap conține deja o mare parte din ceea ce ați putea modifica oricum și dacă nu este o opțiune, încercați site-uri precum Bootswatch.com:
Ecran împușcat de tema dulce și cireșe de la Bootswatch.comMulți alții au mii de teme de a alege, atât gratuit cât și plătiți, astfel încât nu există nici o scuză pentru ca site-ul dvs. Bootstrap să arate la fel ca toți ceilalți.
Sper că v-ați bucurat de această serie și că vă ajută să deveniți un dezvoltator mai bun folosind Bootstrap 3. În această lume nouă de design web responsiv, BS3 este un cadru care nu ar trebui luat ușor - reprezintă o mulțime de cercetări de către unul dintre cele mai mari companii de social media existente, și este folosit pentru a conduce majoritatea site-urile lor orientate spre public.
Dacă doriți să contactați și să-mi puneți întrebări despre această carte, pot fi în general găsite agățate pe Twitter ca @shawty_ds. Puteți, de asemenea, să mă găsiți în general pe LinkedIn sau în grupul de utilizatori Linked.NET (Lidnug) pe care îl ajut acolo.
Până la data viitoare, mențineți calm și continuați să faceți bootstrapping.
Acest tutorial reprezintă un capitol din Bootstrap 3 Succinctly, o carte electronică gratuită de la echipa de la Syncfusion.
Accentsconagua