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.

Instagram advarer deg om noen skjermbilder en utveksling gjort i Instagram Direct

Når noen sender en midlertidig melding via Instagram Direct, er sjansene gode at de ikke vil at meldingen skal registreres for alltid. For de som omgår denne funksjonen ved å skjermbilde den midlertidige meldingen, vil du kanskje vite at Instagram tester ut en funksjon som vil varsle brukerne dersom du bestemmer deg for å skjermbilde meldingen sendt via Instagram Direct.Måt

(Tekniske og design tips)

Tuesday.css er The Hottest Animation Library akkurat nå

Nå bør du allerede være kjent med Animate.css som det primære animasjonsbiblioteket blant webdesignere.Men det er en ny gutt på blokken som heter Tirsdag, og det tar web animasjon med makt .Dette nye biblioteket er ikke helt annerledes i format eller implementering. Men tirsdag kommer med en håndfull nye CSS-animasjoner som du ikke finner andre steder .Disse

(Tekniske og design tips)