Anpassa Bootstrap Layouts Trends, Tools & Frameworks

bootstrap är för närvarande den nummer ett främre ramverk och lätt den snabbaste sättet att bygga upp layouter. Det har funnits i flera år och utvecklare från tredje part har även publicerat sina egna resurser online. Dessa resurser sträcker sig från gratis teman till detaljerade plugins och ramar.

I den här artikeln skulle jag vilja dela en handfull av dessa resurser och bästa praxis för utvecklare som vill gå vidare med Bootstrap.

Alla resurser i det här inlägget är gratis, så du kan använda dem men du passar dig. Även om du aldrig har använt Bootstrap kan du säkert hitta något här som hjälper dig att komma igång.

Restyling med Bootstrap

Standard Bootstrap-biblioteket kommer med dess egen unik design det ser fantastiskt ut. Det är allmänt känt över hela webben och du kan enkelt berätta när en webbplats är med hjälp av traditionella Bootstrap-element.

Men det kan du också återställ dessa element själv att använda Bootstraps kod som grund för din layout.

Det finns några olika sätt du kan göra det här:

• Lägg till ditt eget stilark för att skriva över standard.
• Anpassa BootStraps resultat så att du bara får de element du vill ha.
• Kombinera med tillägg och plugins / teman.

Det sista alternativet är det vanligaste och det är en av anledningarna till att Bootstrap har blivit så snabb.

Beviljas Jag är också en stor fan av deras anpassa verktyg eftersom det är helt gratis och ger dig så mycket kontroll över vilka funktioner du vill använda.

Det finns massor av resurser för BootStrap 3/4, skapad av utvecklare från tredje part, så det är lättare än någonsin att skapa dina egna unika BootStrap-layouter utan att skriva mycket kod.

Plugins & add-ons

Eftersom Bootstrap kommer med ett massivt JavaScript-bibliotek är det lätt att utöka JavaScript-funktionerna. Och utvecklare har verkligen gjort det med sina egna plugins, många släpptes gratis online.

Det här är mina favoriter som alla stödja Bootstrap nationellt. Många av dem kör på jQuery, så de är också lätta att anpassa om du känner din väg runt jQuery-biblioteket.

Form validator

Först är min favorit form validering plugin, Form Validator. Den körs på jQuery och den stöder en hel massa frontendramar: Bootstrap, Foundation, Pure, UIKit och andra.

Du kan manuellt lägga till ett antal 51 validerare till någon form på din webbplats. Det innebär att besökare måste uppfylla dessa valideringskrav innan de kan lämna in innehållet.

Många kontaktformulär använder dessa validatorer till kräver fungerande e-postadresser. Men du kan också använda dem för bilduppladdningar, eller lösenord, ganska mycket vad ditt Bootstrap-hjärta vill ha.

Datetime picker

Datumplockare är också en stor smärta att koda dig själv. Många former använder bara rullgardinsmenyerna för inställningarna dag / månad / år men du kan också använda det här Plugin för startdatumsplugger för att spara besväret.

Det är helt öppen källkod och körs på Bootstrap 3.x-biblioteket. Du kommer också märka det stöder både datumet och tid genom att använda ett annat jQuery-plugin, Moment.js.

Sammantaget är det här biblioteket fantastiskt att få en arbetsdatumsplockare aktiv. Det har det många beroenden men tack och lov behöver du inte skriva mycket kod för att få det att fungera.

Stjärnbetyg

Här är en annan cool funktion för stjärnbetyg på webben. Du kan lägg till ett en-till-fem stjärnor var som helst på din webbplats, med hjälp av Bootstrap-biblioteket för JavaScript-beteenden.

När användaren svävar över dessa stjärnor ändras visningen till vad som helst baserat på markörpositionen. Då, med ett klick, kastar användaren sin röst och ställer in en stjärnklassificering, inklusive halvstjärniga betyg.

Denna plugin är definitivt komplicerat att sätta upp för att du kan ändra mycket av standardinställningarna för mer avancerade tekniker. Men du kan se en enkel levande demo för att mäta om den här stjärnklasspluggen passar din webbplats.

WATable

Bootstrap kommer med sitt egen tabell layout stil för att visa tabelldata på fronten. Men med WATable plugin, Du kan lägga till en hel massa extra funktioner till dina Bootstrap-tabeller.

Det här är en av de mest detaljerade jQuery-pluginsna där ute och det här är bara några av de funktioner du kan lägga till:

• Anpassad pagination.
• Kolonn sortering.
• Datafiltrering.
• Tabell animering effekter.
• Kontrollera till-välj hela raderna.

WATable beskrivs som a Schweizisk armékniv av bordpluggar och jag måste hålla med den här beskrivningen. Det faktum att det stöder Bootstrap är bara glasyren på tårtan.

Dessa var några av mina favorit plugins men det finns så många andra där ute. Du kan bläddra igenom ännu mer på den här sidan om du är nyfiken.

Bootstrap ramar

Bootstrap är faktiskt en stor ram eftersom den låter användare Anpassa standard HTML och CSS-stilar med några klasser.

Men utvecklare har tagit standard BootStrap-biblioteket och lagt till egna stilar för att skapa ännu större ramar som arbeta som teman, så du behöver inte återställa Bootstrap från början.

Lyckligtvis är de alla gratis och de körs alla på standard BootStrap-klasserna.

Bootflat

Kanske är det mest kända BootStrap-ramverket Bootflat UI den där följer plandesignen.

Det fungerar med alla standard Bootstrap-funktioner, inklusive alla JavaScript-komponenter. De stora skillnaderna är mer i design och struktur där sidelementen använder plana färgscheman för att flytta sig från Bootstraps gradientstilar.

Bootflat har inte använts för mycket väldigt mycket, så du kan lägga till denna ram på vilken målsida eller hemsida som helst för att skapa ett unikt utseende för din webbplats.

Det är 100% gratis och till och med kommer med a färgväljare, så du kan hitta plana färgscheman som passar din layout.

Få skiten klar

Detta överraskande stumma UI-kit bygger också på toppen av Bootstrap 3-biblioteket och det släpps gratis på GitHub.

Get Shit Done kommer från laget hos Creative Tim där de säljer några premiumresurser. Denna specifika UI-kit har en pro-version men det är inte nödvändigt alls.

Den öppna källversionen har mer än tillräckligt för alla och du kan kolla in live-demo för att se hur det ser ut i webbläsaren.

Bootstrap material design

En annan populär design trend är Googles materialdesign. Detta är ett design språk som ursprungligen gjordes för Android app designers men har sedan spridas på webben och fick mycket stöd från UI / UX-designers.

Denna otroliga Bootstrap material ram använder de material design funktioner till bygga en anpassad designstil ur Bootstraps bibliotek.

Som standard är det stöder allt i BootStrap 3 och är för närvarande omarbetad för att även stödja Bootstrap 4. Du kan lära dig mer på den officiella hemsidan som har dokumentation och demo.

Ett liknande bibliotek du kan försöka är MDBootstrap, även om jag tycker att den här är lite svårare att arbeta med.

Bootplus

Google skapade det materiella designspråket, men de har också egna stilar för många av deras verktyg och webbapps.

Bootplus efterliknar Google+ gränssnittsstil, tillsammans med många av Googles hjälpdokument, Google Drive och liknande webbapps. Den har alla funktioner som Bootstrap, inklusive galler, layout stilar, element stilar och JavaScript-komponenter.

Du kan även bläddra igenom en demo på webbplatsen för att se skillnader mellan Bootplus och det ursprungliga Bootstrap-gränssnittet. För en fri resurs är Bootplus omfattande och det är perfekt för alla som gillar Googles designtekniker.

Verktyg och resurser

Slutligen vill jag dyka in i de många fria verktygen för Anpassa och bygga Bootstrap-layouter.

Dessa verktyg är alla webbapps och många av dem är även öppna på GitHub. De är gjorda för att spara tid och hjälpa dig att designa otroliga Bootstrap-layouter utan mycket kod.

Levande redaktör

Det fria Bootstrap live editor är ett av de bästa verktygen för icke-tekniska designers. Om du inte vet hur man kodar kan du fortfarande lita på den här Bootstrap-byggaren för att skapa en hel layout från början.

Det körs direkt i din webbläsare och du kan även välja från färdiga mallar för att komma igång.

Alternativ i sidofältet låter dig lägg till vissa CSS-värden om du känner till någon frontend kodning. Men du kan också använda GUI för att ändra färger, teckensnitt, storlekar och nästan allt annat du vill.

När du är klar, klick “Hämta tema” och du kan kopiera / klistra in de uppdaterade CSS-stilarna i ditt eget projekt. Super enkelt sätt att återställa Bootstrap utan att behöva återkoda allt från början.

Formbyggare

Detta gratis Bootstrap form byggare är en dra och släppa webbläsarverktyget Det gör att du kan skapa Bootstrap-formulär från början.

Återigen, det kräver nollkodningskunskap och du har full tillgång till alla Bootstrap 3-element. Välj bara det element du vill ha och dra det rakt in i vänstra rutan. Härifrån kan du ändra allt från platshållarteksten till CSS-klassen.

Överlägset den coolaste formverktygen jag någonsin sett och det är 100% gratis!

BootSwatchr

Ett annat gratis verktyg jag verkligen gillar är BootSwatchr. Det är beroende av Bootstrap-ramen och det låter dig uppdatera färger, tematyper, och den övergripande layout av sidan.

Vad jag tycker om den här appen är hur den också kommer med en gratis galleri av förkonstruerade stilar.

Så kan du ladda ner en design som någon annan redan gjort eller du kan använda det som utgångspunkt för att anpassa ditt eget tema.

Går vidare

Bootstrap växer bara i popularitet, så nu är den bästa tiden att dyka in i denna ram. Tack och lov finns det dussintals plugins, ramar och gratis verktyg som du kan använda för att påskynda dev-processen.

I den här artikeln visade jag bara toppen av isberget, så om du inte ser någonting här är det bra att komma ut till Google och se vad du kan hitta.