Accentsconagua
Acesta este conținutul principal de bine
Acesta este un paragraf scurt pentru a evidenția locul unde va merge conținutul general.
Share
Web design-ul este o profesie în evoluție. În timp ce un ochi tare pentru culoare, tipografie și aspect va fi întotdeauna important, aceste abilități sunt trumpate de o nevoie de a înțelege motivațiile utilizatorilor. Nu este suficient să construiți un site și să așteptați ca traficul să se rostogolească - site-urile trebuie să ajute utilizatorii să-și atingă obiectivele, cu un minimum de frecare cognitivă. Bootstrap poate ajuta profesioniștii în domeniu să definească aceste obiective și să creeze și o experiență criminal.
nu facem pagini, facem filme
Îmi place să spun că nu facem pagini, facem filme. Utilizatorii așteaptă ca site-urile să se încarce rapid, să furnizeze conținut interesant și interactivitate inteligentă. Așa cum filmele depind de tăieturi rapide, iluminare și starea de spirit pentru a atrage utilizatorii, site-urile web se bazează pe tranziții, interactivitate și calendar. Aceste detalii se pierd adesea în timpul fazei de proiectare - sau, mai rău, nu sunt niciodată luate în considerare. În timp ce o tranziție care durează 0,5 secunde atunci când ar trebui să dureze 0,25 secunde, de obicei, nu se va scufunda o aplicație, acest nivel de detaliere se separă bine de mare.
Vă voi arăta cum poate Bootstrap să înlocuiască barele statice și să aducă aceste detalii în prim plan mai devreme și cu mai puțin efort.
Primul pas este să descărcați cele mai recente stații Bootstrap și jQuery stabile.
Deși jQuery este găzduit de un număr de CDN-uri, prefer să includ toate fișierele la nivel local pentru a putea lucra cu sau fără acces la web. Continuați și configurați o structură de directoare ca cea de mai jos și copiați CSS Bootstrap CSS, Bootstrap Response CSS și fișiere Javascript. Tweak nume și locații, după cum este necesar, dar folosind această structură înseamnă că puteți, de asemenea, pârghie meu șablon HTML în pasul următor.
Acum ar fi un moment bun pentru a crea oa treia foaie de stil, pe care o voi suna user.css. Acest fișier va fi utilizat pentru a suprascrie stilurile Bootstrap după cum este necesar.
Aceasta este singura altă configurație necesară pentru a începe să construiți o rețea wireframe interactivă. Creați un fișier în rădăcina directorului de proiect și denumiți-l index.html. După ce ați creat fișierul, copiați acest cod și salvați-l.
Bornele Interactive Bootstrap Aspectul dvs. va merge aici.
Deschideți un browser web și trageți fișierul index.html salvat în el. Dacă toate articolele sunt încărcate corect, ar trebui să vedeți ceva similar cu ecranul de mai jos. Dacă nu vedeți caseta de avertizare, deschideți Consola sau Web Inspector și vedeți dacă un fișier nu a reușit să se încarce. După depanare, eliminați sau comentați linia de alertă din $ (Document) .ready funcția din partea de jos a paginii și pregătiți-vă să construiți fire de bord Bootstrap.
Cu toate fișierele necesare în loc, putem începe grunduirea în blocurile principale de conținut. Cele mai multe site-uri (aplicații) vor conține un antet, o navigare primară, un conținut principal, un bara laterală și un subsol. Sunt în mod deliberat păstrând aspectul simplu, pentru a ilustra rapid puterea sistemului de rețea al Bootstrap.
Singurul markup structural pe pagină până acum este divul nostru cu clasa "container".
Notă: Acest div este un bloc conținând obligatoriu pentru Bootstrap; vom construi întreaga noastră aplicație wireframe în interiorul acesteia.
Bootstrap cere, de asemenea, noua doctype HTML și generează regulile de stil cu clase, în loc de nume de etichete. Aceste decizii înseamnă că putem folosi câteva noi elemente HTML5: antet, navigare, secțiune, articol, deoparte și subsol. Merită menționat faptul că dacă intenționați să vă testați aspectul în Internet Explorer, va trebui să descărcați și să includeți fie Modernizr, fie Shimul HTML5. Versiunile moderne ale Firefox, Chrome și Safari suportă nativ standardul HTML5.
Bootstrap este construit pe o grilă cu 12 coloane. Utilizează două clase, rând și deschidere pentru a crea containere la nivel de bloc. Aplicând clasa rândului într-un container ca un div sau antet, se întinde automat în întreaga lățime de 940px. Prin adăugarea de containere cu interval de clasăN (N fiind un substituent pentru numărul de coloane), puteți crea cu ușurință gropi de conținut, bare laterale și alte blocuri de aspect, fără a fi nevoie să gestionați flotoare sau alte quirks.
Pentru a te ridica și a alerga rapid, am de gând să construiască un antet de bază, bara de navigare, bine bine, deoparte și subsol. Înlocuiți "Dispunerea dvs. va merge aici" cu următorul cod.
Aplicația mea minunată
Acesta este conținutul principal de bine
Acesta este un paragraf scurt pentru a evidenția locul unde va merge conținutul general.
De asemenea, am adăugat câteva reguli de bază user.css, pentru a face mai ușor identificarea blocurilor de conținut. Dacă totul a mers bine, ar trebui să vedeți un număr de blocuri gri cu text descriptiv negru înăuntru.
/ * Regula de stil de bază pentru contur și elemente de nivel bloc de spațiu * / [class * = "span"] background: #eee; margin-bottom: 10px;
Modelele fixe și fluide au fost în jur de mult timp. Modelele reactive sunt relativ noi și combină cele mai bune părți din cele două. Oferă instrumente de designer pentru a optimiza desenele lor pentru mai multe dimensiuni ale dispozitivelor (smartphone-uri, tablete, display-uri înguste și laterale) fără a trebui să mențină o bază de cod separată pentru fiecare. Redimensionați-vă fereastra browserului pentru a vedea foaia de stil responsabilă a lui Bootstrap în acțiune și pentru a obține o senzație de abilitate minunată de a scrie o dată și de a testa firele de oțel într-un număr de medii.
Browserele fac uz de punctele de rupere CSS pentru a decide cum să facă o pagină, pe baza măsurătorilor minime și maxime ale lățimii. Punctele de pauză în legătură cu lățimea browserului încep întotdeauna cu @media (argument lățime) și sunt foarte ușor de citit. Ele pot conține, de asemenea, un al doilea argument într-un alt set de paranteze, care permite o mare flexibilitate pentru mai multe dispozitive.
În exemplul de cod de mai jos, am creat mai multe reguli care definesc culorile de fundal pentru patru puncte de rupere comune Bootstrap responsive, modificate ușor pentru a afișa o tranziție lină de la o culoare la alta.
/ * Culorile de fundal de bază pentru puncte de pauză receptive * / / * Max-lățime 480px peisaj și jos * / @media (max-width: 480px) .container background: # f1ea81; .container: după conținut: "Telefon pe orizontală la maximum 480px și jos"; / * Min-lățime 481px și lățime maximă 767px peisaj telefon pe portret * / @media (min-width: 481px) și (max-width: 767px) .container background: # a7f7e5; .container: după content: "Min-width 481px și maxim-lățime 767px peisaj telefon pe portret comprimat"; / * Min-lățime 768px și lățime maximă 979px portret de tabletă pe peisaj * / @media (min-width: 768px) și (max-width: 979px) .container background: # c4deff; .container: după conținut: "Min-lățime 768px și lățime maximă 979px, comprimat portret pe peisaj"; / * Ecran lat cu dimensiunea de 980px * / @media (min-width: 980px) și (max-width: 1199px) .container background: # fde3ff; .container: după conținut: "Min-width 980px, max-width 1199px, format desktop"; / * Afișaj lat cu o lățime de 1200px * / @media (min-width: 1200px) .container background: # ffc4c4; .container: după content: "Min-width 1200px, format widescreen";
Am construit un aspect pe deplin receptiv, dar încă lipsesc lucrurile bune. Restul acestui tutorial vă va arăta cum să adăugați interes vizual prin conținut și interactivitate.
Acum că schela este în loc, putem începe să adăugăm conținut. Sunt în mod deliberat păstrând aceste viziuni cutii generice-gri cu stiluri minime încurajând utilizatorii beta să se concentreze în mod direct asupra interacțiunii și să nu se agațe prea mult de stilul vizual.
Unitatea Hero este concepută pentru a crea o chemare în față și centru. Descărcările de cod, noile aplicații sau știrile de ultimă oră sunt candidați buni. În scopurile noastre, o voi folosi pentru a anunța o actualizare majoră a software-ului. Înlocuiți existența h2 și p etichete din conținutul principal cu codul de mai jos și actualizați browserul pentru a vedea eroul în acțiune.
Versiunea 2.0 este aici!
Toate caracteristicile noi, o mulțime de îmbunătățiri
Un pachet mai perfect’nu este posibil să găsească
Echipa noastră a fost ocupată în ultimul an, reînnoind complet lucrările interioare ale aplicației noastre. Încărcarea mai rapidă a paginilor, o căutare mai bună și integrarea mobilă.
Descarcă acum
Unitatea de eroi este un început bun, dar oamenii vor să vadă unde vor merge timpul și banii lor. O galerie de imagini este o continuare puternică și este o soluție rapidă de implementat. Imaginile sunt prezentate folosind același Spann grilă care definește blocurile de aspect și poate fi ușor extinsă pentru a include titluri, etichete, legende sau micro-date. Pentru moment, vom folosi Placehold.it pentru a genera trei cutii gri sub unitatea noastră de eroi.
Sunt un mare credincios în marcarea semantică, așa că vom folosi HTML5 figura și figcaption tag-uri pentru contextul crescut. Chiar dacă niciunul dintre utilizatorii dvs. nu navighează cu un ecran de redare sau cu alt dispozitiv de asistență, marcajul descriptiv este o bună practică pentru UX și dezvoltarea front-end.
Adăugați o listă neordonată și câteva imagini în interiorul conținutului principal, sub elementul dvs. de erou, cum ar fi:
Aceasta este o scurtă legendă.
Aceasta este o scurtă legendă.
Aceasta este o scurtă legendă.
O altă reîmprospătare a browserului ar trebui să aibă un aspect asemănător cu acesta, atunci când este vizualizat ecranul lat.
Unitatea de erou și imaginile adaugă o mulțime de interes vizual, dar subliniază următoarea noastră provocare: link-urile bullet point în picioare pentru un element de navigare adecvat.
Bootstrap are mai multe stiluri de navigare încorporate, astfel încât experimentarea este încurajată. Voi sublinia navigația cu fișiere de aici. Prima noastră comandă de afaceri este de a înlocui lista de navigare de bază:
Apoi, să eliminăm fundalul gri de la noi antet și nav elemente. Adăugați următoarele patru linii la sfârșitul dvs. user.css fişier.
header [class * = "span"], nav [clasa * = "span"] fundal: #fff;
De asemenea, trebuie să actualizăm bine conținutul principal. Am adăugat o clasă de Fila conținut la secțiune element, și a împachetat eroul și imaginile într-un div cu class = "tab-panel active" și id = "Fila1". Am adăugat și alte trei div elemente de mai jos, cu codurile de identificare care se potrivesc cu etichetele linkului de navigare. Aceste trei blocuri sunt pentru a fi completate mai târziu, dar vor fi utile pentru testare. Actualizați secțiune marcarea și actualizarea browserului. Dacă totul merge bine, ar trebui să puteți trece prin file și să vizualizați conținutul stubbit.
Taburile sunt reci, dar sunt și ele un început. Deși Internetul devine rapid segmentat și asemănător aplicației, acesta este în continuare determinat de legăturile de la o resursă la alta. Legăturile sunt folosite pentru a cârga paginile împreună, pentru a oferi un context suplimentar și, uneori, pentru a găzdui funcții secundare. Sfaturi și popovers sunt bune exemple de funcție secundară; ele sunt ușor de implementat cu atribute de date personalizate.
Care sunt atributele de date? Per John Resig, care a scris despre aceste dispozitive clare în 2008:
Pur și simplu, specificația pentru atributele de date personalizate afirmă că orice atribut care începe cu "date-" va fi tratat ca o zonă de stocare pentru date private (privat în sensul că utilizatorul final nu îl poate vedea - nu afectează aspectul sau prezentare).
Aceasta înseamnă că putem adăuga date personalizate la etichetele noastre de legătură, iar Bootstrap o va gestiona în consecință.
Să presupunem că galeria noastră de imagini este alcătuită din informații tehnice. Descrierile ar putea include o terminologie neclară pentru utilizatorul mediu. Activați sfaturile de instrumente înlocuind galeria de imagini HTML, începând cu lista neordonată și adăugând un jQuery $ (Document) .ready funcția și funcția de tip instrument de tip Bootstrap în partea de jos a paginii.
Aceasta este o scurtă legendă. Acesta conține o limbă tehnică, cum ar fi termeni specifici domeniului, cum ar fi HTML
Aceasta este o scurtă legendă. Acesta conține o limbă tehnică, cum ar fi termeni specifici domeniului, cum ar fi CSS
Aceasta este o scurtă legendă. Conține o limbă tehnică, cum ar fi termeni specifici domeniului, cum ar fi JS
// Adăugați doar deasupra etichetei pentru corpul de închidere // Activați vârfurile de instrument
Cu HTML și Javascript în loc, reîmprospătați browser-ul și rolați-le peste link-urile galeriei pentru a dezvălui sfaturile dvs. de instrument.
Acum vom adăuga partajarea la galeria noastră de imagini (cel puțin într-un mod wireframe-y) cu popovers. Popovers sunt activate prin includerea atributelor de date în marcajul dvs. și un alt fragment de JavaScript.
Mai întâi, să adăugăm un buton de distribuire fiecăruia dintre subtitrările noastre imagine. Adăugați blocul de cod chiar sub eticheta paragrafului de închidere din fiecare figcaption.
Stare de nervozitate
Tumblr
Flickr
"data-title =" Partajați această imagine "> Partajare
S-ar părea ciudat să plasezi fiecare element pe propria linie, dar am descoperit că Bootstrap este destul de pretențios în ceea ce privește marcarea bine formată și este mai ușor să găsești erorile pe rând în același timp. Trebuie să scriem câteva rânduri de JavaScript și popoverele vor fi gata.
// Preveniți acțiunile de legături implicite și săriturile de pagină var links = $ ('a'); links.on ("faceți clic", funcția (e) e.preventDefault ();); // Activează popovers var popovers = $ ('a.popover-link'); popovers.popover (); De data aceasta am adăugat o funcție de link-uri generale pentru a împiedica ecranul să sărind atunci când utilizatorii fac clic pe butonul Share. Fără a trece prea mult în specific, fiecare acțiune de pe o pagină web înregistrează un eveniment, pe care îl capturăm aici ca argumentul funcției "e". Prin interceptarea acestui eveniment și înlocuirea lui cu JavaScript personalizat, pagina rămâne acolo unde ar trebui și popover-ul nostru apare așa cum se aștepta.
Whew. După toate acestea, ferestrele modale vor fi un cakewalk. Bootstrap generează ferestre modale prin adăugarea unui bloc de HTML în partea superioară a containerului dvs. și printr-un buton sau un link cu un href care să corespundă ID-ului ferestrei modale. Mai întâi, HTML-ul modal.
Singurul alt lucru de făcut este să adăugăm declanșatorul nostru. Deoarece aceasta este o aplicație, vom avea dreptate să presupunem că va exista o secvență de autentificare. Am modificat antet pentru a scurta zona bannerului și a adăuga butonul de conectare de lângă caseta de căutare. Modificați următorul cod HTML și adăugați codul CSS la sfârșitul paginii dvs. user.css fişier.
Aplicația mea minunată
Logare
/ * Caseta de căutare * / intrarea antetului margin-top: 20px; lățime: 70%; plutește la stânga; / * Butonul de conectare * / header a float: right; margine: 20px 0 0 20px;
Actualizați și dați clic pe butonul Conectare. Ar trebui să fii recompensat cu o animație rapidă, iar fereastra modală să prezinte fața și centrul.
Această rețea wireframe interactivă vine de-a lungul frumos. Avem navigare care funcționează, multe blocuri pentru adăugarea de conținut, interactivitate și un aspect receptiv. Ceea ce nu avem este o modalitate de a căuta lucruri, chiar și într-un sens de testare a utilizatorilor. Încă o dată, Bootstrap ne-a acoperit.
Utilizatorii sunt obișnuiți cu caseta de căutare afișată în mod vizibil în colțul din dreapta sus al afișajelor desktop și chiar sub titlul ecranelor mai restrânse. Vom începe prin ruperea antet element în două blocuri și adăugând o singură intrare către cele mai mici:
Aplicația mea minunată
Vom adăuga, de asemenea, câteva linii de CSS la user.css fișier, pentru a împinge caseta de căutare din partea de sus a paginii.
/ * Caseta de căutare * / intrarea antetului margin-top: 20px; lățime: 90%;
Vom scrie, de asemenea, o cantitate puțin mai mare de JavaScript pentru a face ca tipograful să funcționeze corect. Voi păstra la minim, și voi explica ce face fiecare scenariu.
Îmi imaginez că unii dintre voi vă gândiți "Eu sunt un web proiectant, nu un dezvoltator. Punct echitabil, dar trebuie să testăm cel puțin apele JavaScript pentru a debloca puterea completă a lui Bootstrap. Și pe lângă: clienții sunt uimiți când o casetă de intrare începe să returneze rezultatele de la prima literă pe care o introduc.
Adăugați fragmentul JavaScript mai jos în eticheta de script existență și apăsați pe Reîmprospătare. Dacă funcționează corect, ar trebui să vedeți un meniu derulant cu rezultate sugerate după ce ați introdus una sau mai multe litere în caseta de căutare.
var search = $ ('input # search'); ("Dave Mustaine", "Tom Morello", Jim Root, Kirk Hammett, Joe Perry, Jimi Hendrix, Eric Clapton, Billy Duffy, , "Johnny Hickman", "Eddie Van Halen", "Dimebag Darrell", "Noel Gallagher"], articole: 5); Bine, iată ce face codul. var search = $ ('input # search') spune jQuery să stocheze o referință la caseta de căutare din variabila numită căutare. Apoi sunăm sau invocăm funcția jQuery din variabila noastră de căutare și sunăm și metoda Bootstrap typeahead. În interiorul parantezei tip "headhead", veți observa o deschidere și o închidere îngustă . Aceste paranteze sunt folosite pentru a crea un obiect JavaScript și pentru a stoca câteva informații despre caseta noastră de căutare.
Prima informație este sursă matrice. În cel mai simplu mod, o matrice este o listă ordonată de lucruri. Aici este o listă de chitaristi. Fiecare jucător de chitară adăugat la matrice va fi disponibil ca urmare a intrării în căutarea noastră. A doua parte a obiectului, articole: 5 comunică căsuței de căutare numărul maxim de rezultate afișate.
Acestea sunt doar două din mai multe opțiuni disponibile. Vă încurajez să vă uitați la documentația de tip Bootstrap și să experimentați diferite configurații. Ecranul final pentru acest pas ar trebui să pară similar cu acesta:
Bootstrap a devenit un capăt în fluxul de lucru din față. Îmi permite să testez când iterațiile sunt relativ nedureroase și încercați mai multe abordări diferite simultan. Aceste descoperiri ajută să ghideze deciziile de proiectare finale și contribuie la evitarea schimbărilor care durează mult în timpul ciclului complet de dezvoltare. Prin tratarea cadrelor wireframe ca parte critică a experienței utilizatorului, pot să construiesc instrumente care se simt mai naturale și sunt mai plăcute.
Tocmai am zgâriat suprafața lui Bootstrap și ceea ce este posibil folosind setul de piese. Carcasele de tip wireframe sunt un loc minunat pentru a începe învățarea insulelor și a ieșirelor - ele sunt menite să fie lo-fi, modele de testare timpurie de aplicații pline de vină. Clientii si colegii nostri ne pot testa ipotezele si ne pot ajuta sa ne rafinati rapid, cu un timp minim pierdut.
Sper că ți-a plăcut acest tutorial, mulțumesc pentru lectură!
