Share
Bootstrap (momenteel bij versie 3) draait om het snel bouwen van websites, of dit nu prototypes of eindproducten zijn. In de video's van vandaag gaan we zelf een Bootstrap-lay-out bouwen, in recordtijd, met behulp van Emmet's krachtige tijdbesparende markup-syntaxis.
Voordat we in Bootstrap duiken, is het de moeite waard om even kennis te maken met wat Emmet is en hoe je het kunt gebruiken.
Nadat we de basis van Emmet-syntaxis hebben behandeld, laten we nu zien hoe we het kunnen toepassen om Bootstrap-markeringen te genereren.
Download Bootstrap, pak Emmet voor je favoriete code-editor en zie welke tijdbesparende fragmenten je kunt bedenken! Hier zijn een paar fragmenten zoals aangetoond in de screencast, gewoon om je op weg te helpen.
U kunt bijvoorbeeld een fragment als dit gebruiken voor een paginakop:
header> h1> a [href = index.html] Dit is een landingspagina ^ p.lead Dit is een beschrijving van deze pagina
Het volgende geeft je een goed begin voor het bouwen van een Bootstrap-navbar met vier items:
.navbar> ul> li * 4> a [href = #] link $
Deze grote brok (misschien wil je hem uit elkaar halen om te zien wat er aan de hand is) genereert een carrousel, inclusief navigatielinks en vorige / volgende pijlen:
.carousel.slide # carousel-example> (ol.carousel-indicatoren> li [data-target = # carrousel-voorbeeld data-slide-to = $] * 3) (. carrousel-inner> .item * 3> img [src = http: //lorempixel.com/1170/300 alt = Afbeelding] +. carousel-caption Dit is een bijschrift $) (een [href = carrousel-voorbeeld data-slide = vorige] .left.carousel-control> span.icon-prev ^ a [href = carrousel-voorbeeld data-slide = volgende]. right. carrousel-control> span.icon-next)
Vervolgens zal deze andere grote brok de "Producteigenschappen" -sectie genereren die we hebben doorlopen. Het bevat een lorempixel placeholder-afbeelding en een aantal lorem ipsum dummy-tekst die door Emmet is ingetrokken:
sectie # functies> h3 Producteigenschappen + p Hier is waarom je dit product echt zou moeten kopen. + hr + (. row> .col-lg-4> .media> a [href = #]. pull-left> img [src = http: //lorempixel.com/64/64 alt = Afbeelding] ^. media-body> h4.media-heading Feature name + p> lorem10) * 4
Onze testimonials sectie kan met deze string worden gebouwd (let op de zwaar geneste klein en citeren elementen binnen de blockquote:
sectie # testimonials> .panel> .panel-heading Een paar woorden van onze klanten. +. rij> (. col-lg-6> blockquote> lorem10 + small John from> cite Source) * 2
En ten slotte de put die we onderaan de pagina hebben geplaatst:
sectie # volgorde> .well.well-lg> h3.text-center Nu bestellen! + p.text-center Ontvang een geweldige bonus + p.text-center> a [href = #]. btn.btn -primaire Plaats bestelling →
Accentsconagua