SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

290 Plugins, 198 contribs sur SPIP-Zone, 131 visiteurs en ce moment

Accueil > Rédaction > Assistants de rédaction > Disposition avec Bootstrap > Disposition avec Bootstrap

Disposition avec Bootstrap

19 mars 2018 – par Mikha – 10 commentaires

16 votes

Ce plug-in permet d’utiliser certaines possibilités offertes par Bootstrap 2.32 dans l’espace de rédaction grâce à quelques modèles.
Notamment :
- faire de la mise en page « responsive » (placement de blocs en fonction de la taille de l’écran/fenêtre) grâce aux modèles « conteneur » et « contenu »
-  utiliser le carousel de Bootstrap
-  utiliser les boites modales de Bootstrap

Ce plug-in vise à rendre utilisables les possibilités de Bootstrap 2.32 pour la rédaction d’articles. Bootstrap propose un ensemble de choses très différentes :
-  définition de blocs responsive pour organiser une page
-  un carousel
-  des boites modales
-  des tooltips
etc.

Pour l’instant, nous n’avons implémenté que les blocs responsive, le carousel et les boites modales. L’objectif de ce module est de ne pas restreindre l’utilisation de ces possibilités à la création de squelettes, mais surtout de rendre disponible les possibilités de Bootstrap dans l’espace dédié à la rédaction d’articles, grâce à quelques modèles.

Note importante 1 : ce plug-in a été pensé pour être utilisé avec SPIPR. Cela ne signifie pas qu’il ne peut pas fonctionner avec un SPIP « de base » et un thème, mais il faut un peu préparer le contenu des articles (au niveau de leur squelette) avant pour que tout se passe bien. Typiquement, il faut que la partie dédiée à la rédaction soit contenue dans (voir ici).

Note importante 2 : Avec le thème de base de SPIPR tout se passe bien. En revanche, certains thèmes de SPIPR font des « hacks » un peu tordus dans les définitions de classes de Bootstrap qui font que certains alignements seront décalés.

Blocs Responsive : « conteneur » et « contenu »

Avant de rentrer dans le vif du sujet, il faut savoir que Bootstrap travaille avec un système de 12 colonnes (c’est comme ça). Ainsi, tout élément de mise en page sera aligné sur une grille de 12 colonnes, et aura lui-même une largeur donnée entre 1 et 12, correspondant au nombre de colonnes qu’il utilise. Quelques exemples extraits de la doc de Bootstrap :

Pour plus de détails, voir la documentation officielle de Bootstrap.

Dans SPIP, on va pouvoir organiser la mise en page grâce à deux modèles : conteneur et contenu.
-  un « contenu », qui sert à contenir le texte ou les images qui nous intéressent. Sa propriété la plus importante est sa largeur, entre 1 et 12
-  un « conteneur », qui ne peut contenir que des « contenus », pour les organiser entre eux. On peut imbriquer autant de conteneurs que l’on veut entre eux pour arriver à des mises en pages complexes si on le veut (mais c’est rarement utile). Outre sa largeur, lorsque l’on crée un conteneur, il faut préciser s’il est le premier d’une hiérarchie de conteneur/contenu pour que la mise en page ne souffre pas de décalages. Cela se fait avec le l’option « principal »

Exemple :

Ce petit code aboutit à la mise en page suivante :

En plus de cela, on peut donner des paramètres supplémentaires aux conteneurs et aux contenus.
Pour les conteneurs :
-  justifierV=oui : Impose à tous les enfants du conteneur de faire la même hauteur
-  centrer=oui : Impose à tous les enfants du conteneur de se centrer horizontalement
-  fluide=oui : active le mode « fluide » (= largeur relative au lieu de absolue) de Bootstrap pour ce conteneur. Voir ici.
-  class : attribue une classe CSS au conteneur. A titre d’exemple, le plug-in met à disposition bsNotePostItTexte, bsNotePostIt, bsNote, bsNoteTexte.
-  imgFond : identifiant d’une image à mettre en fond du conteneur
-  imgFondPos : définit le positionnement du fond. Par exemple, left top va aligner le coin en haut à gauche de l’image de fond.

Pour les contenus :
-  centrer=oui : Impose au texte et images contenus de se centrer horizontalement.
-  class : attribue une classe CSS au contenu.
-  url : si ce paramètre est renseigné, un click sur le contenu enverra vers la page web dont l’url est fournie ici.
-  marge : définit une marge intérieure. La syntaxe est du type h1b3g2d1 : h pour « haut », b pour « bas », g pour « gauche », d pour « droite ». Les valeurs qui suivent la lettre sont en pixels. Par exemple h5b5g5d5 crée une marge de 5 pixels uniforme. b2g3 impose une marge de 2 pixels en bas et 3 à gauche.
-  imgFond : identifiant d’une image à mettre en fond du conteneur
-  imgFondPos : définit le positionnement du fond. Par exemple, left top va aligner le coin en haut à gauche de l’image de fond.

Note 1 : ce plug-in est compatible avec « inserer modele ». Lorsque inserer modele est installé, vous disposez d’assistants vous guidant sur la syntaxe à employer.

Note 2 : Il est possible que les squelettes dans lesquels vous travaillez par défaut fassent que la largeur maximale (12) ne soit pas possible. Dans ce cas, vous pouvez soit identifier quelle largeur maximale est possible, soit utiliser le mode « fluide ».

Blocs Responsive : modèles complémentaires

Le plug-in fournit également un ensemble de modèles supplémentaires. Tous peuvent être insérés facilement à travers « inserer modele » s’il est installé. Ces modèles sont :

img|deco : variante des images responsive du plugin « media responsive ». Est bien adapté pour des images d’illustration qui vont prendre toute la largeur du « contenu » dans lequel l’image se trouve.
Exemple :

Affichera l’image dont l’identifiant est le 12. Autres paramètres :
-  dans : place l’image dans un contenu. Par exemple, dans=contenu7 place l’image dans un contenu de largeur 7. Les deux écritures ci-dessous sont exactement équivalentes :
Ecriture 1 :

Ecriture 2 :


-  commeFond=oui : impose à l’image de se comporter comme une image de fond, dans une div qui épouse exactement les dimensions de sa div mère. C’est un comportement pratique quand on a une image qui sert juste à décorer et dont on se moque si elle doit apparaitre entière ou pas : ainsi, elle va se tronquer automatiquement.
-  imgFondPos : définit le positionnement du fond. Par exemple, left top va aligner le coin en haut à gauche de l’image de fond.
-  dansContenuPropre=oui : le problème d’une image de fond c’est qu’elle épouse parfaitement les dimensions de la div dans laquelle elle est. Parfois c’est voulu, parfois on voudrait que l’image respecte les marges. Dans ce cas il faut activer cette option.
-  imgClass : CSS à appliquer à l’image.
-  class : CSS à appliquer au « contenu ».
-  Tous les paramètres passés normalement à media responsive seront normalement interprétés.

presentoir : modèle simple composé d’une image et d’un texte, éventuellement agrémenté d’un pictogramme issu du plug-in « picto avec Font Awesome » s’il est installé.

Exemple :

Il existe en deux variantes : |vertical et |horizontal. Les autres paramètres (optionnels) sont :
-  dans : place le présentoir dans un contenu. Par exemple, dans=contenu7 place le présentoir dans un contenu de largeur 7.
-  texte : le texte du présentoir.
-  titre : le titre du présentoir.
-  img : l’identifiant de l’image du présentoir.
-  picto : le nom du pictogramme à utiliser.
-  class : CSS à appliquer au « presentoir ».

Goodies Bootstrap : Carousel

Un carousel « basique » pour les images existe sous Bootstrap. Il existe ici aussi sous forme de modèle (à documenter plus tard).

Goodies Bootstrap : Carousel « transparents »

L’idée ici est d’utiliser le carousel Bootstrap pour passer des éléments plus complexes que des images. Notamment, il est usuel de vouloir passer des citations ou des logos. Du coup le carousel ressemble un peu à un jeu de « transparents » type « powerpoint ».
Exemple :

Tout tient dans la « description ». Ici on crée un carousel composé de 3 slides (séparés par des « / » dans « description »). 1 de citation, puis 1 de logos, puis 1 de citations. Les valeurs, séparées par des « + », correspondent à des numéros d’articles ou des identifiants d’images. Le nombre d’éléments que l’on veut mettre sur un même slide n’est pas limité par la syntaxe, mais si on en met trop la lisibilité posera probème à un moment. Typiquement, éviter de dépasser 3 citations ou 4 logos pour un même slide.
Deux autres paramètres peuvent être utilisé :
-  maxSpanLogo : valeur entre 1 et 12 qui représente la largeur maximale que peut faire un logo, en colonnes bootstrap.
-  maxSpanCite : valeur entre 1 et 12 qui représente la largeur maximale que peut faire une citation, en colonnes bootstrap.
Notez que ce carousel est « responsive », lorsque l’on passe en mode « téléphone mobile », les citations et logos défilent un par un, quelle que soit la description que l’on a fait, pour respecter le petit format de ces écrans.

Goodies Bootstrap : Boite Modale

Il faut deux modèles pour utiliser correctement une boite modale :
-  la boite elle même, créée avec le modèle modale,
-  l’élément capable de la faire apparaitre, modale|lien.
Exemple :

Le numéro qui suit « modale » doit être unique sur un même article. Il permet d’identifier de quelle boite on parle, pour faire correspondre la modale au lien qui va la déclencher.
La première ligne de l’exemple crée la modale. Son contenu sera simplement donné par un article dont on indique le numéro.
La deuxième ligne utilise le modèle « modale|lien ». Il peut fournir une image, un texte, un bouton ou faire le lien avec une zone identifiée dans un SVG.
Exemple pour un texte :

Exemple pour un bouton :

Exemple pour une image :

Exemple pour une SVG (modale déclenchée par un appui dans une zone sensible d’un SVG) :
<modale1|lien|SVGDoc=133|SVGId=Developper>
ici SVGDoc est l’identifiant de l’image SVG, et SVGId est l’identifiant d’un élément du SVG que l’on souhaite cliquable.

Installation

Ce plug-in s’installe comme n’importe quel plug-in de SPIP. Aucune phase additionnelle n’est nécessaire.

Remarques

Ce plug-in utilise les possibilités offertes par les plug-ins « image responsive » et « medias responsive ». Toutefois, le plug-in, lorsqu’il est actif, modifie (faiblement) leur code, modifications nécessaires à son bon fonctionnement avec les modèles de « disposition ». J’ignore, à ce stade, si cela provoque des effets de bords dans d’autres contextes.

Dernière modification de cette page le 16 mai 2018

Retour en haut de la page

Vos commentaires

  • Le 27 juin à 20:50, par Mike En réponse à : Disposition avec Bootstrap

    Bonjour,
    J’ai installé ce plugin avec succès mais je ne comprends pas comment intégrer bootstrap à mes pages ... Lorsque j’insère des portions de codes dans mes squelettes, elles ne sont en effet pas prises en compte ...
    Merci d’avance pour votre aide.

    • Le 28 juin à 07:58, par Mikha En réponse à : Disposition avec Bootstrap

      Bonjour,
      avez-vous installé le plug-in bootstrap 2 ? Quelle est votre configuration ? (SPIP-R ou pas ?)

    • Le 28 juin à 08:14, par Mike En réponse à : Disposition avec Bootstrap

      Merci pour votre réponse aussi rapide,
      J’utilise actuellement spip3 et ai installé le plugin « Disposition responsive avec Bootstrap » et les plugins nécessaires à son bon fonctionnement :
      -  Bootstrap 2.1.10
      -  Image Responsive 7.5.7
      -  Insertion avancée d’images 1.10.15
      -  LESS CSS 1.1.1
      J’aimerais si possible ne pas utiliser spipR mais j’ai toutefois installé le plugin et cela semble ne rien changé.

    • Le 28 juin à 08:17, par Mikha En réponse à : Disposition avec Bootstrap

      C’est très bizarre. Ce serait possible de me donner l’URL d’une page du site sur laquelle vous avez un article avec un bout de code « disposition » dessus ? (et quel est ce code aussi).
      Merci !

    • Le 28 juin à 08:33, par Mike En réponse à : Disposition avec Bootstrap

      Pour l’instant je travail en local sur un spip « tout neuf ». Par exemple, à partir du squelette rubrique, j’ai inséré le code suivant dans la boucle B_articles :

      1. <div class="container">
      2. <conteneur12|debut|principal=oui>
      3. <contenu4|debut>
      4. ici du texte et des images (par exemple utilisez le plug-in "bolo" pour injecter du texte)
      5. <contenu4|fin>
      6. <contenu8|debut>
      7. ici du texte et des images (par exemple utilisez le plug-in "bolo" pour injecter du texte)
      8. <contenu8|fin>
      9. </div>

      Télécharger

      Mais je pense que je n’ai pas compris où l’on pouvait insérer ces portions de code.

    • Le 28 juin à 10:49, par Mikha En réponse à : Disposition avec Bootstrap

      Bonjour,
      ok j’ai compris. Le code que vous mettez est un code qu’un utilisateur de SPIP peut mettre via le back-end (c’est la vocation première de ce plug-in). Pour utiliser les modèles de disposition dans les boucles SPIP, il faut utiliser la syntaxe des modèles. Un exemple :
      [(#MODELEconteneur_debut,id=12,principal=oui)]
      [(#MODELEcontenu_debut,id=6)]
      du texte ici
      [(#MODELEcontenu_fin)]
      [(#MODELEcontenu_debut,id=6)]
      du texte ici
      [(#MODELEcontenu_fin)]
      [(#MODELEconteneur_fin)]

      Dites moi si ca marche.

    Répondre à ce message

  • Le 16 mai à 18:28, par katmandou En réponse à : Disposition avec Bootstrap

    Tant pis, je vais essayer juste de récupérer les modèles définis dans ce plugin, et si besoin les adapter à bootstrap 4.
    C’est le plus simple je pense dans mon cas.
    Merci quand même.

    Répondre à ce message

  • Le 16 mai à 12:21, par katmandou En réponse à : Disposition avec Bootstrap

    Bonjour,
    Plugin très intéressant, mais on en est à la version 4.1.1 de bootstrap, ce plugin fonctionne-t-il avec la dernière version de bootstrap ?

    • Le 16 mai à 12:25, par Mikha En réponse à : Disposition avec Bootstrap

      A ma connaissance non, et il y a peu de chances que cela puisse. Notez que lorsque j’ai développé ce module, BS4.1.1 était en beta, que spip-r ne le supportait pas (mon objectif était de fonctionne avec spip-r), et je n’avais pas compris que spip-r pouvait fonctionner avec BS 3 (sinon j’aurais développé pou BS3). Je n’ai pas planifié de portage pou BS 3 ou 4, mais je peux aider si quelqu’un s’y colle.

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Jeux pour SPIP 3

    27 juillet 2012 – 52 commentaires

    Un portage pour SPIP 3 du plugin Jeux a été fait. Explications et nouveautés. Cet article concerne une mise à jour du plugin Jeux dont la description complète est disponible ici : Des jeux dans vos articles !. Le code du plugin Jeux est un code (...)

  • Mailshot

    16 janvier 2013 – 336 commentaires

    Ce plugin prend en charge l’envoi en nombre d’info-lettres par email. Mailshot permet l’envoi en nombre d’emails au moyen d’un SMTP (ou d’un service externe) dédié à cet effet. Il permet de limiter la cadence d’envoi. Enfin, ce plugin implémente la (...)

  • Plugins Giseh

    26 novembre 2010 – 460 commentaires

    Les plugins correspondants aux fonctionnalités de Giseh, compatibles avec SPIP 3.2, SPIP 3.0 (et SPIP 2.1) et compatibles (sous SPIP 3.2) avec PHP 7.0 et 7.1, sont les suivants : le plugin « ciparam : Configurateur de squelettes » le plugin « cisquel  (...)

  • Bouquinerie V2

    6 octobre 2017 – 23 commentaires

    Voici la version pour SPIP 3.x du plugin Bouquinerie. Cette nouvelle version permet de gérer des livres et le ou les auteurs associés. Elle n’est pas compatible avec la précédente version. Cet article est une présentation générale et un guide pour (...)

  • Formulaire de contact avancé

    23 mars 2009 – 1410 commentaires

    Un formulaire de contact configurable, avec de multiples options.