Share
Unul dintre aspectele cele mai importante ale unui cadru frontal este modul în care se ocupă de navigație. În această parte a Fundației pentru începători, vom analiza mai multe forme de navigare, împreună cu câteva instrumente JavaScript care adaugă o înflorire extra. Vă voi prezenta și un alt instrument util care vă va ajuta să deveniți un dezvoltator mai bun al Fundației.
Una dintre cele mai bune oferte oferite de Fundație are rolul de Secțiune; un plugin pentru construirea mai multor forme de navigație, cum ar fi acordeoane, file, navigație verticală și orizontală.
Iată câteva exemple de marcare:
Sectiunea 1
Conținutul secțiunii 1.
Sectiunea 2
Conținutul secțiunii 2.
Aceasta ar putea părea un pic mai complexă decât cea pe care am acoperit-o anterior, așa că permiteți-mi să vă despartă pentru dvs..
Orice secțiune pe care o creați, indiferent dacă este vorba de un acordeon sau de file sau chiar de un bar nav, începe cu un div folosind secțiune container clasă urmată de auto clasă. Pe aceeași div adăugați un gol date secțiune atribut. Acest atribut dictează cu ce fel de secțiune avem de-a face, în mod implicit Fundația presupune că dorim un acordeon. Pentru a utiliza un anumit tip de secțiune, schimbați pur și simplu auto clasa la file, acordeon, vertical-nav sau orizontal-nav. În cele din urmă, adăugați aceeași clasă ca și date secțiune valoarea atributului. Acest lucru vă va asigura afișarea tipului corect de secțiuni pentru nevoile dvs..
Odată ce pachetul a fost instalat, putem adăuga conținut. Pentru fiecare secțiune din pachetul dvs. veți avea nevoie de un titlu și de legătura respectivului titlu cu conținutul:
Sectiunea 1
Conținutul secțiunii 1.
Putem vedea aici că fiecare secțiune este înfășurată în a tag (ceea ce face lucrurile ușor, deși ați putea folosi o div). În interiorul fiecăreia dintre aceste secțiuni avem a eticheta cu o clasă de titlu care închide legătura la secțiunea corespunzătoare. Sub eticheta paragraf este div care deține conținutul pentru secțiune; aceasta are o clasă de conţinut. Duplicarea codului de mai sus va crea fiecare secțiune din interiorul agregatului secțiunii.
Notă: Adăugarea vertical-nav clasa va afișa o navigare verticală pe ecrane mari, dar va trece la un acordeon atunci când pe ecrane mici. adăugare orizontal-nav va evoca același comportament.
Să presupunem că doriți să vă conectați la cea de-a doua secțiune a agregatului secțiunii dvs., dar când deschideți pagina, acesta va afișa prima secțiune în mod prestabilit. Nu te teme! Fundația are o soluție construită sub forma Deep Linking. Pentru a face acest lucru la lucru, trebuie să adăugăm un nou atribut pachetului nostru: date-opțiuni =“deep_linking: true“. Aceasta spune Fundației că atunci când un utilizator vizitează o adresă URL cu un identificator de fragmente, cum ar fi "http://www.website.com/#section3", ar trebui să încarce pagina cu secțiunea respectivă.
Sectiunea 1
Conținutul secțiunii 1.
Sectiunea 2
Conținutul secțiunii 2.
După cum puteți vedea, am adăugat opțiunea de legătură profundă și am adăugat și date-Slug atribuiți conținutului div. Acest serviciu informează Fundația ce secțiune se va afișa la încărcarea paginii.
Fundația Side Nav (o modalitate simplă de a afișa meniurile verticale) merge mână în mână cu secțiunile. Structura HTML este foarte simplă și permite divizoare acolo unde este necesar. Să ne uităm la marcaj.
Aceasta este o listă standard neordonată, care cuprinde elemente de listă care conțin linkuri către ... și tot ce doriți. Adăugarea side-nav clasa la activ clasa poate fi utilizată pentru a arăta care link este în prezent utilizat. Dacă aveți nevoie să vă împărțiți articolele din listă, adăugați un articol listă goală cu o clasă de compas. Uşor.
Fundația Sub Nav tinde să fie utilizată pentru lucruri cum ar fi filtrarea conținutului. Marcajul este la fel de clar ca Side Nav, dar diferă în sensul că utilizează o listă de descriere în locul unei liste neordonate. Aceasta vă oferă opțiunea de a utiliza a termen împreună cu dvs. Descriere etichetele care ține legăturile dvs. Nu există subdiviziuni în Sub Nav, dar puteți folosi în continuare activ clasă. Iată marcajul:
Paginarea este, de asemenea, o formă de navigare; de fapt, paginarea trebuie într-adevăr să fie cuprinsă într-o element. Să aruncăm o privire la marcarea unor linkuri de paginare în Fundație:
Lansarea articolelor de pe listă ar trebui să fie o săgeată, care necesită clasa săgeată. Poate doriți să utilizați oricare dintre ele « sau ‹ sau poate chiar ←. Uitați-vă la unicode-table.com pentru mai multe exemple pe care le puteți utiliza.
Tipul de navigare prin tiparire ne permite să clasificăm clasele indisponibil și actual, acesta fiind foarte asemănător cu clasa activă pe care am trecut-o înainte. De asemenea, este posibil să doriți să adăugați o săgeată la ultimul element din listă, de această dată folosind oricare dintre ele » sau ›, sau poate chiar →.
Deoarece acest lucru este simpla marcare adăugând-o la un sistem de management al conținutului, cum ar fi Wordpress este destul de ușor.
Primă: Ați putea centraliza paginarea prin împachetarea tagului ul într-o nav cu -Paginarea centrat clasă. Ca și în cazul tuturor elementelor Fundației, paginarea este receptivă și ușor de înțeles.
Folosind un cadru receptiv, cum ar fi Foundation, este o modalitate rapidă de a vă face proiectul să arate excelent pe toate dispozitivele, dar testarea este încă o operă. Pentru a ușura acea durere am creat un instrument numit Respondr, permițându-vă să adăugați o adresă URL la un smartphone, tabletă și desktop, oferindu-vă șansa de a prinde rapid orice problemă.
Până acum am acoperit sistemul de rețea, blocurile de grilă, pluginul de cursor Orbit, pluginul de secțiuni și trei tipuri de navigație. Data viitoare ne vom concentra pe pluginul Top Bar, pesmet și încă un alt instrument util.
Accentsconagua