Share
Bootstrap (attualmente alla versione 3) si occupa di creare rapidamente siti Web, siano essi prototipi o prodotti finiti. Nei video di oggi ci costruiremo un layout Bootstrap, in tempi record, utilizzando la potente sintassi del markup risparmio di tempo di Emmet.
Prima di immergerci in Bootstrap, vale la pena impiegare un minuto per familiarizzare con ciò che Emmet è e come è possibile utilizzarlo.
Avendo coperto le basi della sintassi di Emmet, vediamo ora come possiamo applicarlo per generare il markup di Bootstrap.
Scarica Bootstrap, prendi Emmet per il tuo editor di codice preferito e scopri quali frammenti di tempo ti risparmiano! Ecco alcuni frammenti come mostrato nello screencast, solo per farti andare avanti.
Ad esempio, potresti utilizzare uno snippet come questo per un'intestazione di pagina:
header> h1> a [href = index.html] Questa è una landing page ^ p.lead Questa è una descrizione di questa pagina
Quanto segue ti darà un buon inizio per la creazione di una barra di navigazione Bootstrap con quattro elementi:
.barra di navigazione> ul> li * 4> a [href = #] link $
Questo grosso pezzo (potresti volerlo distinguere per vedere cosa sta succedendo) genererà un carosello, inclusi i link di navigazione e le frecce prev / next:
.carousel.slide # carousel-example> (ol.carousel-indicators> li [data-target = # carousel-example data-slide-to = $] * 3) (. carousel-inner> .item * 3> img [src = http: //lorempixel.com/1170/300 alt = Immagine] +. carousel-caption Questa è una didascalia $) (a [href = carousel-example data-slide = prev] .left.carousel-control> span.icon-prev ^ a [href = carousel-example data-slide = next] .right.carousel-control> span.icon-next)
Quindi, questo altro pezzo considerevole genererà la sezione "Caratteristiche del prodotto" che abbiamo esaminato. Include un'immagine segnaposto in lorempixel e un testo fittizio di lorem ipsum inserito da Emmet:
sezione # caratteristiche> h3 Caratteristiche del prodotto + p Ecco perché dovresti comprare davvero questo prodotto. + hr + (. row> .col-lg-4> .media> a [href = #]. pull-left> img [src = http: //lorempixel.com/64/64 alt = Immagine] ^. media-body> h4.media-heading nome funzione + p> lorem10) * 4
La nostra sezione di testimonianze può essere costruita con questa stringa (notare la pesante nidificazione piccolo e citare elementi all'interno del blockquote:
sezione # testimonials> .panel> .panel-heading Alcune parole dai nostri clienti. +. row> (. col-lg-6> blockquote> lorem10 + small John from> cite Source) * 2
E infine, il pozzo che abbiamo posizionato in fondo alla pagina:
section # order> .well.well-lg> h3.text-center Ordina ora! + p.text-center Ricevi un grande bonus + p.text-center> a [href = #]. btn.btn -primario ordine di luogo →
Accentsconagua