Tilpasse Bootstrap Layouts Trends, Tools & Frameworks

Bootstrap er for tiden den nummer én front-end rammeverk og lett den raskeste måten å lage oppsett på. Det har eksistert i mange år, og utviklere fra tredjepart har selv publisert sine egne ressurser på nettet. Disse ressursene spenner fra gratis temaer til detaljerte plugins og rammer.

I denne artikkelen vil jeg gjerne dele en håndfull av disse ressurser og beste praksis for utviklere som ønsker å gå videre med Bootstrap.

Alle ressurser i dette innlegget er gratis, slik at du kan bruke dem, men du ser det som passer deg. Selv om du aldri har brukt Bootstrap, er du sikker på å finne noe her som vil hjelpe deg med å komme i gang.

Restyling med Bootstrap

Standard Bootstrap-biblioteket kommer med sin egen unik design det ser fantastisk ut. Det er allment kjent over nettet, og du kan lett fortelle når et nettsted er ved hjelp av tradisjonelle Bootstrap-elementer.

Men det kan du også restyler disse elementene selv å bruke Bootstraps kode som grunnlaget for oppsettet.

Det er noen forskjellige måter du klarer dette:

• Legg til ditt eget stilark for å overskrive standard.
• Tilpass BootStraps utgang, slik at du bare får elementene du vil ha.
• Kombinere med tilleggsprogrammer og plugins / temaer.

Det siste alternativet er det vanligste og det er en av grunnene til at Bootstrap har vokst så fort.

Gitt jeg er også en stor fan av deres tilpasse verktøyet fordi det er helt gratis og gir deg så mye kontroll over hvilke funksjoner du vil bruke.

Det er mange ressurser for BootStrap 3/4, laget av tredjeparts utviklere, så det er enklere enn noensinne å Lag dine egne unike BootStrap-oppsett uten å skrive mye kode.

Plugins & add-ons

Siden Bootstrap kommer med et massivt JavaScript-bibliotek, er det lett nok til utvide JavaScript-funksjoner. Og utviklere har sikkert gjort det med sine egne plugins, mange utgitt gratis online.

Dette er mine favoritter som alle støtte Bootstrap nativt. Mange av dem Kjør på jQuery, så de er også enkle å tilpasse hvis du kjenner deg rundt i jQuery-biblioteket.

Form validator

Først opp er min favoritt skjema validering plugin, Form Validator. Den kjører på jQuery, og den støtter en hel masse frontendrammer: Bootstrap, Foundation, Pure, UIKit og andre.

Du kan Legg til manuelt et hvilket som helst antall 51 validatorer til hvilken som helst form på nettstedet ditt. Dette betyr at besøkende må oppfylle disse valideringskravene før de kan sende inn innholdet.

Mange kontaktskjemaer bruker disse validatorene til krever jobber e-postadresser. Men du kan også bruke dem til bildeopplastinger, eller passord, stort sett alt ditt Bootstrap-hjerte ønsker.

Datetime picker

Datoplukkere er også en stor smerte å kode deg selv. Mange skjemaer bruker bare rullegardinmenyene for innstillingene dag / måned / år, men du kan også bruke dette Bootstrap date picker plugin å spare deg for stresset.

Det er helt åpen kildekode og kjører på Bootstrap 3.x-biblioteket. Du vil også legge merke til det støtter både datoen og tid ved å bruke et annet jQuery-plugin, Moment.js.

Samlet sett er dette biblioteket fantastisk å få en arbeidsdokumentspiller aktiv. Det har det mange avhengigheter men heldigvis trenger du ikke å skrive mye kode for å få det til å fungere.

Stjernerangeringer

Her er en annen kul funksjon for stjerneklassifiseringer på internett. Du kan legg til en en-til-fem stjernerangering hvor som helst på nettstedet ditt, ved hjelp av Bootstrap-biblioteket for JavaScript-oppførsel.

Når brukeren svinger over disse stjernene, endres skjermen til det som vurderingen er basert på markørposisjonen. Deretter, med et klikk, brukeren stemmer sin stemme og setter en stjerneklassifisering, inkludert halv-stjerneklassifiseringer.

Denne plugin er definitivt komplisert å sette opp fordi du kan endre mange standardinnstillinger for mer avanserte teknikker. Men du kan se en enkel live-demo for å måle om denne stjerneklasseringspluggen passer med nettstedet ditt.

WATable

Bootstrap kommer med sin egen bord layout stil for å vise tabelldata på frontenden. Men med WATable-plugin, Du kan legge til en hel rekke ekstra funksjoner til Bootstrap-bordene dine.

Dette er en av de mest detaljerte jQuery-plugins der ute, og disse er bare noen av funksjonene du kan legge til:

• Tilpasset paginering.
• Kolonne sortering.
• Datafiltrering.
• Tabell animasjon effekter.
• Sjekk-til-velg hele rader.

WATable er beskrevet som a Sveitsisk Army Kniv av bordplugger og jeg må være enig med denne beskrivelsen. Det faktum at det støtter Bootstrap er bare glasur på kaken.

Disse var noen av mine favorittplugger, men det er så mange andre der ute. Du kan bla gjennom enda mer på denne siden hvis du er nysgjerrig.

Bootstrap rammer

Bootstrap er faktisk et stort rammeverk fordi det lar brukere tilpasse standard HTML og CSS stiler med noen klasser.

Men utviklere har tatt standard BootStrap-biblioteket og lagt til egne stiler for å skape enda større rammer som arbeid som temaer, så du trenger ikke å restylle Bootstrap fra bunnen av.

Heldigvis er de alle gratis og de kjører alle på standard BootStrap-klassene.

Bootflat

Kanskje det mest kjente BootStrap-rammeverket er Bootflat brukergrensesnitt at følger flatt design trend.

Det fungerer med alle standard Bootstrap funksjoner, inkludert alle JavaScript-komponenter. De store forskjellene er mer i design og struktur hvor sideelementer bruker flate fargevalg for å bevege seg unna Bootstraps gradientstiler.

Bootflat har ikke blitt brukt for mye veldig mye, så du kan legge til dette rammeverket på hvilken som helst destinasjonsside eller hjemmeside for å lage et unikt utseende for nettstedet ditt.

Det er 100% gratis og leveres selv med a fargevelger, slik at du kan finne flate fargevalg for å matche oppsettet ditt.

Skaff deg ferdig

Dette overraskende sløv UI-sett bygger også på toppen av Bootstrap 3-biblioteket, og det er utgitt gratis på GitHub.

Få Shit Done kommer fra teamet på Creative Tim hvor de selger noen få premiumressurser. Dette spesifikke brukergrensesnittet har en pro-versjon, men det er ikke nødvendig i det hele tatt.

Open source-versjonen har mer enn nok for alle, og du kan sjekke ut live demo for å se hvordan det ser ut i nettleseren.

Oppstartsmateriale design

En annen populær design trend er Googles materialdesign. Dette er et designsprog som ble laget for Android-appdesignere, men har siden spredt på nettet og fikk mye støtte fra UI / UX designere.

Denne utrolige Bootstrap-materialrammen bruker de materielle designfunksjonene til bygge en tilpasset design stil ut av Bootstraps bibliotek.

Som standard er det støtter alt i BootStrap 3 og oppdateres for øyeblikket for å støtte Bootstrap 4. Du kan lære mer på den offisielle hjemmesiden som har dokumentasjon og demoer.

Et lignende bibliotek du kan prøve er MDBootstrap, selv om jeg finner denne en litt vanskeligere å jobbe med.

Bootplus

Google opprettet det materielle designspråket, men de har også egne stiler for mange av deres verktøy og webapps.

Bootplus etterligner Google + -grensesnittstilen, sammen med mange av Googles hjelpedokumenter, Google Disk og lignende webapper. Den har alle de samme funksjonene som Bootstrap, inkludert grids, layoutstiler, elementstiler og JavaScript-komponenter.

Du kan også bla gjennom en demo på nettstedet for å se forskjeller mellom Bootplus og den opprinnelige Bootstrap UI. For en gratis ressurs er Bootplus omfattende og det er perfekt for alle som liker Googles designteknikker.

Verktøy og ressurser

Til slutt vil jeg dykke inn i de mange gratis verktøyene for tilpasse og bygge Bootstrap-oppsett.

Disse verktøyene er alle nettprogrammer, og mange av dem er også åpne på GitHub. De er laget for å spare deg tid og hjelpe deg med å designe utrolige Bootstrap-oppsett uten mye kode.

Live redaktør

Den gratis Bootstrap live editor er et av de beste verktøyene for ikke-tekniske designere. Hvis du ikke vet hvordan du kan kode, kan du fortsatt stole på denne Bootstrap-byggeren for å lage en hel layout fra grunnen av.

Den kjører rett i nettleseren din og du kan til og med velge fra ferdige maler for å komme i gang.

Valg i sidefeltet lar deg legg til visse CSS-verdier hvis du kjenner noen frontend koding. Men du kan også bruke GUI til å endre farger, skrifter, størrelser og stort sett alt annet du liker.

Når du er ferdig, klikk “Få tema” og du kan kopiere / lime inn de oppdaterte CSS-stilene i ditt eget prosjekt. Super enkel måte å restylle Bootstrap uten å måtte rekonstruere alt fra grunnen.

Skjemabygger

Dette gratis Bootstrap form builder er en dra og slipp-nettleserverktøyet som lar deg lage Bootstrap skjemaer fra bunnen av.

Igjen, det krever nullkodingskunnskap og du har full tilgang til alle Bootstrap 3-elementene. Bare velg elementet du vil ha, og dra det til høyre i venstre boks. Herfra kan du endre alt fra plassholderteksten til CSS-klassen.

Langt den kuleste formbyggeren jeg noensinne har sett, og den er 100% fri!

BootSwatchr

Et annet gratis verktøy jeg virkelig liker er BootSwatchr. Det er avhengig av Bootstrap-rammeverket, og det lar deg oppdater farger, tema stiler, og overordnet layout av siden.

Hva jeg liker om denne appen er hvordan det også kommer med a gratis galleri av pre-designet stiler.

Så, du kan laste ned et design som noen andre allerede gjort eller du kan bruke det som utgangspunkt for å tilpasse ditt eget tema.

Går videre

Bootstrap vokser bare i popularitet, så nå er den beste tiden til dykk inn i dette rammeverket. Heldigvis er det dusinvis av plugins, rammer og gratis verktøy du kan bruke til å fremskynde dev prosessen.

I denne artikkelen viste jeg bare toppen av isfjellet, så hvis du ikke ser noe her som er nyttig, kom du ut til Google og se hva du kan finne.