Disposition avec Bootstrap

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).

<div class="container">
...
</div>

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 :

<conteneur12|debut|principal=oui>
<contenu4|debut>
ici du texte et des images (par exemple utilisez le plug-in "bolo" pour injecter du texte)
<contenu4|fin>
<contenu8|debut>
ici du texte et des images (par exemple utilisez le plug-in "bolo" pour injecter du texte)
<contenu8|fin>
<conteneur12|fin>

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 :

< img12|deco>

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 :

< img12|deco|dans=contenu7>

Ecriture 2 :

<contenu7|debut>
<img12|deco>
<contenu7|fin>


-  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 :

<presentoir|vertical|dans=contenu8|texte=du texte au kilomètre|titre=le titre|img=12|picto=book>

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 ».

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

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 :

<transparents|responsive|description=cite+131+133/logo+188+185+185/cite+141+143>

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 :

<modale1|article=72><modale1|lien|dans=contenu3|img=10|largeur=200>

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 :

<modale1|lien|texte=mon texte>

Exemple pour un bouton :

<modale1|lien|bouton=mon texte>

Exemple pour une image :

<modale1|lien|dans=contenu3|img=10>

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.

Discussion

5 discussions

  • 2

    Salut !
    J’ai vu le « modeles » chose, je l’ai fait de cette façon, par exemple :

    [(# MODELEconteneur_debut, id = 12, principal = oui)]
    [(# MODELEcontenu_debut, id = 3)]
    Sur d’autres sites
    [(#MODELEcontenu_fin)]
    [(#MODELEconteneur_fin)]

    et rien :-( je ne vois que le code de #MODELE visible ...
     :-(

    • Si vous êtes dans le code d’un squelette, essayez une syntaxe du genre :

       [(#MODELE{conteneur_debut}{id=12}{principal=oui}]
    • Merci.
      Cela ne donne pas d’erreur, mais ne fait rien parce qu’il n’y a pas ces modèles : conteneur_debut, conteneur_fin, contenu_debut, contenu_fin ... Comment ces modèles devraient-ils être ?

    Répondre à ce message

  • 1

    Salut.
    Merci pour votre travail et Joyeux Noël.
    J’essaie de créer un site Web pour le projet « Aulas enraizadas » (http://aulasenraizadas.org/) de quelques petites écoles rurales dans les Pyrénées.
    J’ai installé Spip, Spipr, Bootstrap ... et il me faudrait créer le contenu du sommaire avec des « pins » comme dans le plugin moodboard (https://contrib.spip.net/Moodboard) ou le site web de Ramdam (http://www.ramdam.com).
    J’ai essayé avec

    <div class="container">
    <conteneur12|debut|principal=oui>
    <contenu3|debut>
    <div class="liste long articles">
    <INCLURE{fond=liste/articles-resume,articles_exclus=#GET{exclus},nb=10,env,ajax} />
    </div>
    <contenu3|fin>
    </div>

    mais je ne reçois rien :-(
    Une idée ?
    Merci beaucoup

    • Bonjour,
      je pense que vous tapez ce code dans le squelette. Si c’est dans le squelette il vous faut employer la syntaxe des modèles SPIP. Mon plug-in est utilisable pour les squelettes mais il est bien plus pensé pour être utilisé dans l’espace éditorial (privé).

    Répondre à ce message

  • 5

    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.

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

    • 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é.

    • 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 !

    • 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 :

      <div class="container">
      <conteneur12|debut|principal=oui>
      <contenu4|debut>
      ici du texte et des images (par exemple utilisez le plug-in "bolo" pour injecter du texte)
      <contenu4|fin>
      <contenu8|debut>
      ici du texte et des images (par exemple utilisez le plug-in "bolo" pour injecter du texte)
      <contenu8|fin>
      </div>

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

    • 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

  • 1

    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

  • 1

    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 ?

    • 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

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

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

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom