Tilpasning af Bootstrap Layouts Trends, Tools & Frameworks

bootstrap er i øjeblikket den nummer én front-end ramme og let den hurtigeste måde at opbygge layouter på. Det har eksisteret i årevis, og tredjepartsudviklere har selv udgivet deres egne ressourcer online. Disse ressourcer spænder fra gratis temaer til detaljerede plugins og rammer.

I denne artikel vil jeg gerne dele en håndfuld af disse ressourcer og bedste praksis for udviklere, der ønsker at gå videre med Bootstrap.

Alle ressourcer i dette indlæg er gratis, så du kan bruge dem, men du finder det passende. Selvom du aldrig har brugt Bootstrap, er du sikker på at finde noget her, der hjælper dig med at komme i gang.

Restyling med Bootstrap

Standard Bootstrap-biblioteket kommer med dets eget unikt design det ser fantastisk ud. Det er bredt kendt på internettet, og du kan nemt fortælle, hvornår et websted er ved hjælp af traditionelle Bootstrap-elementer.

Men det kan du også restylér disse elementer selv at bruge Bootstraps kode som grundlaget for dit layout.

Der er et par forskellige måder Du kan gøre det:

Tilføj dit eget stylesheet for at overskrive standard.
Tilpas BootStraps output, så du får kun de elementer, du ønsker.
Kombiner med tilføjelsesprogrammer og plugins / temaer.

Den sidste mulighed er den mest almindelige, og det er en af grundene til, at Bootstrap er vokset så hurtigt.

Bevilget Jeg er også en stor fan af deres tilpasse værktøj fordi det er helt gratis og giver dig så meget kontrol over hvilke funktioner du vil bruge.

Der er masser af ressourcer til BootStrap 3/4, skabt af tredjepartsudviklere, så det er nemmere end nogensinde at lav dine egne unikke BootStrap layouter uden at skrive meget kode.

Plugins & add-ons

Da Bootstrap leveres med et massivt JavaScript-bibliotek, er det nemt nok at udvide JavaScript-funktioner. Og udviklere har helt sikkert gjort det med deres egne plugins, mange udgivet gratis online.

Det er alle mine favoritter støtte Bootstrap indbygget. Mange af dem køre på jQuery, så de er også nemme at tilpasse, hvis du kender din vej rundt i jQuery-biblioteket.

Form validator

Først er min favorit form validering plugin, Form Validator. Den kører på jQuery, og den understøtter en hel masse frontend-rammer: Bootstrap, Foundation, Pure, UIKit og andre.

Du kan Tilføj manuelt et vilkårligt antal 51 validatorer til enhver form på dit websted. Det betyder, at besøgende skal opfylde disse valideringskrav, inden de kan indsende indholdet.

Mange kontaktformularer bruger disse validatorer til kræver arbejde email adresser. Men du kan også bruge dem til upload af billeder eller adgangskoder, stort set alt, hvad dit Bootstrap-hjerte ønsker.

Datetime picker

Datovælgerne er også en stor smerte at kode dig selv. Mange former bruger kun rullemenuer til indstillingerne dag / måned / år, men du kan også bruge dette Bootstrap date picker plugin for at spare besværet.

Det er helt open source og kører på Bootstrap 3.x biblioteket. Du vil også bemærke det understøtter både datoen og tid ved at bruge et andet jQuery-plugin, Moment.js.

Samlet set er dette bibliotek fantastisk til at få en aktiv date picker aktiv. Det har det en masse afhængigheder men heldigvis behøver du ikke skrive meget kode for at få det til at fungere.

Stjerneklassifikationer

Her er en anden cool funktion til stjerneklassifikationer på nettet. Du kan tilføj en en til fem stjerneklassifikation hvor som helst på dit websted, ved hjælp af Bootstrap-biblioteket til JavaScript-adfærd.

Når brugeren svæver over disse stjerner, ændres skærmbilledet, uanset hvorvidt bedømmelsen er baseret på deres markørposition. Derefter vælger brugeren med et enkelt klik sin stemme og sætter en stjerneklassifikation, herunder halv-stjerne ratings.

Dette plugin er helt sikkert kompliceret at oprette fordi du kan ændre mange af standardindstillingerne til mere avancerede teknikker. Men du kan se en simpel live demo for at måle, om denne stjerneklassificering plugin passer til dit websted.

WATable

Bootstrap leveres med sin egen bord layout stil til visning af tabeldata på frontenden. Men med WATable plugin, Du kan tilføje en hel masse ekstra funktioner til dine Bootstrap tabeller.

Dette er et af de mest detaljerede jQuery-plugins derude, og disse er blot nogle af de funktioner, du kan tilføje:

Brugerdefineret pagination.
Kolonne sortering.
Datafiltrering.
Tabel animation effekter.
Check-to-select hele rækker.

WATable beskrives som a Schweiziske hær kniv af bord plugins og jeg er enig med denne beskrivelse. Den kendsgerning, at den understøtter Bootstrap, er kun isen på kagen.

Disse var nogle af mine foretrukne plugins, men der er så mange andre derude. Du kan gennemse endnu mere på denne side, hvis du er nysgerrig.

Bootstrap rammer

Bootstrap er faktisk en stor ramme, fordi den lader brugere Tilpas standard HTML og CSS stilarter med nogle få klasser.

Men udviklere har taget standard BootStrap biblioteket og tilføjet deres egne stilarter for at skabe endnu større rammer arbejde som temaer, så du behøver ikke at genstille Bootstrap fra bunden.

Heldigvis er de alle gratis, og de kører alle på standard BootStrap klasserne.

Bootflat

Måske er den mest kendte BootStrap ramme Bootflat UI at følger den flade design trend.

Det virker med alle standard Bootstrap funktioner, herunder alle JavaScript-komponenter. De store forskelle er mere i design og struktur hvor sideelementer bruger flade farveordninger til at bevæge sig væk fra Bootstraps gradientstile.

Bootflat er ikke blevet overbrugt meget meget, så du kan tilføje denne ramme på enhver destinationsside eller hjemmeside for at skabe et unikt udseende til dit websted.

Det er 100% gratis og endda kommer med a farvevælger, så du kan finde flade farveskemaer, der passer til dit layout.

Få Shit Done

Dette overraskende blunt UI kit bygger også oven på Bootstrap 3-biblioteket, og det frigives gratis på GitHub.

Få Shit Done kommer fra holdet hos Creative Tim, hvor de sælger et par premium ressourcer. Dette specifikke UI-sæt har en pro-version, men det er slet ikke nødvendigt.

Open source-versionen har mere end nok til alle, og du kan tjekke ud live demo for at se, hvordan det ser ud i browseren.

Bootstrap materiale design

En anden populær design tendens er Googles materiale design. Dette er et designsprog, der oprindeligt blev lavet til Android app designere, men har siden spredes på nettet og fik stor støtte fra UI / UX designere.

Denne utrolige Bootstrap materiale ramme bruger de materiale design funktioner til opbygge en brugerdefineret design stil ud af Bootstraps bibliotek.

Som standard er det understøtter alt i BootStrap 3 og opdateres for øjeblikket for at understøtte Bootstrap 4. Du kan lære mere på den officielle hjemmeside, som har dokumentation og demoer.

Et lignende bibliotek du måske forsøger er MDBootstrap, selvom jeg finder denne lidt sværere at arbejde med.

Bootplus

Google skabte det materielle designsprog, men de har også deres egne stilarter til mange af deres værktøjer og webapps.

Bootplus efterligner Google+ interface-stilen, sammen med mange af Googles hjælpedokumenter, Google Drev og lignende webapps. Det har alle de samme funktioner som Bootstrap, herunder grids, layout stilarter, element stilarter og JavaScript komponenter.

Du kan endda gennemse en demo på webstedet for at se forskelle mellem Bootplus og den oprindelige Bootstrap UI. For en gratis ressource er Bootplus omfattende, og den er perfekt til alle, der kan lide Googles designteknikker.

Værktøjer og ressourcer

Endelig vil jeg dykke ind i de mange gratis værktøjer til tilpasse og opbygge Bootstrap layouts.

Disse værktøjer er alle webapps, og mange af dem er endda åbne for GitHub. De er lavet for at spare dig tid og hjælpe dig med at designe utrolige Bootstrap layouts uden meget kode.

Live editor

Den fri Bootstrap live editor er et af de bedste værktøjer for ikke-tekniske designere. Hvis du ikke ved, hvordan man kan kode, kan du stadig stole på denne Bootstrap Builder for at oprette et helt layout fra bunden.

Det kører lige i din browser og du kan endda vælge fra præfabrikerede skabeloner for at komme i gang.

Valg i sidepanelet giver dig det Tilføj bestemte CSS værdier hvis du kender nogle frontend-kodning. Men du kan også bruge GUI'en til at ændre farver, skrifttyper, størrelser og stort set alt andet du kan lide.

Når du er færdig, klik “Få tema” og du kan kopiere / indsætte de opdaterede CSS-stilarter i dit eget projekt. Super nem måde at genoprette Bootstrap uden at skulle rekode alt fra bunden.

Form bygherre

Dette gratis Bootstrap form builder er en træk og slip browser værktøj Det giver dig mulighed for at oprette Bootstrap formularer fra bunden.

Igen, det kræver nulkodningskendskab og du har fuld adgang til alle Bootstrap 3 elementer. Vælg bare det element du ønsker, og træk det lige ind i venstre boks. Herfra kan du ændre alt fra pladsholderteksten til CSS-klassen.

Langt den sejeste formbygger jeg nogensinde har set, og den er 100% fri!

BootSwatchr

Et andet gratis værktøj jeg virkelig kan lide er BootSwatchr. Det er afhængig af Bootstrap-rammerne, og det lader dig opdater farver, tema stilarter, og overordnede layout af siden.

Hvad jeg synes om denne app er, hvordan det også kommer med a gratis galleri af prædesignede stilarter.

Så kan du downloade et design som en anden allerede lavet eller du kan bruge det som udgangspunkt for at tilpasse dit eget tema.

Bevæger sig fremad

Bootstrap vokser kun i popularitet, så nu er den bedste tid til dykke ind i denne ramme. Heldigvis er der snesevis af plugins, rammer og gratis værktøjer, du kan bruge til at fremskynde dev-processen.

I denne artikel viste jeg bare toppen af isbjerget, så hvis du ikke kan se noget her, er det nyttigt at komme ud til Google og se, hvad du ellers kan finde.