Share
Bootstrap (actualmente la versiunea 3) este vorba despre construirea rapidă a site-urilor web, indiferent dacă acestea sunt prototipuri sau produse finite. În videoclipurile de astăzi vom construi un aspect Bootstrap, în timp record, folosind sintaxa de marcare puternică de marcare Emmet.
Înainte de a ne arunca cu capul în Bootstrap, merită să luați un minut pentru a vă familiariza cu ceea ce este Emmet și cum îl puteți folosi.
După ce ați acoperit elementele de bază ale sintaxei Emmet, să vedem acum cum putem să o aplicăm pentru a genera marcarea Bootstrap.
Descărcați Bootstrap, apucați-l pe Emmet pentru editorul de cod preferat și vedeți ce fragmente de economisire a timpului puteți veni! Iată câteva fragmente, așa cum sa demonstrat în ecranul publicitar, doar pentru a vă face să mergeți.
De exemplu, este posibil să utilizați un fragment asemănător pentru antetul unei pagini:
header> h1> a [href = index.html] Aceasta este o pagină de destinație ^ p.lead Aceasta este o descriere a acestei pagini
Următoarele lucru vă va oferi un început bun pentru construirea unei bare de navigare Bootstrap cu patru elemente:
.navbar> ul> a * 4> a [href = #] link $
Această bucată mare (poate doriți să o alegeți pentru a vedea ce se întâmplă) va genera un carusel, inclusiv legăturile de navigare și săgețile precedente / următoare:
.carusel -silful # exemplul carusel> (carusel-indicators> li [date-target = # carusel-exemplu date-slide-to = $] * 3 = http: //lorempixel.com/1170/300 alt = Imagine] +. carusel-caption Aceasta este o legendă $) span.icon-prev ^ a [href = carusel-exemplu data-slide = următor] .car.carusel-control> span.icon-next)
Apoi, această altă parte considerabilă va genera secțiunea "Caracteristicile produsului" pe care am trecut-o. Acesta include o imagine de tip "placeholder" a lorempixelului și un text fals de tip lorem ipsum tras de Emmet:
secțiunea # caracteristici> h3 Caracteristicile produsului + p Iată de ce ar trebui să cumpărați cu adevărat acest produs. + hr + (.src> .col-lg-4 >.media> a [href = #] [src = http: //lorempixel.com/64/64 alt = Imagine] ^. media-body> h4.media-heading Nume caracteristică + p> lorem10) * 4
Secțiunea noastră de mărturii poate fi construită cu acest șir (notează puternic imbricate mic și cita elemente în interiorul blockquote:
secțiunea # testimonials> .panel> .panel-heading Câteva cuvinte de la clienții noștri. +. rând> (. col-lg-6> blockquote> lorem10 + small John from> cite Source)
În fine, fântâna pe care am plasat-o în partea de jos a paginii:
secțiunea # comanda> .well.well-lg> h3.text-center Comanda acum! + p.text-center Primeste un mare bonus + p.text-center> a [href = #] -primar Comandați locul →
Accentsconagua