Bootstrap - interfész stílusában modern ui (metró), vezető informatikai
Ebben a leckében megnézzük különböző módon lehet létrehozni egy honlapot felület a stílus „Modern UI” (Metro).
A fogalom a felület „Modern UI”
Modern UI - interfész a Microsoft cég, amely a panelek derékszögben, amelyek nagy szöveget, és azon az élénk színeket. Ez az interfész is fontos szerepet játszik az animációt (sima átmeneteket, effektusokat, amikor megnyomásával és mtsai.). Interface „Modern UI” először kifejlesztett Windows Phone, majd megjelent a Windows 8, a cég honlapján, a Microsoft és más alkalmazásokat. Most, sok webfejlesztő használ style „Moder UI” interfész a weboldalak létrehozására, vagy tervezi, hogy használja azt.
Hozzon létre egy weboldal felület a stílus „Modern UI” lehet manuálisan (egyéni összeszerelés), vagy használja kész megoldást.
Szokás építeni Bootstrap végrehajtani egy interfész hasonló a Modern UI
Ahhoz, hogy a standard Bootstrap felület több, mint egy „Moder UI” (Metro), meg kell tisztítani lekerekített sarkok a Bootstrap alkatrészeket. Ezt a folyamatot mutatjuk be részletesen downstream képek.
1. lépés: a Sugár (@ border-radius-kicsi. @ Border-radius-kicsi. @ Border-radius-nagy) a legtöbb Bootstrap alkatrészeket.
2. lépés: Változás a sugár (@ pager-border-radius) a "pager" komponens (Pager).
3. lépés: Állítsa a sugár (@ kitűzőit átnyúló-sugár) a „Jelvények” komponens (ikonok).
Miután beállította a szokás szerelni, meg kell nyomni a „lefordítása és letöltése”, és csatlakoztassa az egyéni összeállítás Bootstrap a web projektet.
Töltse építeni kész Bootstrap sarkok lehetnek lekerekítettek is található az alábbi linkre.
De Bootstrap komponens „Label” (címke) tartózkodott lekerekített sarkokkal annak a ténynek köszönhető, hogy az egyéni szerelvények nem biztosítják ezt a lehetőséget. Hogy ezt elkerüld, létre kell hoznia saját CSS fájlt, és csatlakoztassa után Bootstrap CSS. Ebben a fájlban, akkor létre kell hozni egy címkét osztály border-radius tulajdonság: 0px; .
Kész megoldások alapján Bootstrap platform, amely megvalósítja az interfészt a stílus „Modern UI”
1. Metro UI CSS 2.0.
Ez a szerelvény úgy tervezték, hogy hozzon létre egy telepen található egy felület hasonló a Windows 8 Szergej Pimenov Ukrajnából. Metro UI CSS 2.0 tartalmaz számos további összetevők, amelyek a felület nagyon szeretem „Modern UI”.
2. Bootmetro.
A projekt célja, hogy hozzon létre egy weboldalt hasonló a start menüben a Windows 8. Sajnos Bootmetro van alpha verzió, ami korlátozza annak a honlapon.
3. Metro-bootstrap.
Ezt az összeállítást, amely a CSS fájlok és betűtípusok, célja, hogy a web-fejlesztők és a tervezők komponensek megvalósítása bizonyos elemei „Moder UI” felület.
4. Metro UI sablon.
A sablon a végrehajtását a felület „Moder UI”. Sajnos, a projekt leállt a fejlesztési és biztosított a letöltés csak a régi verzió ezt a sablont.
5. Cosmo. Cosmo - ez a téma, Bootstrap, ami miatt hasonló a komponensek a vizuális felület elemei „Modern UI”.
6. Fizetett sablonok (témák):