Bootstrap jellemzői

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.