Bevezetés a Bootstrap komponensekbe
Eredetileg Twitter-tervnek hívták, ezt Mark Otto és Jacob Thronton fejlesztették ki a Twitteren. A Bootstrap egy ingyenes CSS-keretrendszer, amely reagálást jelent a weboldalak számára. Reagáló képességgel azt jelenti, hogy a DOM különböző elemei a képernyő méretének megváltoztatásával megfelelõen méretezik magukat anélkül, hogy veszélyeztetnék a weboldal eleganciáját, mivel ez egyébként hagyományosan történne pixel- vagy százalékos méretû CSS-módszerekkel.
Ezt a „mobil elsőként” CSS-keretrendszernek is nevezik, mivel annak célja a CSS-rács elrendezése a sorok és oszlopok meghatározásával. Ez a keretrendszer JavaScript összetevőket, valamint a CSS osztályokat is tartalmaz. Ennek a keretnek a használatához kötelezően össze kell kapcsolnia a jQuery és a JavaScript Framework for Bootstrap fájlt, valamint a többi Bootstrap CSS fájlt. Ezek a CSS-fájlok letölthetők, valamint CDN-k (Content Delivery Network) formájában is elérhetők.
Különböző Bootstrap alkatrészek:
A Bootstrap tucatnyi összetevővel van csomagolva, amelyeket újra felhasználhatunk, hogy jó felhasználói élményt és felhasználói interakciókat biztosítsunk egy weboldalon, például navigációs sávok, előugró ablakok, legördülő listák, ikonok, gombok, előre megtervezett űrlapok és különféle DOM elemek méretezési lehetőségei.
1) Képernyők - Ezek a betűkészlettel formázott ikonok, amelyek a Bootstrap-ben elérhetők. Ezek száma körülbelül 200. Ezek a glyphicons megtalálhatók a https://glyphicons.com oldalon.
Hogyan kell használni?
Vannak olyan karakterjelzők, amelyek szinte minden olyan tevékenységet megjelölnek, mint a zoom, szerkesztés, figyelmeztetés, fájl, törlés stb., És egy adott osztályban vannak meghatározva. Tehát az alaposztályt és az egyedi osztályt kell használni, ideális esetben egy span elemben, és ezeket a glyphiconeket használni.
Szintaxis:
2) Legördülő listák - Ezek a váltás alapú menük, a linkek listáját tartalmazzák. Ezeket a JS beépülő modul dinamikusabbá teszi és megtalálhatók a http: // getbootstrap / javascript / # legördülő listán.
Hogyan kell használni?
Használnia kell a .dropdown osztályt, mivel az elem osztályában a listaelemek vannak a .dropdown-menü alatt.
Szintaxis:
3) Gombcsoportok - Ezzel a Bootstrap komponensrel csoportosíthatja a gombokat egy sorba egymással.
Hogyan kell használni?
Definiálja a megosztási elemeket a .btn-group osztálytal, és helyezze be ezeket az elemeket a gomb segítségével a .btn osztályba. Helyes
Rossz
4) Gombok legördülő elemei - Ezt az összetevőt egy gomb elem alkalmazásához használják a legördülő menü elindításához.
Szintaxis:
5) Bemeneti csoportok - Ez kiterjeszti az űrlapvezérlő osztályt, és szöveget vagy gombokat ad hozzá az input elem bemeneti mezőjének mindkét oldalához. Ezen bemeneti csoportok használatához .input-group osztályt kell használnia .input-group-addon osztálytal.
Szintaxis:
@
6) Navigátor - Ezek az összetevők a webhely navigációs fejléceiként szolgálnak. Összeomlik, és függőlegesen kibővíthetők egy kisebb habarcsmenüvel rendelkező váltó hamburgermenüvel, és vízszintesvé válnak, amikor a képernyő szélessége növekszik.
Szintaxis:
7) Jumbotron - Ez egy rendszerindító elem, amely a teljes képernyőn (vagy a nézetablakban) átnyúlik, és így kulcsfontosságú tartalmat jelenít meg.
Szintaxis:
8) Figyelmeztetések - Ez egy Bootstrap összetevő egy jQuery bővítménnyel, amely a felhasználói intézkedéstől függően kontextuális visszajelző üzeneteket szolgáltat. Ez alapvetően riasztási üzenetek megjelenítésére szolgál.
Szintaxis: …
9) Folyamatjelző sávok - Ezt az összetevőt a folyamat vagy a munka előrehaladásáról szóló visszacsatolás vizuális megjelenítésére használják egy folyamatjelzővel.
Synatx:
Példa:
10) Jelvények - Ez egy olyan elem, amely valamely olvashatatlan elem, például a .badge osztály hozzáadásával a DOM elemhez, lehetőleg egy span hozzáadásával kiemelhető.
Szintaxis:
Üzenetek 3
11) Lapok - Ez az összetevő többoldalas oldalsá teszi a webhelyet annak érdekében, hogy a tartalom képes legyen
több oldalra osztható és könnyedén navigálható. Általában a rendezetlen listák DOM elemét ezzel az .pagination osztály határozza meg.
Szintaxis:
Hogyan segít ez a karrieredben?
Az összes vállalkozás most a felhasználói interakcióra és a felhasználói élményre (UI / UX) koncentrál. Mivel a lakosság túlnyomó többsége olyan kézi eszközöket használ, mint például a táblagépek és az okostelefonok, amelyek pixelfelbontásuk és képernyőméretük szempontjából nagyban különböznek. Ez az oka annak, hogy elengedhetetlen az előtér kialakítása, amely elég érzékeny ahhoz, hogy bármilyen képernyőhöz igazítsa anélkül, hogy veszélyeztetné a weboldal eleganciáját.
Tehát, ha a Bootstrapban jártas, hozzáadott értéket jelentene Önnek a műszaki karrier során, és a vállalatok várják, hogy jóképű fizetéssel ellenőrizzék. Mivel ez ingyenes és nyílt forráskódú, sokféle lehetőséget kínál Önnek, hogy fejlesztőként közreműködjön, és még jobbá tegye, mint a mai.
Következtetés-
A Bootstrap keretrendszer egy nagyon praktikus eszköz a weboldalak reagálásának növelésére. A ebben a blogban ismertetett összetevők a nagyon széles körben alkalmazott összetevők, amelyek segítenek kevesebb kódírásban a funkcionalitás fokozása érdekében, és több eleganciát adnak az építeni kívánt weboldalhoz.
Ajánlott cikkek
Ez egy útmutató a Bootstrap Componentshez. Itt a bootstrap bevezetéséről és különféle összetevőiről, valamint annak szintaxisáról beszélünk. A további javasolt cikkeken keresztül további információkat is megtudhat -
- A Bootstrap telepítése
- Szög vs Bootstrap
- Bootstrap tanfolyam
- Bootstrap interjúkérdések
- Hogyan lehet használni a Bootstrap elrendezést?
- A Boostrap öt legnépszerűbb típusa mintakóddal