În această lecție vom analiza diferite modalități de a crea o interfață modernă de stil UI (Metro).
Conceptul de interfață "UI modern"
UI modernă este interfața Microsoft, care constă din panouri cu unghi drept, care conțin text mare și executate în culori luminoase. În această interfață, animația (tranziții netede, efecte la mutarea și mutarea, etc.) joacă, de asemenea, un rol important. Interfața "UI modernă" a fost dezvoltată pentru Windows Phone și apoi a apărut în sistemele de operare Windows 8, pe site-ul Microsoft și în alte aplicații. Acum, mulți dezvoltatori web folosesc stilul "Moder UI" pentru a crea interfețe de pe site sau pentru a le folosi.
Creați o interfață a site-ului în stilul "UI modern" pe care o puteți folosi manual (folosind un ansamblu personalizat) sau puteți utiliza soluții gata.
Un ansamblu personalizat Bootstrap pentru implementarea unei interfețe asemănătoare UI-ului modern
Pentru a face ca interfața standard Bootstrap să fie mai asemănătoare cu "Moder UI" (Metro), trebuie să eliminăm colțurile rotunjite ale componentelor Bootstrap. Acest proces este arătat în detaliu în imaginile de mai jos.
Pasul 1. Schimbați raza (@ border-radius-small. @ Border-radius-small. @ Border-radius-large) pentru majoritatea componentelor Bootstrap.
Pasul 2. Schimbați raza (@ pager-border-radius) pentru componenta "Pager".
Pasul 3. Schimbați raza (@ insigne-rază de margine) pentru componenta Insigne (Icoane).
După personalizarea ansamblului personalizat, trebuie să dați clic pe butonul "Compilați și descărcați" și să conectați ansamblul personalizat Bootstrap la proiectul web.
Descărcați ansamblul terminat Bootstrap fără colțuri rotunjite la link-ul de mai jos.
Dar componenta "Label" Bootstrap a rămas cu colțuri rotunjite datorită faptului că ansamblul utilizator nu oferă o astfel de opțiune. Pentru a obține acest lucru, trebuie să creați propriul fișier CSS și să-l conectați după Bootstrap CSS. În acest fișier, trebuie să creați o clasă de etichete cu proprietatea radiusului: 0px; .
Soluții gata făcute pe baza platformei Bootstrap, implementarea interfeței în stilul "UI modern"
1. Metrou UI CSS 2.0.
Această ansamblu este conceput pentru a crea site-uri cu o interfață similară cu Windows 8 de la Sergey Pimenov din Ucraina. Metro UI CSS 2.0 conține un număr mare de componente suplimentare care fac interfața cu adevărat similară cu "UI modern".
2. Bootmetro.
Acest proiect este conceput pentru a crea o pagină web asemănătoare cu meniul de pornire al Windows 8. Din păcate, Bootmetro se află în stadiul alfa, ceea ce limitează utilizarea acestuia pe site.
3. Metro-bootstrap.
Acest ansamblu, format din fișiere și fonturi CSS, este conceput pentru a oferi dezvoltatorilor web și designerilor componente care implementează anumite elemente ale interfeței "Moder UI".
4. Șablon UI Metro.
Model pentru implementarea interfeței "Moder UI". Din păcate, proiectul și-a încetat dezvoltarea și numai vechea versiune a acestui șablon este oferită pentru descărcare.
5. Cosmo. Cosmo este tema pentru Bootstrap, care face ca componentele sale să fie similare vizual cu componentele interfeței "Modern UI".
6. Șabloane plătite (teme):
Articole similare
Trimiteți-le prietenilor: