Bootstrap elrendezések testreszabása trendek, eszközök és keretek

bootstrap jelenleg a első számú front-end keret és könnyen a leggyorsabb módja az elrendezések felépítésének. Körülbelül évek óta a harmadik felek fejlesztői is közzétették saját forrásaikat online. Ezek az erőforrások ingyenes témák nak nek részletes bővítmények és keretek.

Ebben a cikkben szeretnék megosztani néhányat ezek közül erőforrások és a legjobb gyakorlatok a fejlesztők számára, akik tovább akarnak menni a Bootstrap-szal.

Mind a erőforrások ingyenesek, így használhatod őket, de jól látod. Még akkor is, ha még soha nem használta a Bootstrap-ot, biztosan talál valamit, ami segít elkezdeni.

Bootstrap segítségével újratelepítve

Az alapértelmezett Bootstrap könyvtár tartalmazza a saját egyedi design fantasztikusnak tűnik. Ez széles körben ismert az interneten, és könnyen megmondhatja, hogy mikor van egy weboldal hagyományos Bootstrap elemekkel.

De te is ezeket az elemeket önmaga megújítja használja a Bootstrap kódját az elrendezés alapjául.

Vannak néhány különböző módon meg tudod csinálni:

• Adja hozzá saját stíluslapját az alapértelmezés felülírásához.
• Testreszabhatja a BootStrap kimenetét, így csak a kívánt elemeket kapja meg.
• Kombináljon kiegészítőket és bővítményeket / témákat.

Az utolsó lehetőség a leggyakoribb, és ez az egyik oka annak, hogy a Bootstrap olyan gyorsan nőtt.

Biztos vagyok, hogy én is nagy rajongó vagyok testreszabhatja az eszközt mert ez teljesen ingyenes, és annyira irányít mely funkciókat szeretné használni.

A harmadik fél fejlesztői által létrehozott BootStrap 3/4 tonna erőforrásokat tartalmaz, így könnyebb, mint valaha hozzon létre saját egyedi BootStrap elrendezéseket sok kód írása nélkül.

Bővítmények és bővítmények

Mivel a Bootstrap masszív JavaScript könyvtárral rendelkezik, elég könnyű bővítse a JavaScript szolgáltatásait. És a fejlesztők mindenképpen megtették a saját bővítményeiket, sokan ingyenesen megjelentek az interneten.

Ezek az összes kedvencem a Bootstrap natív támogatása. Sokan közülük fusson a jQuery-n, így könnyedén testre szabható, ha ismeri a jQuery könyvtárat.

Űrlap érvényesítő

Először a kedvencem űrlap-érvényesítési bővítmény, űrlap-ellenőrző. JQuery-n fut és támogat egy csomó frontend kereteket: Bootstrap, Foundation, Pure, UIKit és mások.

tudsz manuálisan hozzáadhat bármilyen számú 51 érvényesítőt bármilyen formában a webhelyén. Ez azt jelenti, hogy a látogatóknak meg kell felelniük ezeknek az érvényesítési követelményeknek, mielőtt a tartalmat elküldenék.

Számos kapcsolati űrlap ezeket az érvényesítőket használja működő e-mail címekre van szükség. De ezeket a képeket feltöltheti vagy jelszavakat is használhat.

Datetime picker

Dátumválasztók hatalmas fájdalmat is maguknak kódolnak. Számos űrlap csak legördülő menüt használ a nap / hónap / év beállításokra, de ezt is használhatja Bootstrap dátumválasztó bővítmény hogy megmentse magát.

Teljesen nyílt forráskódú és a Bootstrap 3.x könyvtárban fut. Azt is észre fogja venni támogatja mind a dátumot és az idő egy másik jQuery plugin használatával, Moment.js.

Összességében ez a könyvtár fantasztikus ahhoz, hogy egy működőképes adatgyűjtő aktív legyen. Van sok függőség de szerencsére nem kell sok kódot írni ahhoz, hogy működjön.

Csillagok értékelése

Itt van egy újabb jó funkció csillagértékelések az interneten. tudsz hozzáad egy egy-öt csillagot bárhol a webhelyén, a Bootstrap könyvtár segítségével a JavaScript viselkedését.

Amikor a felhasználó ezen a csillagon áthalad, a kijelző a kurzor pozíciójától függően változik. Ezután egy kattintással a felhasználó leadja a szavazást és egy csillagértéket állít be, beleértve a félcsillagos minősítéseket is.

Ez a bővítmény határozottan bonyolult beállítás mert te tudsz módosítsa az alapértelmezett beállításokat a fejlettebb technikákhoz. De láthat egy egyszerű élő bemutatót, ha meg akarja mérni, hogy ez a csillagérték-bővítmény illeszkedik-e a webhelyéhez.

WATable

A rendszerindítóhoz tartozik a Bootstrap saját asztali elrendezés táblázatos adatok megjelenítésére a frontenden. De a WATable plugin, hozzáadhat egy csomó extra funkciót a Bootstrap táblákhoz.

Ez az egyik leggyakoribb jQuery plugin, és ezek csak néhány funkció, amit hozzáadhat:

• Egyéni lapozás.
• Oszloprendezés.
• Adatszűrés.
• Asztali animációs hatások.
• Teljes sorok kiválasztása.

A WATLE-t a Svájci hadsereg késsel asztali bővítmények és meg kell egyeznem ezzel a leírással. Az a tény, hogy támogatja a Bootstrap-ot, csak a sütemény jegesedése.

Ezek voltak a kedvenc pluginjaim, de sokan vannak ott. Ha kíváncsi vagy, még ezen az oldalon is böngészhet.

Bootstrap keretek

A Bootstrap valójában egy nagy keret, mivel lehetővé teszi a felhasználók számára testreszabhatja az alapértelmezett HTML és CSS stílusokat néhány osztályban.

De a fejlesztők az alapértelmezett BootStrap könyvtárat vették fel, és saját stílusaikat adták hozzá még nagyobb keretek létrehozásához a témákhoz hasonlóan működik, így nem kell újraindítanod a Bootstrap-ot a semmiből.

Szerencsére mindannyian szabadok, és mindannyian az alapértelmezett BootStrap osztályokon futnak.

Bootflat

Talán a legismertebb BootStrap keretrendszer Bootflat felhasználói felület hogy a lapos tervezési trendet követi.

Működik az alapértelmezett Bootstrap funkciók, beleértve az összes JavaScript összetevőt. A főbb különbségek inkább a tervezés és szerkezet ahol az oldalelemek lapos színsémákat használnak, hogy távolodjanak a Bootstrap színátmeneteitől.

Bootflat nem használták túl nagyon sok, így hozzáadhatja ezt a keretrendszert bármely nyitóoldalon vagy honlapon, hogy egyedülálló megjelenést hozzon létre webhelyének.

Ez 100% ingyenes és még a színválasztó, úgy, hogy lapos színsémákat találjon az elrendezéshez.

Get Shit Done

Ez meglepően tompa UI készlet a Bootstrap 3 könyvtár tetejére épül, és ingyenesen megjelent a GitHub-on.

A Get Shit Done a Creative Tim csapatából származik, ahol néhány prémium erőforrást értékesítenek. Ez a specifikus felhasználói felületnek van pro verziója, de egyáltalán nem szükséges.

A nyílt forráskódú verzió mindenkinek több mint elég, és megnézheti a élő demó hogy lássa, hogyan néz ki a böngészőben.

Bootstrap anyag tervezése

Egy másik népszerű tervezési trend A Google anyagi tervezése. Ez egy tervezési nyelv, amelyet eredetileg Android-alkalmazások tervezői számára készítettek, de azóta is elterjedt az internetre és rengeteg támogatást kapott az UI / UX tervezőktől.

Ez a hihetetlen Bootstrap anyagkeret az anyagtervezési jellemzőket használja egyedi design stílus kialakítása a Bootstrap könyvtárából.

Alapértelmezés szerint támogatja mindent a BootStrap 3-ban és jelenleg a Bootstrap 4 támogatására is átdolgozásra kerül. További információ a hivatalos honlapon található, amely dokumentációt és bemutatót tartalmaz.

Hasonló könyvtár, amit megpróbálhat MDBootstrap, bár ez egy kicsit nehezebb dolgozni.

Bootplus

A Google létrehozta az anyagtervezési nyelvet, de saját stílusuk is van számos eszközükhöz és webes alkalmazásukhoz.

A Bootplus a Google+ felület stílusát utánozza, a Google számos segéddokumentumával, a Google Drive-val és hasonló webes alkalmazásokkal együtt. Minden olyan funkcióval rendelkezik, mint a Bootstrap, beleértve a rácsokat, az elrendezési stílusokat, az elemstílusokat és a JavaScript összetevőket.

A webhelyen egy demót is böngészhet, hogy megtekinthesse a különbségek a Bootplus és az eredeti Bootstrap UI között. Az ingyenes erőforrás érdekében a Bootplus kiterjedt, és tökéletes azok számára, akik szeretik a Google tervezési technikáit.

Eszközök és erőforrások

Végül szeretnék merülni a sok ingyenes eszközhöz Bootstrap elrendezések testreszabása és építése.

Ezek az eszközök minden webes alkalmazás, és sokuk még a GitHub-on is nyitva van. Megtakarították az időt és segítenek abban, hogy hihetetlen Bootstrap elrendezéseket tervezzenek sok kód nélkül.

Élő szerkesztő

A szabad Bootstrap élő szerkesztő az egyik legjobb eszköz nem műszaki tervezők számára. Ha nem tudja, hogyan kell kódolni, akkor továbbra is támaszkodhat erre a Bootstrap készítőre, hogy egy teljes elrendezést hozzon létre a semmiből.

Azt fut a böngészőjében és még az előre elkészített sablonok közül is választhat.

Az oldalsáv beállításai lehetővé teszik bizonyos CSS értékeket adjon hozzá ha ismeri a frontend kódolását. De a GUI-t a színek, a betűkészletek, a méretek és a tetszőleges egyéb változtatáshoz is használhatja.

Miután elkészült, kettyenés “Szerezz témát” és a frissített CSS-stílusokat másolhatja / beillesztheti saját projektjébe. Rendkívül egyszerű módja a Bootstrap újraindításának anélkül, hogy mindent újra kell kódolni.

Űrkészítő

Ez az ingyenes Bootstrap formáló egy drag-and-drop böngésző eszköz amely lehetővé teszi a Bootstrap űrlapok létrehozását a semmiből.

Ismét nulla kódolási ismeretet igényel és teljes hozzáférést biztosít minden Bootstrap 3 elemhez. Csak válassza ki a kívánt elemet, és húzza jobbra a bal oldali mezőbe. Innen mindent megváltoztathat a helyőrző szövegtől a CSS osztályig.

A legmenőbb forma, amit valaha láttam, és 100% -ban ingyenes!

BootSwatchr

Egy másik ingyenes eszköz, amit nagyon szeretem BootSwatchr. Ez a Bootstrap keretrendszerre támaszkodik, és lehetővé teszi a színek, a téma stílusainak frissítése, és a általános elrendezés oldalát.

Amit én szeretem ezzel az alkalmazással kapcsolatban, hogyan is jön a az előre megtervezett stílusok ingyenes galériája.

Szóval, letölthet egy tervet valaki már megtette vagy kiindulási pontként használhatja saját témájának testreszabását.

Haladni előre

A Bootstrap népszerűsége csak növekszik, így most a legjobb idő merüljön bele ebbe a keretbe. Szerencsére több tucat plugint, keretrendszert és ingyenes eszközt használhat a dev folyamat gyorsítására.

Ebben a cikkben csak a jéghegy csúcsát mutattam be, így ha nem látsz itt semmit, akkor hasznos, ha kijutsz a Google-hoz, és nézd meg, hogy mást találhatsz.