Share
Bootstrap (actuellement à la version 3) consiste à créer rapidement des sites Web, qu’il s’agisse de prototypes ou de produits finis. Dans les vidéos d'aujourd'hui, nous allons créer nous-mêmes une structure Bootstrap, en un temps record, en utilisant la puissante syntaxe de balisage rapide d'Emmet..
Avant de plonger dans Bootstrap, il est utile de prendre une minute pour se familiariser avec ce qu’est Emmet et comment l’utiliser..
Après avoir couvert les bases de la syntaxe Emmet, voyons maintenant comment l’appliquer pour générer du balisage Bootstrap.
Téléchargez Bootstrap, prenez Emmet pour l'éditeur de code de votre choix et voyez quels extraits de code vous permettront de gagner du temps! Voici quelques extraits illustrés dans la capture d'écran, juste pour vous aider à démarrer..
Par exemple, vous pouvez utiliser un extrait de code comme celui-ci pour un en-tête de page:
en-tête> h1> a [href = index.html] Ceci est une page de destination ^ p.lead Ceci est une description de cette page
Les éléments suivants vous donneront un bon départ pour la construction d’une barre de navigation Bootstrap avec quatre éléments:
.barre de navigation> ul> li * 4> a [href = #] link $
Ce gros morceau (vous pouvez le choisir séparément pour voir ce qui se passe) va générer un carrousel, comprenant des liens de navigation et des flèches Précédent / Suivant:
.carrousel.slide # exemple_carousel> (ol.indicateurs_carousel> li [cible-de-données = # exemple-carrousel de données-slide-to = $] * 3) (. carrousel-inner> .item * 3> = http: //lorempixel.com/1170/300 alt = Image] +. carrousel-caption Ceci est une légende $) (a [href = exemple-carrousel data-slide = prev] .left.carousel-control> span.icon-prev ^ a [href = exemple-carrousel data-slide = suivant] .right.carousel-control> span.icon-suivant)
Ensuite, cet autre morceau important générera la section "Caractéristiques du produit" que nous avons examinée. Il inclut une image de marque de réservation lorempixel et du texte factice lorem ipsum tiré par Emmet:
section # features> h3 Caractéristiques du produit + p Voici pourquoi vous devriez vraiment acheter ce produit. + hr + (. rangée> .col-lg-4> .media> a [href = #]. pull-left> img [src = http: //lorempixel.com/64/64 alt = Image] ^. media-body> h4.media-rubrique Nom de la fonction + p> lorem10) * 4
Notre section de témoignages peut être construite avec cette chaîne (notez le code fortement imbriqué). petit et citer éléments dans le blockquote:
section # testimonials> .panel> .panel-heading Quelques mots de nos clients. +. row> (. col-lg-6> blockquote> lorem10 + small John from> cite Source) * 2
Et enfin, le puits que nous avons placé en bas de page:
section # commande> .well.well-lg> h3.text-center Commandez maintenant! + p.text-center Recevez un bonus formidable + p.text-center> a [href = #]. btn.btn -primary Passer une commande →
Accentsconagua