A Bootstrap 3 szerint először a mobil, a későbbiekben pedig minden más

A weboldal előlapi rendszere, a Bootstrap szinte mindent biztosítva egyszerűsíti a reagáló webes alkalmazás létrehozását. A Bootstrap korábbi verziói az asztali kliensekkel kezdődtek, és kisebb felhasználói felületekre cserélték a felületet. A Bootstrap ezt a megközelítést az aktuális kiadással (v3.0.0) kezdve elmozdította azzal, hogy először mobil volt. Tehát a jelenlegi Bootstrap verzióval (és azon túl) épített webhelyek a mobil eszközöket célozzák meg, és a képernyő méretétől függően méretezik a nagyobb képernyőket.

Nem kompatibilis

Az első tapasztalatom a Bootstrap legújabb verziójáról meglehetősen sokkoló volt, mivel egy meglévő alkalmazást a Bootstrap 2.3.2-rel építettük át az erőforrás-hivatkozások (CSS és JavaScript) egyszerűen a 3.0.0-s verziókra történő frissítésével. Ezeknek a változásoknak a nettó eredménye egy kezelt oldal volt, amelynek nem kellett volna meglepnie, mivel ezt az információt világosan meghatározták a keretdokumentációban. Igen, elolvastam a dokumentációt, de meg kellett próbálnom, hogy megnézhessem.

A legfrissebb verzió nem kompatibilis számos osztályváltozással. A legjelentősebb változások a folyadékosztályok (.tartály-folyadék és .row-fluid) eltávolítása, amelyeket reagáló interfészek létrehozására használtak. A Bootstrap 3.0.0 esetén a webhelyek alapértelmezés szerint reagálnak, de lehetőség van arra, hogy letiltják ezt a funkciót. Elmúltak a pixel szélességű oldalak napjai - köszönj a továbbiakban a százalék alapú elrendezésekhez. A problémákat okozó egyéb változások között szerepel a keresési űrlapvezérlők (.form-műveletek és .form-keresés) és az .navbar-belső osztály eltávolítása.

Túl sok osztályváltoztatás van itt, hogy lefedje ezeket, de az online dokumentáció tartalmazza az összes szükséges részletet, valamint a 3.0.0 egyenértékű funkciókat (ha vannak). Ezen felül a hivatalos Bootstrap blogbejegyzés, amely bejelenti az új verziót, hasznos információkat tartalmaz.

Rengeteg új funkció

Új osztályokat és funkciókat adtak a kerethez. Az egyik új funkció, amelyet az újjáépítendő webhelyen használok, a panelelem (A ábra ), amely lehetővé teszi az információs panel (opcionális fejléc és lábléc) elhelyezését az oldalra. A panel tartalmazhat szegélyt, az ügyfél színsémáját, valamint összecsukhatóan is. Ezen kívül vannak osztályok a listacsoportokhoz, az új űrlapvezérlők és a bélyegképek.

A ábra

A navigációs sáv osztályát átalakították egy olyan rögzített navigációs sáv használatával, amely mindig látható az oldal tetején, vagy egy statikus navigációs sáv használatával, amely indokolt ( B ábra ). Számos online példa található (feltételezem, hogy a Bootstrap továbbra is további példákat fog felvenni), amelyek jó érzést adnak a dolgok működéséről.

B. ábra

Rács alapú

A Bootstrap 3.0.0 egy rács alapú rendszert használ az elrendezéshez és a megjelenítéshez. Négy rácsosztályt foglal magában, amelyek különböző eszközöket céloznak meg: asztali számítógépeket (normál és nagy), telefonokat és táblagépeket. Ezek az osztályok felhasználhatók tartalom / elrendezés továbbítására az eszköz vagy a hálózat alapján. A Bootstrap 3.0.0 általában jobb áramlást és méretezést ígér, de még nem láttam elegendő webhelyet, amelyek ezt az állítást ellenőrzik.

Böngésző támogatás

A Bootstrap 3.0.0 dokumentációja frissült és kibővült, és nagyon könnyű információt találni. A szolgáltatások és az osztályok dokumentációja nagyszerű, míg a böngésző támogatásáról és a megoldásokról érdekes információk találhatók. Például a Bootstrap már nem támogatja az Internet Explorer 7 és a Firefox 3.6 alkalmazást, és vannak problémák az Internet Explorer 8-10 és más böngészőkkel; a dokumentáció részleteket tartalmaz arról, hogy miként lehet a webhelye legjobban működni ezekkel a böngészőkkel.

A dokumentációnak van egy szép része (linkekkel) a hozzáférhetőségről.

Frissítés az előző verzióhoz képest

Az, hogy mindenre reagálnak, sok problémát okozott a régebbi webhelyeken, és a megújult navigációs sáv nagyszerű új funkciókat tartalmaz, de sok újítást igényel. Tehát, amikor frissít vagy korszerűsít egy webhelyet, amely a Bootstrap korábbi verziójával (vagy verzióival) készült, számos változtatást kell végrehajtania.

Mivel a Bootstrap 3.0 eltérően kezeli a képernyőfelbontásokat, át kellett írnom a meglévő Bootstrap 2.3.2 kódot, hogy az ügyfél képernyőméreteinek új osztályait felhasználhassam, amelyeket asztali, táblagépekre és telefonokra lehet testreszabni. Más apróbb változtatásokhoz, például a keresési űrlap és a harmonika osztályok eltávolításához, újra kellett dolgozni.

Nagy változás volt számomra, amikor bekapcsolódtam a mobil első gondolkodásmódba egy webes alkalmazás fejlesztésekor. Kiindulási pontként az asztali számítógépet használtam, de ez egy ipari és társadalmi változás, amelyet nem lehet figyelmen kívül hagyni. Ez világossá vált, amikor egy ügyfél nemrégiben kijelentette: "Nem akarok különálló kialakítást a mobilhoz, de szeretném, ha a webhely működne az iPhone-on."

Lenyűgöző kiindulási pont

A Bootstrap nagyszerű alapot nyújt a teljes funkcionalitású, reagáló webalkalmazások létrehozásához, amelyek elméletileg minden platformon működhetnek. Ez nem történik meg automatikusan - továbbra is meg kell terveznie és kiépítenie az alkalmazást, figyelembe véve a platformokat, ami alapos tesztelést igényel a különféle ügyfelek között, hogy megbizonyosodjon arról, hogy minden a tervek szerint működik. Nézze meg a BrowserStack alkalmazást a folyamat ezen részén.

Ossza meg az első benyomásait a Bootstrap 3.0.0-ról a beszélgetésben.

Tudjon meg többet a Bootstrap-ról a TechRepublic oldalon

  • Hozzon létre hatékony webes felületeket a Bootstrap segítségével
  • A Bootstrap webhely testreszabásának lehetőségei
  • A Divshot leegyszerűsíti a webes alkalmazások létrehozását a Bootstrap segítségével

© Copyright 2021 | mobilegn.com