Share
În această parte a "Fundației pentru începători" vom analiza butoanele, dropdown-urile și pluginul "Clearing".
Fundația are un set solid de butoane și sunt foarte ușor de implementat. Pur și simplu adăugați o clasă de "buton" la orice element de ancoră, intrare, div sau buton pentru a vedea că se transformă într-un glorios buton de stil. Acest lucru vă oferă doar butonul cutie standard, dar există o gamă largă de stiluri și tipuri de butoane pe care le puteți utiliza. Iată un exemplu rapid:
Tasta prestabilită Tastă mică Buton mic Buton mare Buton secundar buton de alertă pentru butonul de succes Buton rotund buton rotativ Butonul dezactivat
Acest exemplu demonstrează toate dimensiunile, stilurile și stările presetate. Fiecare oferă destul de multă flexibilitate; toate presetările pot fi înlocuite cu stiluri personalizate, ceea ce înseamnă că nu este nevoie să vă construiți butoanele de la zero.
Butoanele utilizează clase înlănțuite pentru a obține stiluri diferite. De exemplu, începeți cu "butonul" apoi adăugați o dimensiune, "mică", o culoare, "succes" și o rază "rotundă". De asemenea, puteți dezactiva orice buton adăugând "dezactivat", ilustrând cât de versatil este această abordare de design.
Butoanele de bază sunt destul de simple pentru a fi implementate, iar grupurile de butoane sunt la fel de ușor. Ei folosesc o structură listă simplă, cum ar fi:
Acest lucru vă va oferi un grup standard de trei butoane, cu toate acestea puteți adăuga clase și clase de rază pentru a controla lățimea, "chiar-2", "chiar-3" până la "even-8". Aceste clase de lățime sunt utilizate pentru a umple spațiul disponibil cu butoanele dvs. și sunt utilizate cel mai bine atunci când numărul din clasa uniformă se potrivește cu numărul de butoane prezente. De exemplu, dacă aveați patru butoane, atunci "even-4" ar fi cea mai bună alegere.
Butoanele de butoane pot fi descrise ca fiind un grup de grupuri de butoane. Luați un div, adăugați class = "buton-bar" la acel div și locați cât mai multe grupuri de butoane pe care le doriți în interiorul acestuia. Acest lucru poate fi un ajutor real atunci când vine vorba de aspecte mai complexe ale butoanelor. Iată un exemplu:
- Butonul 1
- Butonul 2
- Butonul 3
- Butonul 1
- Butonul 2
- Butonul 3
Pe ecrane mici, fiecare grup de butoane din bara este stivuit automat, permițând o privire curată pe orice ecran. Prin luarea opțiunilor acoperite în fiecare dintre secțiunile de mai sus, puteți merge cu adevărat în oraș pe butoanele dvs..
În ultima revizuire majoră a Fundației a fost introdus un nou plugin JavaScript numit dropdown-uri, care vine într-adevăr la îndemână atunci când este stratificat deasupra butoanelor. Marcajul necesită, în esență, adăugarea unei clase "dropdown" în butonul dvs., cu adăugarea unui atribut personalizat, și anume "dropdown date".
Urmați acest lucru cu o listă neordonată care conține un id care se potrivește cu atributul dropdown de date, de exemplu:
Buton de eliberare
De asemenea, este important să rețineți că clasa "f-dropdown" de pe ul este foarte importantă, așa că nu uitați să o adăugați.
Notă: Nu uitați să includeți meniul dropdown în descărcarea Fundației.
Ultimul strat de flexibilitate cu care trebuie să jucați este opțiunea de a adăuga o împărțire în butoanele dvs. Acest lucru poate fi folosit pentru a indica disponibilitatea unei meniuri, a unei descărcări, a ceea ce vreți cu adevărat. Adăugați-o pe butonul dvs. utilizând clasa "split" și un element de tip span care ar trebui să includă același atribut "dropdown" de date pe care l-am folosit mai devreme în exemplul dropdown.
Buton de eliberare
Deoarece JavaScript-ul dropdown este un plugin simplu, există doar o singură opțiune de jucat cu - definirea numelui de clasă aplicat drop-down-ului când este deschis:
Accentsconagua
$ (document) .fundație ("dropdown", activeClass: 'deschis'); Îndepărtarea ușurează crearea de cutii de lumină receptive cu orice dimensiune a imaginii.
Clearingul este un plug-in super-rapid cu lightbox. După cum vă puteți imagina, marcajul este simplu simplu și este foarte util atunci când glisorul orbite nu funcționează pentru dvs..
Până acum veți fi foarte familiarizați cu modul în care Fundația funcționează cu structuri de listă și sunt din nou în centrul acestui plugin. Construiți o listă neordonată, cu un anumit conținut în fiecare element de listă. Adăugați o clasă "clearing-thumbs" la ul, plus un atribut gol personalizat al "clearing-ului de date".
Dacă ați adăugat o clasă "clase de compensare" la prima literă din structura ul dvs., atunci Fundația va afișa aceasta ca imaginea recomandată în selecția dvs. cu casete lightbox. Merită remarcat faptul că compensarea folosește structura rețelei bloc pe care am acoperit-o mai devreme în serie. Acest lucru vă ajută să vă asigurați că toate miniaturile au aceeași înălțime și sunt uniform distribuite.
Urmând acoperirea completă a butoanelor și a dropdown-urilor, putem aștepta să acoperiți formularele personalizate și comutatoarele. ne vedem acolo!
