Prispôsobenie trendov rozloženia Bootstrap, nástrojov a rámcov

bootstrap je v súčasnosti prvý rámec prednej časti a ľahko najrýchlejší spôsob, ako vytvoriť rozloženie. Bolo to už roky a vývojári tretích strán dokonca zverejnili vlastné zdroje online. Tieto zdroje sa pohybujú od free themes na podrobných doplnkov a rámcov.

V tomto článku by som sa chcel podeliť o niekoľko z nich zdrojov a osvedčených postupov pre vývojárov, ktorí chcú pokračovať s programom Bootstrap.

Všetko zdroje v tomto príspevku sú bezplatné, aby ste ich mohli používať, akokoľvek to považujete za vhodné. Aj keď ste nikdy nepoužívali Bootstrap, určite nájdete niečo, čo vám pomôže začať.

Restyling s Bootstrap

Predvolená knižnica Bootstrap je dodávaná s jej vlastný jedinečný dizajn to vyzerá fantasticky. Je všeobecne známy po celom webe a môžete ľahko zistiť, kedy je webová stránka pomocou tradičných prvkov Bootstrap.

Ale môžete tiež Zmeňte tieto prvky sami použite kód Bootstrapu ako základ pre vaše rozloženie.

Existujú niekoľkými spôsobmi dokážeš to:

Pridajte svoj vlastný štýl, aby ste prepísali predvolené.
Prispôsobte výstup BootStrapu, takže získate iba požadované prvky.
Kombinácia s doplnkami a doplnkami / motívmi.

Táto posledná možnosť je najbežnejšia a je to jeden z dôvodov, prečo Bootstrap narástol tak rýchlo.

Mám tiež veľký fanúšik ich prispôsobiť nástroj pretože je úplne zadarmo a poskytuje vám toľko kontroly ktoré funkcie chcete používať.

Existuje množstvo zdrojov pre softvér BootStrap 3/4, ktorý vytvorili vývojári tretej strany, takže je ľahšie ako kedykoľvek predtým vytvorte si vlastné rozloženie BootStrap bez napísania veľkého kódu.

Pluginy a doplnky

Vzhľadom k tomu, Bootstrap prichádza s masívnou knižnicou JavaScript, je to dosť ľahké rozšíriť funkcie JavaScriptu. A vývojári to určite urobili so svojimi vlastnými doplnkami, mnohí sa bezplatne vydali online.

To sú moje obľúbené, že všetci podporu Bootstrap natívne. Mnohí z nich spustiť na jQuery, takže sú tiež ľahko prispôsobiteľné, ak poznáte svoju cestu okolo knižnice jQuery.

Formulár validátora

Prvý je môj obľúbený doplnok validácie formulára, Validátor formulára. Beží na jQuery a podporuje celú skupinu kontextových rámcov: Bootstrap, Foundation, Pure, UIKit a ďalšie.

Môžeš ručne pripojiť akýkoľvek počet 51 validátorov na akúkoľvek formu na vašich stránkach. To znamená, že návštevníci budú musieť splniť tieto požiadavky na validáciu skôr, ako môžu odoslať obsah.

Mnohé formuláre kontaktov používajú tieto validátory vyžadujú pracovné e-mailové adresy. Ale môžete ich tiež použiť na nahrávanie obrázkov alebo hesiel, skoro všetko, čo vaše srdce Bootstrap túži.

Vyhľadávač dátumu

Vyhľadávače dátumu sú tiež obrovské bolesti pri kóde. Mnohé formuláre používajú iba rozbaľovacie ponuky pre nastavenia deň / mesiac / rok, ale môžete ich tiež použiť Bootstrap plugin na výber dátumu aby ste ušetrili ťažkosti.

Je to úplne open-source a beží na knižnici Bootstrap 3.x. Tiež si to všimnete podporuje dátum a čas pomocou iného pluginu jQuery, Moment.js.

Celkovo je táto knižnica fantastická na to, aby bol aktívny výber pracovného dátumu. Má to veľa závislostí ale našťastie nebudete musieť písať veľa kódu, aby ste to pracovali.

Hodnotenie hviezdičkami

Tu je ďalšia cool funkcia pre hviezdičkami na webe. Môžeš pridať jednu až päť hviezdičiek kdekoľvek na vašom webe, pomocou knižnice Bootstrap pre správanie v jazyku JavaScript.

Keď sa užívateľ pohybuje nad týmito hviezdičkami, displej sa zmení na akékoľvek hodnotenie založené na pozícii kurzora. Jedným kliknutím používateľ odovzdá svoj hlas a stanoví hviezdičkový rating, vrátane polovičných hodnotení.

Tento plugin je určite zložité nastaviť pretože môžeš zmeniť veľa predvolených nastavení pre pokročilejšie techniky. Môžete však vidieť jednoduchý živý demo, ktorý vám pomôže posúdiť, či tento plugin s hviezdičkou hodnotí vašu stránku.

WATable

Bootstrap prichádza s jeho vlastný štýl rozloženia tabuľky na zobrazenie tabuľkových údajov na fronte. Ale s WATable plugin, môžete na svoje Bootstrap tabuľky pridať celý rad ďalších funkcií.

Jedná sa o jeden z najpodrobnejších pluginov jQuery a to sú len niektoré z funkcií, ktoré môžete pridať:

Vlastné stránkovanie.
Triedenie stĺpcov.
Filtrovanie údajov.
Efekty animácie tabuľky.
Začiarknite celú riadku.

WATable je popísané ako a Švajčiarsky armádny nôž tabuľkových pluginov a musím súhlasiť s týmto opisom. Skutočnosť, že podporuje Bootstrap, je len čerešničkou na tortu.

To boli niektoré z mojich obľúbených pluginov, ale tam je toľko iných. Na túto stránku môžete prehliadať ešte viac, ak ste zvedaví.

Bootstrap frameworks

Bootstrap je vlastne veľký rámec, pretože umožňuje používateľom prispôsobiť predvolené štýly HTML a CSS s niekoľkými triedami.

Ale vývojári prevzali predvolenú knižnicu BootStrap a pridali svoje vlastné štýly na vytvorenie ešte väčších rámcov pracovať ako témy, takže nepotrebujete restartovať Bootstrap od začiatku.

Našťastie všetci sú zadarmo a všetci beží na štandardných triedach BootStrap.

Bootflat

Pravdepodobne najznámejší rámec BootStrap je Bootflat UI že sleduje trend plochého dizajnu.

Pracuje s všetky predvolené funkcie Bootstrap, vrátane všetkých komponentov jazyka JavaScript. Hlavné rozdiely sú viac v dizajnu a štruktúry kde prvky stránky používajú plošné farebné schémy na odklon od štýlov gradientu Bootstrap.

Bootflat nebol nadmerne používaný takže môžete pridať tento rámec na ľubovoľnú vstupnú stránku alebo domovskú stránku a vytvoriť tak jedinečný vzhľad pre vaše stránky.

Je to 100% zadarmo a dokonca prichádza s a výber farieb, takže môžete nájsť ploché farebné schémy, ktoré zodpovedajú vášmu rozloženiu.

Získajte hotovú prácu

toto prekvapujúco tupá UI súprava tiež stavia na vrchole knižnice Bootstrap 3 a je bezplatne uvoľnená na GitHub.

Get Shit Done pochádza z tímu Creative Tim, kde predáva niekoľko prémiových zdrojov. Táto špecifická používateľská pomôcka má verziu pro, ale vôbec nie je potrebná.

Verzia s otvoreným zdrojom má pre každého dostatok informácií a môžete si ho pozrieť živé demo ako to vyzerá v prehliadači.

Vytváranie materiálu na bootstrap

Ďalším obľúbeným dizajnovým trendom je Materiálový dizajn spoločnosti Google. Tento dizajnový jazyk bol pôvodne vytvorený pre návrhárov aplikácií pre Android, ale odvtedy na web a získal veľa podpory od dizajnérov UI / UX.

Tento neuveriteľný rámec materiálov Bootstrap využíva vlastnosti dizajnu materiálu vytvoriť štýl vlastného dizajnu z knižnice spoločnosti Bootstrap.

V predvolenom nastavení je podporuje všetko v programe BootStrap 3 a práve prebieha prepracovanie na podporu funkcie Bootstrap 4. Ďalšie informácie nájdete na oficiálnej domovskej stránke, ktorá obsahuje dokumentáciu a ukážky.

Podobná knižnica, ktorú by ste mohli skúsiť, je MDBootstrap, aj keď sa mi zdá, že je s ním ťažšie pracovať.

Bootplus

Spoločnosť Google vytvorila jazykový dizajn materiálu, ale má aj vlastné štýly pre mnohé z ich nástrojov a webových aplikácií.

Bootplus napodobňuje štýl rozhrania Google+, spolu s mnohými pomocníkmi Google, Google Drive a podobnými webovými aplikáciami. Má rovnaké funkcie ako Bootstrap vrátane mriežok, štýlov rozloženia, štýlov prvkov a komponentov jazyka JavaScript.

Môžete dokonca prechádzať demo na stránkach vidieť rozdiely medzi Bootplus a pôvodným používateľským rozhraním Bootstrap. Pre bezplatný zdroj je Bootplus rozsiahly a je ideálny pre každého, kto má rád dizajnérske techniky spoločnosti Google.

Nástroje a zdroje

Nakoniec sa chcem ponoriť do mnohých bezplatných nástrojov prispôsobovanie a vytváranie rozložení Bootstrap.

Tieto nástroje sú všetky webové aplikácie a mnohé z nich sú dokonca otvorené na GitHub. Sú vyrobené tak, aby vám ušetrili čas a pomohli vám navrhnúť neuveriteľné rozloženie Bootstrap bez veľkého kódu.

Živý editor

Voľný Bootstrap live editor je jedným z najlepších nástrojov pre netechnických dizajnérov. Ak neviete, ako kódovať, stále sa môžete spoliehať na tohto nástroja Bootstrap Builder a vytvoriť celé rozloženie od nuly.

to beží priamo vo vašom prehliadači a môžete dokonca vybrať z vopred pripravených šablón, aby ste mohli začať.

Voľby na postrannom paneli vám umožňujú pridať určité hodnoty CSS ak poznáte nejaké kódovanie frontendu. Môžete však použiť aj grafické používateľské rozhranie na zmenu farieb, písiem, veľkostí a skoro všetko, čo sa vám páči.

Keď skončíte, cvaknutie “Získajte tému” a môžete skopírovať / prilepiť aktualizované štýly CSS do vlastného projektu. Super jednoduchý spôsob, ako znova spustiť Bootstrap bez toho, aby ste museli všetko pretlačiť od začiatku.

Tvorca formulárov

To zadarmo Bootstrap form Builder je a drag-and-drop prehliadač nástroj ktorý vám umožňuje vytvárať formuláre Bootstrap od začiatku.

Opäť to vyžaduje nulové znalosti kódovania a máte plný prístup ku všetkým prvkom Bootstrap 3. Stačí vybrať požadovaný prvok a presunúť ho do ľavého boxu. Odtiaľ môžete všetko zmeniť zo zástupného textu do triedy CSS.

Zďaleka najväčší staviteľ, ktorý som kedy videl a je 100% zadarmo!

BootSwatchr

Ďalším bezplatným nástrojom, ktorý sa mi naozaj páči, je BootSwatchr. Spolieha sa na rámec Bootstrap a umožňuje vám to aktualizovať farby, štýly motívov, a celkové usporiadanie stránky.

Čo sa mi páči o tejto aplikácii je, ako to tiež prichádza s bezplatnú galériu vopred navrhnutých štýlov.

Takže si môžete stiahnuť návrh, ktorý niekto iný už urobil alebo ho môžete použiť ako východiskový bod na prispôsobenie vlastnej témy.

Hýbať sa vpred

Bootstrap rastie len v popularite, takže teraz je najlepší čas ponoriť sa do tohto rámca. Našťastie existuje desiatky doplnkov, rámcov a bezplatných nástrojov, ktoré môžete použiť na urýchlenie procesu dev.

V tomto článku som práve ukázal špičku ľadovca, takže ak nevidíte nič, čo je užitočné, dostať sa na Google a zistiť, čo ešte nájdete.