LayoutIt! - Bygg HTML Bootstrap Layouts med lethed

Hvis du vil bygge en responsiv nettside, vil Bootstrap være et nyttig verktøy for deg. Denne siste rammeinnovasjonen har gitt webutviklere en ny tilnærming til å skape enklere, raskere og bedre responsive nettsteder og programmer generelt.

Men det er ganske vanskelig og for ikke å nevne tidkrevende å bygge en layout fra bunnen av. For å gjøre denne prosessen enklere og raskere, vil vi i dette innlegget se på LayoutIt! som hjelper deg å enkelt lage HTML-oppsett basert på Bootstrap.

LayoutIt! er et nettbasert verktøy for å lage et webdesign med dra og slipp. LayoutIt! støtter den nyeste Bootstrap-versjonen, og hvis du ikke vil starte helt fra begynnelsen, har den 3 grunnleggende maler du kan bruke. Designet er da klart for bruk i prosjektet ditt, komplett med innebygd Bootstrap-kode . Hittil er det fortsatt i beta-modus, men så langt fungerer det bra uten en hitch.

Starter

For å komme i gang med LayouIt! Du må gå over til Rediger-siden. Som du ser i følgende skjermbilde, er det ulike verktøy og alternativer for å sjekke ut. I nærheten av toppen kan du se de 3 modusene du kan bygge under: Redigeringsmodus, Utviklermodus og Forhåndsvisningsmodus.

Under den øverste linjen kan du se elementene på venstre sidefelt og Containeren til høyre. Containeren er lerretet du kan bygge og tilpasse elementene på. Når du er ferdig med å bygge bare, last ned koden, Del eller lagre den.

Elements

Det finnes 4 typer elementer: Grid System, Base CSS, Javascript og flere komponenter. Bare dra og slipp det nødvendige elementet til containeren og tilpass det til det.

For å starte, velg et rutenett eller flere for å lage oppsettet du vil se på nettstedet ditt. Gitteret gir deg i utgangspunktet rader og kolonner for deg å jobbe med.

Når du har nettverket, kan du legge til noen grunnleggende CSS-elementer med Base CSS, for eksempel tittel, avsnitt, blockquote, tabell, knapp, bilde og så videre. Du kan finne andre tilleggsinnstillinger i hvert element, for eksempel justering for avsnitt, vekt eller å gjøre det som ledelsen.

For å legge til vanlige attributter, gir komponenter deg flere grunnleggende elementer på nettstedet, for eksempel knapp, topptekst, tekst, breadcrumb, paginering og så videre. Og til slutt, for å forbedre nettstedet ditt, bare slipp i noen Javascript- elementer: modal, navbar, faner, varsler, sammenbrudd eller karusell.

Brukerhåndbok

For å se hvordan LayoutIt! Fungerer i aksjon, vi skal prøve å bygge Hongkiat.coms hjemmesideoppsett. Her er en oversikt over oppsettet.

Først må vi jobbe på gridoppsettet.

Oppsettet trenger fire hovedrader: en enkelt kolonne for topptekst og navbar; to-kolonne for tekstinnhold, bilde og paginering; en enkelt kolonne for sidebjelken; fire kolonner for bunnteksten og en kolonne for fotnote. Følgende skjermbilde er hvordan utformingen ser ut på et skjelettrutenett.

Nå for å legge til de andre elementene:

1. Vi legger til en overskrift fra "Komponenter" og en Navbar fra "Javascript".
2. For å sette bildet ved siden av tekstinnholdet, må en annen 8 4 rutenett settes inn i de første 8 rutenettet (se bildet ovenfor).
   • Legg til tekst fra "Komponenter" og legg til bilde fra "Base CSS".
   • Under Tekst og bilde, sett inn paginering fra "Komponenter"
   • For sidelinjen la vi bare legge til en etiketttekst ved hjelp av Tittel fra "Base CSS".
3. For bunnteksten kan vi Tittel og punkt fra "Base CSS".
4. For fotnoten legger vi bare til avsnitt fra "Base CSS".

Og vi er ferdige. Dette er hvordan oppsettet vil se ut. Tips: For å aktivere tekstredigering, høyreklikk på teksten.

For de som nylig er kjent med Bootstrap og ønsker å bygge Bootstrap-støttede layouter, LayoutIt! er et morsomt verktøy å leke med. Gi det en tur og la oss få vite hva du synes om det.

10 bærbare batterier til MacBook

En av de tingene MacBook har på det, er dens ganske solide batterilevetid, bortsett fra hvis du må være på farten mye. Det er ikke tilrådelig å la MacBook plugge inn i en strømkilde i lange perioder, da det vil forkorte batteriets levetid. Men hvis du alltid reiser med MacBook, vil det ikke være lett å finne en strømkilde for å koble til når du har lite juice. Det er der

(Tekniske og design tips)

Gratis Sketch GUI Kits For Web & Mobil Design - Best Of

Mange designere hopper raskt fra Adobe Photoshop til Sketchs fantastiske rike. Dette digitale designprogrammet for OS X gir bedre verktøy for UI-design, ikondesign, og tilbyr pixel + vektorstøtte i ett program. Dette har ført til en økning i popularitet for freebies utgitt av Sketch designere .Alle som er kjent med freebie-markedet vet at brukergrensesnitt er noen av de mest populære ressursene for grensesnittdesignarbeid. Jeg

(Tekniske og design tips)