TagBootstrap 3

[Magento 2] Ajouter et exploiter dans un fichier PHTML un composant javascript issu de Bootstrap 3 par l’intermédiaire de requireJS

Astuce testée, fonctionnelle!. Dans mon exemple, nous allons chercher à mettre en place le composant Modal de Bootstrap 3.

LESS/CSS

Ajouter les sources CSS de Bootstrap 3 dans: /<Vendor>/<theme>/web/css/vendor/bootstrap/. Il faut embarquer:

  • le fichier /less/variables.less
  • le fichier /less/mixins.less
  • le fichier /less/modals.less
  • et TOUT LE DOSSIER /less/mixins/

…et pas le fichier /dist/css/bootstrap.css.

Ne pas oublier d’importer les fichiers LESS nécessaires dans une feuille de style source de votre thème (je l’ai fait dans /web/css/source/_theme.less, même si à priori ce fichier ne serait là que pour surcharger des valeurs de variables dèjà précédemment définiers dans un thème parent de Magento 2):

JS

Ajouter les sources JS de Bootstrap 3 dans: /<Vendor>/<theme>/web/js/vendor/bootstrap/. Attention: sachant que nous allons nous concentrer uniquement sur le composant Modal, il faut utiliser le fichier /js/modal.js (et pas le fichier /dist/js/bootstrap.js).

Créer le fichier: /<Vendor>/<theme>/requirejs-config.js:

Dans n’importe quel fichier *.phtml, placez le code HTML de votre modale Bootstrap. Si vos balises comportent les attributs qui vont bien vous n’aurez pas besoin de déclarer votre modale via JS. Dans le cas contraire, dans le fichier *.phtml qui contient le markup HTML de votre modale:

Attention, commande à exécuter avant de rafraîchir la fenêtre du navigateur: $ php bin/magento cache:clean; rm -rf pub/static/*; rm -rf var/view_preprocessed/*.

[jQuery] Empêcher le composant dropdown de Bootstrap 3 de se refermer lorsqu’on clique à l’intérieur de celui-ci

Placer une classe .dontCloseDropdown sur chaque élément cliquable présent dans le Dropdown qui ne doit pas refermer ce dernier.

[jQuery] Bootstrap 3 et affix ne conserve pas la pleine largeur d’un élément si j’utilise les classes de la grille

[Bootstrap 3] Garder une popover ouverte lorsqu’on survole celle-ci avec la souris

Sources: How can I keep bootstrap popover alive while the popover is being hovered? et Live demo w/Plunker.

[Bootstrap 3] Conserver plusieurs collapse ou dropdown ouverts simultanément

Source Keep multiple collapse open (with button to toggle) – Bootstrap 3.

L’astuce consiste à :

  1. Englober l’ensemble des éléments collapse dans une <div> avec un id="accordion".
  2. Rajouter sur les liens, qui au clic ouvrent les parties cachées, des attributs data-parent="#accordion" (dont la valeur fera référence à celle de l’id de la div englobante) et href="#collapseOne" (dont la valeur sera unique pour chaque lien).
  3. Rajouter un attribut id="collapseOne" unique (dont la valeur fera référence à la valeur de l’attribut href placé sur le lien juste au-dessus).

…et à ajouter un bout de code javaScript supplémentaire (voir plus bas).

[Bootstrap] Fermer les éléments Collapse lorsqu’on clique à l’extérieur des zones

Source (partielle) : Bootstrap Close collapse on outside click snippet – Bootply.

Une partie de la solution a été trouvée en tapant les mots-clés suivants dans Google : bootstrap collapse affix close when click outside.

Eviter qu’au clic sur une zone ouverte, cette dernière se referme

Utile lorsque la zone ouverte contient des éléments d’action comme des liens, des cases à cocher, etc… On ne voudrait pas refermer la zone lorsque l’utilisateur est en-train de remplir un formulaire par exemple.

[Bootstrap] Composant Collapse : fermer l’élément ouvert au click sur un autre élément

Source : Bootstrap collapsed div not closing when clicking a new link for another toggle.

Nativement, le composant Collapse de Bootstrap ne permet pas de fermer l’élément ouvert au click sur un autre élément. Il se contente d’ouvrir et de fermer l’élément lié au lien ou au bouton au click sur celui-ci.

Utiliser ce code :

You can change .nav a and .navbar-to-collapse with your desired variable or add to them more variable simply by using < , > between each variable.

More explanation :

  1. .nav a is the variable that you target by your click and in this example it’s a link under a nav class, you can modify it to target a link using ID not class $('#nav a')
  2. .navbar-to-collapse is the value for data-target=".navbar-to-collapse" and you can modify it to the data-target you use.

So a complete example (for illustrating ) should be like that:

[Bootstrap 3][SASS] Changer la valeur de la variable $grid-columns

Retenir : lorsqu’on redéfinit ponctuellement la valeur de la variable $grid-columns pour créer une batterie de styles spécifique à un affichage en x (autre que la valeur par défaut qui est 12) colonnes, il faut penser à redéclarer systématiquement la valeur par défaut juste après. Cf. l’exemple ci-dessous.

Source : Bootstrap: Advanced Grid Tricks (sous-partie Redefining grid-columns).

Le truc ici est de réaliser qu’SCSS parse de haut en bas et qu’à partir du moment où il atteint la partie de notre code où nous cherchons à redéfinir la variable $grid-columns les propriétés précédentes ont déjà été générées.

Si nous changeons la valeur de $grid-columns à 5 pour générer une batterie de styles spécifiques pour une grille 5 colonnes et que nous remettons cette valeur à la valeur par défaut (12) ensuite, nous n’obtiendrons pas d’effets de bord.

Dans l’exemple ci-dessus, des classes .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4 et .col-xs-5 seront générées pour créer une mise en page sur 5 colonnes (réparties sur 100% de largeur) par rangée.

Créer une batterie de classes pour une grille 5 colonnes

© 2020 devfrontend.info

Theme by Anders NorénUp ↑