A sorozat második cikkében foglalkozzunk a Bootstrap funkcióival. Ez egy teljes forráskönyvtár webhelyek és alkalmazások tervezéséhez, beleértve többek között sablonokat és űrlapelemeket, betűtípusokat és menüket.
In the előző cikk azzal érveltünk, hogy vannak esetek, amikor a tartalomkezelők nem a legjobb megoldás, és ez kód írása a semmiből egy webhely számára a megfelelő alternatíva. Ez azonban nem jelenti azt, hogy újra fel kell találnunk a kereket. A Bootstrap-hoz hasonló keretrendszerek használata nagymértékben csökkenti a tervezési időt, és megkönnyíti az eredmények elérését.
Bootstrap jellemzői
A Bootstrap funkcióinak megértéséhez meg kell értenünk paradigmaváltás a weboldal tervezésben.
amikor megjelentek a weboldalaknak csak alkalmazkodniuk kellett a különböző méretű monitorokhoz. Az idő múlásával azonban a mobiltelefonok és a táblagépek egyre inkább a felhasználók preferált hozzáférési eszközeivé váltak. A kihívás az volt, hogy az oldalakat alkalmazkodni kell a különböző képernyőkhöz anélkül, hogy a felhasználónak nagyítania, kicsinyítenie vagy mozgatnia kellett a tartalmat, hogy láthassa azt.
Elvileg a következő megközelítéseket fogadták el:
- Reszponzív dizájn: A kialakítás ugyanaz, de automatikusan a képernyő méretéhez igazodik. Ez a megközelítés bizonyos problémákkal jár, például előfordulhat, hogy a felhasználónak rá kell nagyítania az oldal bizonyos részeit, hogy láthassa azokat.
- Progresszív előrelépés: Azzal kezdődik, hogy kevesebb erőforrással (általában mobiltelefon, mert kisebb a képernyője, a böngésző kevésbé kompatibilis a fejlett funkciókhoz, és gyakran adatcsomag használata szükséges a csatlakozáshoz) megtervezzük a webhelyet az eszközhöz, kevesebb erőforrással. Amint elkészült, ezen a kialakításon alapuló funkciókkal bővül a táblagépekhez, notebookokhoz és asztali számítógépekhez való verzió.
- Fokozatos leromlás: Ez a fordított út. Először az asztali webhely jön létre, és a funkciók eltávolításra kerülnek, amíg meg nem szerzik a mobilbarát verziót.
Mivel mindig könnyebb hozzáadni, mint eltávolítani, a progresszív előrelépés az a tendencia, amelyet sikerült érvényesíteni. B.Az ootstrap például a „mobile first” megközelítést alkalmazza, azaz a tervezés alapja mindig az a verzió, amely a legkisebb képernyőméretben fog megjelenni, majd a következő méretekre való áttéréskor végrehajtandó módosítások megállapítása.
A Bootstrap használatának plusz előnye az a tény, hogy A Google a mobilbarát webhelyeket helyezi előtérbe kereséseiben.
Egy másik koncepció, amelyet figyelembe kell vennünk, a frontend és a háttér kialakítás közötti különbség. A front-end kialakítás gondoskodik mindenről, amit a felhasználó lát, és mindenről, amivel interakcióba lép. A háttérrendszer csoportosítja, hogy mi történik a szerveren. Az előbbire példa a webes űrlap. Az opciók sorozatának megjelenítése legördülő menüként jelenik meg a frontend design, hogy a kiválasztott opciót levélben küldik el, vagy adják hozzá az adatbázishoz a háttértervezés.
A Bootstrap egy olyan keretrendszer, amely a CSS-stílus és a Javascript programozás elemeit ötvözi, hogy vezérelje a megjelenítést, és interaktivitást biztosítson a HTML5-ben fejlesztett oldal összes összetevője számára.
A Bootstrap segítségével szabályozható dolgok közé tartozik:
- elérhetőség: Az olyan összetevők, mint a menük vagy párbeszédpanelek, kompatibilisek a képernyőolvasókkal, vagy alkalmasak mozgáskorlátozottak általi használatra.
- Gombok: Beleértve a mértékeket, stílusokat, állapotokat és csoportosítást.
- Űrlapok: Beleértve a renderelést, a vezérlők típusait és a bemenet érvényesítését.
- ábrázolás: A beillesztett képek eredetét, igazítását és képernyőméretét szabályozza.
- Navigációs elemek: Például elrejthető oldalsávok vagy függőleges vagy vízszintes menük az eszköztől függően.
- Tipográfia: Szabályozza, hogy a szöveg különböző részei hogyan jelenjenek meg.
- Elrendezés: A tartalom megjelenítésének beállítása az eszköztől függően
A következő cikkben néhány gyakorlati példát láthatunk a használatára.
Már alig várom, hogy tanuljak valamit a bootstrapről.
Köszönöm a rám szánt időt!