Share
Bootstrap (for tiden på versjon 3) handler om raskt bygge nettsteder, enten de er prototyper eller ferdige produkter. I dagens videoer skal vi bygge oss et Bootstrap-layout, på rekordtid, ved hjelp av Emmets kraftige tidsbesparende oppslagssyntax.
Før vi dykker inn i Bootstrap, er det verdt å ta et minutt å bli kjent med hva Emmet er og hvordan du kan bruke det.
Etter å ha dekket grunnleggende om Emmet-syntaxen, la oss nå se hvordan vi kan bruke den til å generere Bootstrap-markup.
Last ned Bootstrap, ta tak i Emmet for den foretrukne kodeditoren, og se hvilke tidsbesparende utklipp du kan komme med! Her er noen utdrag som vist i screencast, bare for å komme i gang.
For eksempel kan du bruke en utdrag som dette for en sideoverskrift:
header> h1> a [href = index.html] Dette er en destinasjonsside ^ p.lead Dette er en beskrivelse av denne siden
Følgende vil gi deg en god start for å bygge en Bootstrap navbar med fire elementer:
.navbar> ul> li * 4> a [href = #] link $
Denne store klumpen (du vil kanskje plukke den fra hverandre for å se hva som skjer) vil generere en karusell, inkludert navigasjonsforbindelser og forrige / neste piler:
.carousel.slide # karusell-eksempel> (ol.carousel-indicators> li [data-target = # karusell-eksempel data-slide-til = $] * 3) (karusell-indre> .item * 3> img [src = http: //lorempixel.com/1170/300 alt = Image] +. karusell-bildetekst Dette er en bildetekst $) (en [href = karusell-eksempel data-slide = prev] .left.carousel-control> span.icon-prev ^ a [href = karusell-eksempel data-slide = neste] .rett.karusell-kontroll> span.icon-next)
Da vil denne andre store delen generere "Produktegenskaper" -delen vi gikk over. Den inneholder et lorempixel plassholderbilde og noen lorem ipsum dummy tekst trukket inn av Emmet:
§ # funksjoner> h3 Produktegenskaper + p Her er hvorfor du burde virkelig kjøpe dette produktet. + hr + (.rad> .col-lg-4> .media> a [href = #]. Dra til venstre> img [src = http: //lorempixel.com/64/64 alt = bilde] ^. media-body> h4.media-overskrift funksjonsnavn + p> lorem10) * 4
Vår testimonialseksjon kan bygges med denne strengen (merk den tungt nestede liten og sitere elementer innenfor blockquote:
delen # testimonials> .panel> .panel-heading Noen ord fra våre kunder. +. rad> (.col-lg-6> blockquote> lorem10 + liten John fra> sitere Source) * 2
Og til slutt, brønnen vi plasserte nederst på siden:
seksjon # rekkefølge> .well.well-lg> h3.text-center Bestill nå! + p.text-center Motta en god bonus + p.text-center> a [href = #]. btn.btn -Primary Plasser rekkefølge →
Accentsconagua