Table of contents
Présentation
BootStrap est un framework qui facilite et accélère le développement Front-End. Il inclue
- une base CSS très complète (au format LESS) configurée à partir d’un fichier de variables
- un ensemble de conventions de structure HTML et de nommage de classes
- des librairies javascripts simples pour les fonctions les plus courantes
BootStrap dispose d’une documentation détaillée qui facilite sa prise en main.
BootStrap pour SPIP
Un plugin BootStrap pour SPIP facilite l’intégration de BootStrap v2. Le plugin intègre toutes les CSS de BootStrap (v2.3.2) et y ajoute une couche d’adaptation à SPIP.
Adaptation au markup de SPIP
Le plugin intègre les CSS de BootStrap sans modification, mais y ajoute une couche d’adaptation au HTML générée par SPIP. Ainsi, les formulaires de SPIP qui utilisent un markup HTML différent de celui proposé par BootStrap bénéficient tout de même des styles de BootStrap. Si vous ajoutez vos propres formulaires, vous pouvez aussi bien utiliser le markup de BootStrap ou celui de SPIP, selon vos habitudes.
Les tableaux générés par SPIP à partir du contenu éditorial héritent aussi des styles de BootStrap.
De plus le plugin adapte le markup de la pagination de SPIP pour qu’elle bénéficie des styles de BootStrap.
Typographie
La typographie proposée nativement par SPIP dans son squelette par défaut est de meilleure facture que celle de BootStrap. Elle est également plus accessible car implémentée en em et non en px.
Le plugin BootStrap pour SPIP reprend donc la partie typographie de SPIP pour ces raisons.
#grid
Le plugin BootStrap pour SPIP intègre également l’outil de visualisation de la grille #grid. Il permet aux webmestres d’afficher la grille utilisée. Il est configuré pour se caler par défaut sur les 3 grilles de BootStrap (en fonction de la largeur de l’écran) et vous pouvez donc directement l’utiliser.
LESS
Pour permettre de travailler directement dans les feuilles de styles au format LESS sans passer par une étape de compilation manuelle, le plugin BootStrap nécessite le plugin LessCSS pour SPIP qui se charge de compiler automatiquement à la volée les feuilles LESS au format CSS.
BootStrap dans SPIPr
Tous les styles de BootStrap sont inclus dans les pages du squelette SPIPr, et il est donc possible d’utiliser l’ensemble du markup proposé dans la documentation de BootStrap et de bénéficier des styles et affichages prévus.
Dans le cas des formulaires, il est possible aussi d’utiliser la convention de balisage proposée dans SPIP, qui est intégralement prise en charge par l’adaptation de BootStrap à SPIP.
En revanche, la plupart des javascripts de BootStrap ne sont pas intégrés par défaut et vous devrez donc les ajouter dans vos squelettes pour utiliser les fonctionnalités correspondantes de BootStrap.
Page de démonstration
Le plugin BootStrap pour SPIP intègre plusieurs pages de démonstration dans le dossier demo/.
La page principale de démonstration est visible à l’adresse spip.php?page=demo/bootstrap [1]. Cette page reprend tous les éléments d’interface pris en charge par BootStrap, ainsi qu’une charte typographique qui permet de vérifier l’affichage de tous les enrichissements typographiques usuels.
- Page de démonstration du plugin BootStrap
Organisation des fichiers
Le plugin BootStrap pour SPIP est organisé en deux sous dossiers bootstrap/ et bootstrap2spip/ :
bootstrap/ bootstrap/ css/ fichiers LESS de BootStrap img/ images glyphicons de BootStrap js/ fichiers javascripts de BootStrap bootstrap2spip/ css/ surcharges des fichiers LESS de BootStrap boot-theme.less feuille vide dispo pour la personnalisation bootswatch.less feuille vide dispo pour la personnalisation spip.css quelques styles spécifiques au code généré par SPIP spip.list.less styles du module de liste spip.comment.less styles des commentaires formulaires/ charter.html formulaire SPIP de démonstration recherche.html formulaire de recherche SPIP adapté à BootStrap js/ hashgrid.js #grid html5.js support de HTML5 pour les vieux navigateurs modeles/ modèles de pagination SPIP adaptés à BootStrap
Surcharges des feuilles LESS
Le dossier bootstrap2spip/ contient des feuilles de style LESS qui surchargent celles de BootStrap. Voyons un exemple concret avec la feuille alerts.less :
Ici on voit que la surcharge pour SPIP utilise complètement le fichier natif de BootStrap en lui ajoutant simplement quelques définitions qui héritent de BootStrap. C’est le cas de la plupart des surcharges du dossier bootstrap2spip/ à l’exception de la typographie complètement reprise de SPIP.
Utiliser la surcharge
Lors de la compilation des fichiers LESS, le plugin LessCSS interprète chaque directive @import en recherchant le fichier demandé dans le chemin de SPIP, incluant les plugins et le dossier squelettes/.
Ainsi, si vous écrivez @import "css/alerts.less", SPIP va rechercher le fichier css/alerts.less dans squelettes/ puis dans tous les dossiers déclarés par les plugins.
Dans le plugin BootStrap, la recherche se fera d’abord dans le dossier bootstrap2spip/ pour voir si une surcharge spécifique à SPIP existe, puis dans bootstrap/ pour prendre le fichier natif de BootStrap sinon.
Vous pouvez donc personnaliser finement les surcharges de BootStrap de la façon suivante :
Par exemple
- vous pouvez annuler l’adaptation à SPIP pour le fichier css/alerts.css en mettant le contenu suivant dans squelettes/css/alerts.css :
- vous pouvez compléter l’adaptation à SPIP avec vos propres compléments. Pour le fichier css/alerts.css, en mettant le contenu suivant dans squelettes/css/alerts.css :
De manière générale, il faut éviter de surcharger des fichiers LESS de BootStrap pour bénéficier des mises à jour de ces fichiers lors de la mise à jour du plugin.
Pour la personnalisation de son site, il est préférable d’utiliser les 2 fichiers css/boot-theme.less et css/bootswatch.less qui ont été ajoutés et sont par défaut vides. Ils permettent d’ajouter des personnalisations CSS de BootStrap, qui seront compilées avec l’ensemble des feuilles de BootStrap (ce qui permet d’utiliser tous les mixins de BootStrap).
Images dans les feuilles LESS
Un point auquel il faut faire attention avec les feuilles LESS concerne les chemins relatifs vers les images de décoration : le fonctionnement est différent de ce qu’on peut avoir l’habitude dans les feuilles CSS.
Dans une feuille CSS, si on utilie le code url(../img/deco.png) le chemin relatif ../img/deco.png s’interprète par rapport à l’emplacement du fichier CSS.
Dans une feuille LESS, avec le même code, le chemin relatif s’interprète par rapport à l’emplacement du fichier LESS principal compilé. Cela fait une différence importante lorsque la directive @import est utilisée.
En effet, dans ce cas c’est toujours l’emplacement du fichier principal, celui qui fait les @import, qui est pris en référence, et non l’emplacement du fichiers inclus, même si c’est lui qui référence l’image.
Dans le cas de BootStrap, cela veut dire que c’est l’emplacement du fichier bootstrap.less qui est pris en compte. Ainsi, pour utiliser une image dans un fichier LESS personalisé de BootStrap, il convient de donner un chemin relatif par rapport au fichier bootstrap.less.
La solution consiste alors à copier le fichier bootstrap.less dans votre dossier squelettes/, à côté de votre fichier personnalisé, sans oublier d’y copier aussi le dossier img/ avec les glyphicons. C’est assez peu pratique, et de manière générale c’est évitable en ajoutant les images de décoration dans un fichier LESS qui n’est pas inclus par bootstrap.less mais directement par le squelette SPIPr.
Ressources
Une liste indicative et non exhaustive d’outils utilisables en complément de BootStrap pour générer des thèmes, construire des mockup etc... [2]
- http://bootswatch.com/
- https://wrapbootstrap.com/themes
- http://jetstrap.com/ un outil de Mockup en ligne pour BootStrap
- http://stylebootstrap.info/
- http://www.boottheme.com/
- http://bootswatchr.com/
- http://www.lavishbootstrap.com/
Discussions by date of activity
21 discussions
Bonjour,
J’ai un problème avec mon formulaire d’envoi de mail avec le plugin Formulaire de contact avancé 0.15.8.. la génération du bloc de prévisualisation (à l’issue de la rédaction du mail -> OK) semble rentrer en conflit avec autre chose.. Cela se traduit par une disparition du formulaire, l’apparition des textes dans toutes leur langues (idem dans le menu)...
Le formulaire est dans une flex-box dans un col-lg-6...
- > Spip 3.1.0
- > Bootstrap 3.0.6
- > Less css 1.0.7
- > Menu de langues avec liens 1.2.4
( > FullPages.js.. mais bon..)
Un avis ? Une idée ? M’aider....?
Merci
Reply to this message
Bonjour,
En travaillant sur un site en local (wamp) avec Spip 3.1, bootstrap3 et Lesscss v1.0.7, je remarque que les recalculs de pages prennent un temps fou...
L’onglet ’réseau’ de Firebug me montre en effet que le systeme fait se charger 12 fois le “GET ?var_mode=recalcul” et qu’à chaque fois cela prend dans les 11s.... Donc plus de 2mn au total..
Et je vois que c’est exactement la même chose sur la page démo du plugin : voir la capture jointe.
Je découvre Bootstrap et Less adapté à Spip et je ne vois pas où corriger cela... Wamp est-il en cause ?
Bref auriez-vous une idée ?
Merci beaucoup
Reply to this message
Bonjour,
Génial, Je l’utilise depuis quelques temps avec vos méthodes d’écriture de squelette “spipR/zcore” et c’est vraiment un plaisir d’écrire et de maintenir les templates spip. Ce que je prefère avec ce plugin c’est la typographie qui est tout simplement parfaite.
Le seul bémol, c’est le système de grille responsive qui est un peu moins pratique que sur la version 3 de bootstrap.
A ce propos, Y a t’il un chantier ou des réflexions pour l’intégration de la version 3 de Boostrap en plugin?
Merci beaucoup, Pierre
Je prévois de préparer une version BootStrap3, avec une couche de compatibilité pour les sites qui auront été développés avec cette version du plugin qui repose sur BS2, mais je n’ai pas encore commencé ce chantier, à venir dans les prochains mois certainement.
Bonjour,
Je vais sûrement me faire enguirlander, mais Mars 2015 c’est loin maintenant ? non ?
un bootstrap + récent ?
En effet, la dernière version du plugin est en BootStrap 3 http://zone.spip.org/trac/spip-zone/browser/_plugins_/bootstrap/trunk
Le zip ne va pas tarder, mais la doc est à mettre à jour, ce que je n’ai pas encore fait. C’est utilisable cependant.
merci je m’en vais mettre en oeuvre çà au + vite !
Reply to this message
Yo,
les citations de Bootstrap 2 et 3 sont pas compatibles avec le plugin Orthotypo.
Ce dernier ajoute des
<small class="fine">pour gérer les espaces fines. Sauf que Bootstrap fout un display block et un gros tiret devant tous lessmall… (pour gérer la source). Dans le 3 ils ont ajoutéfooter… mais laissésmallquand même.Et dans tous les cas : même si c’est pas Orthotypo qui le rajoute, dans une longue citation (ce à quoi sert blockquote), il peut tout à fait y avoir des trucs en “small” utilisés.
Donc il faudrait sûrement laissé footer mais virer complètement ce small dans notre adaptation “bootstrap2spip”.
(Et sinon j’ai pas pigé les dossiers : j’ai bien compris que tu as ajouté un préfixe différent pour B3, mais… la version avec préfixe “bootstrap3” a DEUX trunk : bootstrap/trunk + bootstrap3/trunk sont tous les deux “bootstrap3”.)
Sur irc Cerdic indique que http://zone.spip.org/trac/spip-zone/browser/_plugins_/bootstrap3 est obsolete et devrait disparaitre
Reply to this message
Bonjour,
quelle est la classe css à utiliser dans la déclaration du plugin menu pour déclancher l’appartion du menu bootstrap?
navbar-responsive?
navbar?
rien?
autre chose?
Pour le moment je n’arrive pas à l’afficher correctement.
Spip3.1 et les bootstrap installés.
Je n’ai pas non plus d’affichage de la demo . Est ce que j’ai manqué une étape?
Bonne journée et merci
Reply to this message
Hello,
Dans les formulaires de Bootstrap 3, les legend des fieldset ont un line-height de 0.05952381em : http://zone.spip.org/trac/spip-zone/browser/_plugins_/bootstrap/trunk/bootstrap2spip/css/forms.less#L5
Il y avait le même problème pour tous les jusqu’à une mise à jour récente (r93448 ?), donc je suppose que c’est lié.
Dans mon variables.less, les variables relatives aux tailles de polices et cie ont leur valeur par défaut.
Reply to this message
La surcharge ne fonctionne pas
Bonjour Cerdic
J’ai un soucis avec la surcharge dans mon plugin de thème principal.
Dans le répertoire css, j’ai un variables.less et theme.less qui sont tous les deux bien pris en compte.
Mais ce sont les seuls pris en compte par LESS.
J’ai créé un fichier buttons.less pour faire de la surcharge :
Ce fichier ne semble pas être pris en compte.
Si j’insère une erreur volontaire dans ce fichier, il n’y a pas d’erreur de compilation.
J’ai aussi un fichier bootswatch.less qui ne semble pas pris en compte lui non-plus.
Pour info, j’utilise BOOTSTRAP 3.
J’ai un plugin qui surcharge SPIPr (squelettes), un plugin pour le thème principal (css) , et un autre petit plugin pour surcharger le thème principal.
Qu’ai-je oublié ?
Reply to this message
Bonjour et merci pour ce plugin,
J’ai installé SPIPr et j’utilise le squelette SPIPr-dist.
Je souhaiterais utiliser la page « bootstrap_carroussel.html » contenue dans le dossier démo du plugin Bootstrap comme page d’accueil (sommaire) de mon site.
Quelle procédure convient-il de suivre pour la mettre en place ?
En vous remerciant pour l’aide que vous pourrez m’apporter,
Polémil
Reply to this message
En effet, un plugin adapté à la dernière version de Bootstrap serait vraiment top. Merci !
Reply to this message
bonjour
j’ai voulu m’interesser à ce plug in car j’ai découvert Boostrap 3 il y a peu et je dois dire que j’ai été totalement séduit. Jusqu’a maintenant je créais mes sites SPIP en intégrant des boucles spip dans les squelettes que je créé.
Je me lance aujourd’hui dans Boostap. J’envisageais donc de construire mes pages Bootstrap et de “glisser” dedans mes boucles SPIP.
Je n’ai pas bien compris comment fonctionne ce plug in , notamment en ce qui concerne un sujet évoqué plus haut “vos méthodes d’écriture de squelette « spipR/zcore »” ??
est ce que je peux avoir des explications sur cette méthode ? en quoi elle est plus “performante” que le fait de créer un squelette boostrap et de glisser des boucles dedans ?
merci de vos lumières
jacques
Reply to this message
Add a comment
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
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.
Follow the comments:
|
