Salvattore se présente comme une alternative à la maçonnerie jQuery avec une différence importante: il utilise la configuration CSS au lieu de JavaScript. Ces types de grilles sont visibles partout sur le Web, probablement sur Pinterest..
Aujourd'hui, nous allons utiliser Salvattore en combinaison avec Twitter Bootstrap 3 pour créer une structure de grille fluide et impressionnante.
Tout d'abord, vous devez récupérer la bibliothèque JavaScript Salvattore (minifiée ou source). Ensuite, vous voudrez relier le CSS de Twitter Bootstrap. Au lieu de télécharger et d’héberger notre propre copie, nous l’emprunterons directement à partir du BootstrapCDN de NetDNA..
Salvattore + Bootstrap
Une fois cette opération terminée, vous êtes prêt à commencer à configurer Salvattore.!
Ensuite, vous aurez besoin d’une feuille de style externe ou d’un tag dans votre en-tête. La plupart de nos travaux se feront dans la feuille de style.
Remarque: vous devez inclure type
et rel
attributs pour que Salvattore fonctionne correctement.
Twitter Bootstrap fournit une structure de grille puissante et flexible qui se concentre sur les requêtes multimédia ascendantes. Jetons un coup d'oeil à une rangée commune de colonnes.
Vous remarquerez dans le balisage ci-dessus le motif de col- [taille] - [numéro de colonne]
. Avec les tailles disponibles de xs
, sm
,Maryland
, et lg
, nous sommes en mesure de définir différentes tailles de colonne pour différents points d'arrêt sans écrire de requêtes multimédia spécifiques. Regardez cet exemple qui montre comment les colonnes se déplacent à différentes largeurs d'écran.
Nous allons créer une grille fluide à l'aide du composant panneau de Bootstrap. Le balisage pour créer le panneau est construit comme ceci:
En-tête de panneau sans titreContenu du panneau
Maintenant que nous avons les morceaux Bootstrap dont nous avons besoin, nous allons tout mettre ensemble avec Salvattore. Pour le moment, nous commencerons par six panneaux vides; plus tard, nous allons rendre tout dynamique pour donner du contenu à chaque panneau.
Pour que Salvattore fonctionne correctement, notre conteneur de grille a besoin d’une colonnes de données
attribut. Voici à quoi ressemble notre balisage:
En-tête de panneau sans titreContenu du panneau
Ensuite, nous allons aller à notre feuille de style et ajouter les étiquettes suivantes via des pseudo-éléments:
Écran @média et (largeur-min: 1px) et (largeur-max: 767px) #columns [colonnes-données] :: before content: '2 .col-xs-6'; @media screen et (min-width: 768px) et (max-width: 991px) #columns [colonnes de données] :: before content: '3 .col-sm-4'; @media screen et (min-width: 992px) et (max-width: 9999px) #columns [colonnes de données] :: before content: '4 .col-md-3';
Les points d'arrêt que nous avons choisis mappent directement aux requêtes de média de Bootstrap. Salvattore utilise le::avant
pseudo-élément et contenu
attribut pour définir les classes des colonnes créées, puis tente de scinder les éléments de manière uniforme dans ces colonnes.
Jusqu'ici, nous avons strictement respecté CSS, mais si vous souhaitez faire un effort supplémentaire, JavaScript peut vous offrir quelques avantages..
Salvattore va encore plus loin en proposant des fonctionnalités supplémentaires. Avec ces fonctions et une connexion à une API (nous utilisons l'API Google Book pour extraire les livres d'Ernest Hemingway), nous pouvons créer une grille dynamique. Voici le code JavaScript que nous allons utiliser:
fonction append (titre, contenu) // construire / sélectionner nos éléments var grid = $ ('# colonnes') [0]; var item = document.createElement ('div'); // construit le html var h = ''; h + = ''; salvattore ['append_elements'] (grid, [item]) item.outerHTML = h; $ .getJSON ("https://www.googleapis.com/books/v1/volumes?q=inauthor:Ernest+Hemingway&callback=?", fonction (données) $ (données.items) .each (fonction (i , book) append (book.volumeInfo.title, book.volumeInfo.description);););'; h + = titre; h + = ''; h + = ''; h + = contenu; h + = ''; h + = '
Remarque: jQuery Obligatoire
Nous créons d'abord un ajouter
fonction qui prend notre titre et le contenu, et les enveloppe dans notre balise de panneau. Nous utilisons ensuite le salvattore ['append_elements'] (grid, [item])
fonction pour ajouter l'article à notre grille. Enfin, nous exécutons l'appel AJAX pour extraire les données dynamiques.
Pour que cela fonctionne correctement, nous voudrons supprimer tout le contenu du support de grille..
Salvattore remplira les colonnes pour nous.
Notre balisage final ressemble à ceci:
Livres de Ernest Hemingway
Salvattore facilite la création de grilles dynamiques de type maçonnerie pour ceux qui ne connaissent pas beaucoup JavaScript. Cela dit, avec une petite quantité de JavaScript, créer des grilles dynamiques associées à un contenu dynamique est un jeu d'enfant. Enfin, Bootstrap fournit une structure de nommage de classe flexible permettant de construire facilement des grilles pour tout point d'arrêt..