Intégration de Bootsrap 3 dans Spip 3

sakyamuni

Septembre 2015

Bonjour,
Je m’intéresse depuis peu à Bootstrap 3, j’aimerai l’intégrer à Spip 3, d’abord faire un site en partant de zéro, mais je ne trouve pas beaucoup d’infos ni de tutos sur la façon de procéder.
Je viens d’installer spip 3 vierge dans un dossier pour faire des tests.
Où placer les dossiers liés à Bootsrap ?
Comment lier les fichiers css, js à ceux de spip ?
Quel doit être l’organisation des dossiers ?
Merci.

Par note Par date Par date chronologique

Indiquez l’intérêt que vous portez à cette réponse

0

Pierrox

Septembre 2015

Bonjour

Bootstrap3 est disponible pour spip

http://zone.spip.org/trac/spip-zone/browser/_plugins_/bootstrap3/branches/v2/paquet.xml
Indiquez l’intérêt que vous portez à cette réponse

0

sakyamuni

Septembre 2015

Bonjour,
Ok merci mais je fais quoi de ce fichier ?
Indiquez l’intérêt que vous portez à cette réponse

0

Pierrox

Septembre 2015

Avec ce fichier rien...
C’est juste un fichier de description de plugin.

Vous pouvez recuperer le plugin par git ou svn

Un exemple pour récuperer le plugin par git :
cd /chemin/du/dossier/plugin git clone https://git.spip.net/diffusion/ZBOOTSTRAP/bootstrap.git
Aller dans l’interface de spip -> gestions des plugins -> activer bootstrap3

Voila, j’espère que vous gagnerez du temps.
Indiquez l’intérêt que vous portez à cette réponse

0

sakyamuni

Septembre 2015

ok, merci, bootstrap est bien installé....
Donc maintenant si je dois ajouter mon propre css, je dois modifier quel fichier de mon squelette ?
Indiquez l’intérêt que vous portez à cette réponse

0

sakyamuni

Septembre 2015

ok, merci, bootstrap est bien installé....
Donc maintenant si je dois ajouter mon propre css, je dois modifier quel fichier de mon squelette ?
Indiquez l’intérêt que vous portez à cette réponse

0

Pierrox

Septembre 2015

Tout dépends de votre squelette de depart. Mais si vous surchargez le /squelette-dist
de spip3 vous devez créer un fichier /squelettes/css/perso.css
Indiquez l’intérêt que vous portez à cette réponse

0

Pierrox

Septembre 2015

Une page de démo est disponible :

http://mon.site.loc/?page=demo/bs3/bootstrap

pour charger bootstrap avec le squelette-dist copier squelettes-dist/inclure/head.html
dans squelettes/inclure/head.html

puis ajouté cette ligne
[<link rel="stylesheet" href="(#CSS{bs3/css/bootstrap.css})" type="text/css" />]
Vous verrez au passage que l’inclure charge des fichiers si disponibles comme perso.css
[<link rel="stylesheet" href="(#CHEMIN{css/style.css}|direction_css)" type="text/css" />] [<link rel="stylesheet" href="(#CHEMIN{css/perso.css}|direction_css)" type="text/css" />]
Indiquez l’intérêt que vous portez à cette réponse

0

sakyamuni

Septembre 2015

Pour le moment, je n’ai pas fait de squelette, c’est celui d’origine, je vais en créer un dans le dossier /squelettes.
C’est ici que je vais créer un dossier css/perso.css où je mettrai tout mon style lié à Bootstrap.
Pour récapituler, si je veux faire une page d’acceuil à mon style avec le css de Bootsrap, je la créée dans squelettes/sommaire.html et j’inclue dans le head :
[<link rel="stylesheet" href="(#CSS{css/bootstrap.css})" type="text/css" />]
Indiquez l’intérêt que vous portez à cette réponse

0

sakyamuni

Septembre 2015

Je veux par exemple refaire le menu principal de navigation du squelette d’origine.
Pour ça, j’ai crée un dossier squelettes, dans lequel j’ai crée les dossiers css, js,img,inclure et polices. J’ai aussi coller les fichiers article, sommaire, rubrique, contact et recherche.html.
Dans inclure/ j’ai coller nav.html et head.html issu de squelettes-dist.
Dans le head j’ai inclus cette ligne qui est un fichier de surcharge pour mon style :
[<link rel="stylesheet" href="(#CHEMIN{css/boot-theme.less})" type="text/css" />]
Je change donc tout mon menu dans nav.html mais ça ne marche pas, le style propore à Boostrap n’est pas pris en compte...
Une aide ?
Merci.
Indiquez l’intérêt que vous portez à cette réponse

0

Pierrox

Septembre 2015

Bonjour,

Inspirez vous bien des fichiers de démo livrés avec le plugin

http://zone.spip.org/trac/spip-zone/browser/_plugins_/bootstrap3/branches/v2/demo/bootstrap.html

#CSS c’est une évolution de chemin et ça permet d’utiliser le compilateur less. Sachant que la terminaison peu être un .less ou .css (peu importe)

Mais normalement on appelle juste une fois
[<link rel="stylesheet" href="(#CSS{css/bootstrap.css})" type="text/css" />]
et on fait les imports dans ce fichier
@import "css/boot-theme.less";
Il faut savoir que le plugin bootstrap3 déclare des chemins supplémentaires ( Un peu comme la variable d’environnement PATH sur unix/linux...)

Extrait de paquet.xml du plugin bootstrap3 :
<chemin path="bootstrap" type="public" /> <chemin path="bootstrap2spip" type="public" />
Donc vous devez avoir dans votre squelette une arbo du genre :
squelettes/boostrap/css/boot-theme.less

le fait que boot-theme.less soit appelé dans le fichier bootstrap.less du plugin vous dispense de l’appeler ailleurs.

Le boot-theme.less du dossier squelettes prévaudra sur le boot-theme.less d’un éventuel plugins...

En revanche si l’appel des mixins du plugin "plugins/boostrap3/boostrap/css/bootstrap.less" ne vous convient pas, vous pouvez le surcharger dans votre dossier squelettes :
en le plaçant a ce niveau de l’arbo :
squelettes/boostrap/css/bootstrap.less

C’est un peu partciulier à saisir au départ mais c’est pas si compliqué.

Je sais pas si j’ai été clair, mais bon courage...
Indiquez l’intérêt que vous portez à cette réponse

0

sakyamuni

Septembre 2015

Bonjour,
Oui merci, ça commence à être un peu plus clair, faut juste saisir la manière dont disposer tous les fichiers.
Mais en fait ce plugin fonctionne sous Boostrap version 2 ?
Est-il possible simplement de télécharger la dernière version de bootstrap et l’installer sous spip sans utiliser de plugin ?
Indiquez l’intérêt que vous portez à cette réponse

0

Septembre 2015

Effectivement je ne vous ai pas donné la bonne version :( dsl.

C’est ici
git clone https://git.spip.net/diffusion/ZBOOTSTRAPD/bootstrapd.git
Indiquez l’intérêt que vous portez à cette réponse

0

jeanyves

Mars 2016

Bonjour,

Savez si un plugin pour bootstrap 3 sera disponible . Pour bootstrap 2, cela marche bien et tout est clair pour l’installation mais pour bootstrap 3 je ne vois pas de plugin à installer par la procédure indiquée sur l’interface d’administration . ( URL d’un plugin bootstrap 3 ou d’un dépôt xml ?)
Indiquez l’intérêt que vous portez à cette réponse

0

Mars 2016

Bonjour,

Bootstrap3 sera certainement disponible mais pour l’heure le paquet à installer simplement via l’admin spip n’est pas distribué.

vous pouvez toujours le recuperer par svn

http://zone.spip.org/trac/spip-zone/browser/_plugins_/bootstrap/trunk
Indiquez l’intérêt que vous portez à cette réponse

0

Amire

Mai 2017

Bonjour,

Nous sommes en mai 2017. Il y a pas mal de chose qui a changé. Est ce qu’il y a un moyen de nous faire un tuto pour les novices comme moi.

Dans le dossier bootstrap3 il y a bootstrap et bootstrap2spip c’est lequel qu’ont doit se servir pour personnaliser les squelettes ? Merci.
Indiquez l’intérêt que vous portez à cette réponse

0

Juin 2017

Salut,
J’ai testé le plugin Bootstrap pour SPIP mais j’ai pas mal galéré alors du coup j’en ai profité pour faire mon premier plugin pour SPIP (https://drive.google.com/file/d/0B0NC_sIjyTNdcEZkeUxQTkRlUzg/view?usp=sharing) que j’ai appelé Bootspip et que vous devez décompresser dans votre dossier /plugins.
Très minimaliste, il s’occupe juste de :
– télécharger la dist de Bootstrap 3.3.7 dans le dossier /lib, à la racine de votre site (Il faut créer le dossier et activer les droits en écriture si besoin avant d’activer le plugin sinon il ne pourra pas télécharger et décompresser les fichiers).
– D’insérer, entre les balises
de vos squelettes, les fichiers CSS et JS nécessaires au bon fonctionnement de Bootstrap grâce aux balises #INSERT_HEAD et #INSERT_HEAD_CSS.
Un exemple se trouve dans /plugins/bootspip/squelettes. Vous pouvez le visualiser à l’adresse suivante : http://monsite.com/?page=exemple_bootspip

Si vous avez quelques remarques ou suggestions, je suis preneur car je nage complètement dans la documentation de SPIP.... J’ai beaucoup de mal à trouver des infos à jour.

Paidge, un nouveau-né dans le monde spipien :p
Indiquez l’intérêt que vous portez à cette réponse

0

Juin 2017

je parlais bien sûr des balises HEAD