Share
În partea de deschidere a acestei sesiuni privind Fundația Cadru, am aruncat o privire asupra modului în care ați putea folosi acest cadru, ce poate face și cum puteți crea o construcție personalizată. În această parte vom examina în detaliu sistemul de rețea, demonstrând câteva exemple pe măsură ce mergem. De asemenea, vom scutura puțin lucrurile și vom arunca o privire asupra pluginului Orbit JavaScript Slider; un glisor mare pentru afișarea tot felul de conținut.
Utilizăm doar o singură pauză majoră pentru grilă în Fundație pentru a schimba aspectul ecranelor de peste 768px.
Fundația este un cadru modern care favorizează prima abordare mobilă. Acest lucru înseamnă că codul minim gol și activele sunt încărcate mai întâi pentru a ajuta la viteza de redare a paginii. Ca și în majoritatea cadrelor moderne, Fundația este pe deplin receptivă. Spre deosebire de cele mai multe, se folosește doar un punct de pauză pentru schimbări structurale. Punctul de pauză definește lățimea ferestrei la care este pusă în funcțiune grila mare, acest lucru se întâmplă la 768 de pixeli.
Sistemul de rețea propriu-zis are trei părți; grila desktop, rețeaua mobilă și grilă bloc. Deoarece fundația este mobilă în primul rând, să începem cu grila mobilă.
Aceasta este Fundația
Codul de mai sus este format din trei clase importante; prima fiind clasa "rând" care deține coloanele noastre, mult în același fel în care un rând dintr-o foaie de calcul conține coloane de celule. În acest demo vom folosi o grilă cu douăsprezece coloane, deci doisprezece este numărul maxim de coloane pe care le putem avea într-un rând. Spunând că, dacă aveți nevoie de mai mult, Fundația suportă până la șaisprezece coloane pe care le puteți selecta în formularul personalizat de construire.
Clasa care definește coloanele de aici este mici-12, schimbarea numărului din această clasă definește lățimea coloanei respective. Utilizând "small-12" pe cont propriu, însă, se definește doar lățimea. Pentru a crea o coloană, trebuie să o asociem cu clasa "coloane". Aceste trei clase sunt baza sistemului de rețea.
Pur și simplu, marcajul de mai sus dictează că există un rând, cu un div care va ocupa 12 coloane în valoare de spațiu (100% din lățime). În interiorul celor douăsprezece coloane este conținutul nostru. Să aruncăm o privire la o versiune puțin mai complexă.
Aceasta este o bara laterală
Aceasta este zona de conținut
În acest cod putem vedea că există două divuri cu clasa "coloane". Fiecare este cuplat cu o clasă (cum ar fi "mic-4") pentru a dicta dimensiunea specifică. Fundația apoi linii aceste coloane sus unul lângă celălalt, spre deosebire de unul peste celălalt, așa cum ar face în fluxul normal de documente HTML. Cele două coloane ocupă o lățime de patru coloane și, respectiv, opt coloane. Cei doi au un total de douăsprezece coloane; "Mic-4" fiind de aproximativ 33,3%, iar "mic-8" fiind de aproximativ 66,6% din lățimea corpului.
Ceea ce este important să realizăm aici este că aceste diviziuni sunt aproape infinit instabile. Acest lucru oferă o mare flexibilitate, de exemplu:
Aceasta este o bara laterală
# 1
Titlul postului
Aceasta este zona de conținut
Puteți vedea că în bara laterală am adăugat conținut într-un anumit conținut utilizând un rând, într-o coloană, într-un rând, de această dată folosind trei coloane de dimensiuni diferite. Chestii grozave e? Ei bine, probabil că este timpul să aruncăm un cod de mare ecran pentru a profita din plin de sistemul de rețea.
Aceasta este o bara laterală
Aceasta este zona de conținut
Aici am adăugat o clasă suplimentară în fiecare dintre coloanele noastre mare-3 și mari 9. Aceasta spune Fundației că atunci când site-ul este privit pe un ecran mai mare, ar trebui să schimbe lățimea barei laterale de la mici-4 cu de la 33,3% la mare-3 care echivalează cu aproximativ 25% din lățimea corpului. Domeniul nostru principal este astfel capabil să crească, oferind mai mult spațiu pentru conținut. Acesta este un exemplu simplist, dar devine foarte util atunci când vine vorba de rearanjarea aspectului pentru diferite dimensiuni ale ecranului.
În timp ce ne uităm la sistemul de rețea merită menționat faptul că prin utilizarea mare centrată și mici centrată puteți centra o coloană rapid și ușor, deși puteți face acest lucru doar dacă există o coloană în rând. De asemenea, puteți manipula ordinea elementelor utilizând Apăsați și Trage clase.
39, ultimul
Aceasta are cea de-a doua div, care va fi de obicei afișată după prima și o trage în față, în timp ce împingeți prima pentru a apărea ulterior. Prin urmare, puteți avea o listă în stânga și un conținut pe partea dreaptă pe afișajele mari, însă împingeți-l mai jos pe afișajele mici.
După ce am acoperit intrările și ieșirile din sistemele de rețea, ne putem uita la grila de bloc care este folosită pentru a păstra elementele listate în mod egal distanțate, indiferent de mărimea ecranului. Acestea sunt ideale pentru conținutul blocat (cum ar fi cel generat de o aplicație), deoarece acestea nu necesită rânduri sau chiar coloane pentru a fi afișate corect. Dacă aspectul dvs. este destinat să fie același pe desktop și mobil, atunci trebuie doar să utilizați small-block-grid- # clase.
Acest lucru este valabil și pentru rețelele despre care am vorbit anterior. În loc de a folosi mici-12 și mare-12 ai nevoie doar de tine mici-12. Uşor.
Aceasta încheie sistemele de rețea pe care Fundația le oferă în formele lor de bază. Rețineți că grila mică va trece la grila mare după ce lățimea ecranului va atinge punctul principal de rupere. Utilizați grilajul mic pentru a viza dispozitivele mai mici și cele mari pentru ceea ce sunt de obicei desktopuri și ecrane mai mari.
Vom scutura lucrurile puțin, introducând unul dintre pluginurile utile ale Fundației; Orbită.
Acest plugin util poate fi folosit ca un cursor, permițându-vă să glisați în imagini, video sau conținut HTML obișnuit. Cu un marcaj simplu este ușor să vă faceți griji și este un adevărat plăcut pentru ochi atunci când este folosit în mod corespunzător.
Orbit utilizează o structură de listă; fiecare element de listă fiind afișat ca un diapozitiv. Aici, împreună cu etichetele de imagine obișnuite, elementele din listă conțin un div cu clasa orbită-legendă permițându-ne să plasăm o subtitrare pe fiecare imagine. Orbit ia acest cod și adaugă un marcaj mai mare pentru a face lucrurile să funcționeze. De asemenea, include o grămadă de opțiuni pentru afișarea paginării, a comenzilor și chiar a unui cronometru.
Uitați-vă la câteva exemple de parametri pe care le puteți modifica în orbită:
timer_speed: 10000, animație_speed: 500, gloanțe: true, stack_on_small: true
Acestea includ viteze, paginare bullet și opțiunea de a stivui pe ecrane mici. Este important să rețineți că acestea sunt transmise la inițializare, deci va trebui să vă luați standardul $ (Document) .foundation ();, găsite în partea de jos a index.html incluse în descărcare:
apoi treceți în opțiunile de orbită.
Pe lângă opțiunile afișate aici, puteți adăuga clase la toate elementele produse de plugin. Aceste opțiuni suplimentare (și mai mult) pot fi găsite în documentele Fundației.
Notă: Descărcarea Fundației dvs. va include toate fragmentele și fragmentele JavaScript pe care le-ați ales, compilate într-un fișier miniat. Aceasta este menționată în partea de jos a index.html, dar puteți, de asemenea, opta să dezarhivați fișiere JavaScript individuale dacă preferați:
Doriți să jucați cu Fundația chiar acum, fără să o descărcați? Sau poate doriți un mediu curat pentru a testa noi idei? Apoi verificați acest jsfiddle la îndemână. Utilizează ultima construcție a Fundației și include toate componentele.
În această parte a ghidului Fundației am acoperit sistemele de rețea și am vorbit pe scurt despre pluginul Orbit. În următoarea tranșă vom examina navigația și pluginul secțiunii, împreună cu un alt instrument util ...
Accentsconagua