Personnalisation des plugins Bootstrap jQuery –

Bootstrap est livré avec des tonnes de plugins prêts à l'emploi jQuery . La beauté des plugins Bootstrap est que vous pouvez les insérer dans votre projet, écrire le balisage approprié en utilisant data- attributs, et le JavaScript entre automatiquement. Il n'est pas nécessaire d'écrire du code JavaScript.

Il peut arriver que vous souhaitiez ajouter vos propres personnalisations aux plugins Bootstrap pour les adapter aux exigences de votre projet.

Si c'est vous, lisez la suite. Je vais vous montrer comment vous pouvez faire exactement cela.

Comment personnaliser l'apparence des plugins Bootstrap

Vous pouvez personnaliser l'apparence des plugins Bootstrap en travaillant avec CSS. D'un autre côté, si vous souhaitez modifier la fonctionnalité du plugin vous devrez écrire du code JavaScript.

Personnaliser Bootstrap CSS devrait être fait dans votre propre fichier personnalisé, que vous soyez re travailler avec le code source Sass ou avec la version compilée.

Pour garder les choses simples et compatibles avec CodePen, tirez le paquet Bootstrap précompilé du CDN.

Cela inclut à la fois la feuille de style …

… et le fichier JavaScript. Aussi, n'oubliez pas d'inclure jQuery et, si vous prévoyez d'utiliser des listes déroulantes, Popper.js aussi:

Pour faciliter la modification du code CSS, les développeurs de Bootstrap ont inclus une liste de variables CSS pour les couleurs et les points d'arrêt dans l'élément : root en haut de la feuille de style

Par exemple, la variable pour la couleur de succès verte est - succès: # 28a745;

Pour changer cela en une nuance de vert différente, remplacez la valeur de couleur de la variable dans votre propre feuille de style et ajoutez ce code au sélecteur de votre choix:

 selector {
  background-color: var (- succès);
}

Pour modifier l'apparence d'un plugin spécifique, le plus simple est de trouver les styles Bootstrap en utilisant devtools de votre navigateur et en les remplaçant par vos propres styles

Concentrons-nous sur le composant d'alerte simple dans cet article

Par exemple, essayez de changer les valeurs initiales de l'alerte pour la marge bottom et border-radius dans votre document CSS personnalisé:

 .alert {
  rembourrage: 2rem 1.50rem;
  marge-bas: 1.5rem;
  border-radius: 50rem;
}

Maintenant, tous les éléments avec la classe .alert ressembleront à ceci:

Ensuite, passons à l'extension du Fonctionnalité de l'alerte Bootstrap

Personnalisation des fonctionnalités d'un plugin Bootstrap

Modifier la fonctionnalité des plugins Bootstrap implique souvent de travailler avec le document CSS et JavaScript

La plupart des effets dynamiques sont générés par l'ajout et la suppression de classes CSS. est assez simple.

Dans cet article, je vais ajouter quelques fonctionnalités supplémentaires au composant Alert .

Les alertes affichent une information et les utilisateurs peuvent les retirer de la page au cliquez sur un bouton.

Je vais ajouter des boutons zoomer et dézoomer à l'alerte, qui permettent aux utilisateurs de rendre l'alerte plus grande ou plus petite respectivement. Je vais également inclure un bouton contraste élevé pour permettre aux utilisateurs de voir le contenu de l'alerte en mode contraste élevé, c'est-à-dire inverser la couleur de fond et la couleur du texte.

Mettons-nous au travail! 19659031] La structure de l'alerte

Pour commencer, commencez par ajouter le balisage de l'alerte:

   × 
   + 
   - 
  
  
 Nouvelle alerte bootstrap 
  
 Zoom avant et arrière ou activation du contraste mode. 

Ci-dessus est une boîte d'alerte simple avec trois liens: le premier est un lien natif Bootstrap d'alerte de rejet . Cela sert de modèle pour les trois liens personnalisés que vous allez créer. Le lien – permet aux utilisateurs de réduire la taille et le contenu de la boîte d'alerte, tandis que le lien + fait exactement le contraire – c'est-à-dire agrandir la boîte d'alerte et le texte. 19659003] Le lien de contraste permet le mode de contraste élevé sur l'alerte.

Notez le data-zoomIn data-zoomOut et data-highContrast sur chaque le balisage du lien personnalisé. Ce sont nos hooks pour l'événement click: un bouton avec ces types de données personnalisés sera responsable du déclenchement des actions sur la boîte d'alerte

Modification du CSS

L'étape suivante consiste à créer votre propre fichier CSS personnalisé pour le plugin d'alerte et ajoutez le code suivant:

 .alert-zoom-in-out {
  taille de police: 16px;
  hauteur: auto;
  en haut: 20px;
  couleur: RGB (12, 84, 96);
  couleur de fond: RGB (209, 236, 241);
}

.high-contrast-on,
. haut contraste sur un,
.high-contrast-on i {
  couleur de fond: rgb (12, 84, 96);
  couleur: RGB (209, 236, 241);
}

alert-zoom-out-out est la classe que j'ai choisie pour la boîte d'alerte. Étant donné que la fonctionnalité que vous construisez inclut la modification de la combinaison de taille et de couleur de la boîte d'alerte, vous devez définir ceux pour la classe alerte-zoom-in-out

La classe contraste-on sur la boîte d'alerte sera ajoutée et supprimée dynamiquement en utilisant JavaScript. Lorsqu'elles sont ajoutées, les valeurs couleur et couleur de fond sont inversées. Une fois retirée, la boîte d'alerte retrouvera son apparence par défaut.

Ajout d'une fonctionnalité de zoom avant

Il y a généralement plusieurs façons d'obtenir le même résultat dans la programmation. Mon approche doit beaucoup à Benjamin Jakobus et Jason Marah . Pour cette simple personnalisation, j'ai choisi de prendre la méthode publique close () sur le fichier Bootstrap alert.js comme point de référence.

Commencez par encapsuler le code à l'intérieur un a immédiatement invoqué l'expression de fonction (IIFE), ce qui évite de polluer la portée globale avec le code du plugin. Ajoutez également la fonction à l'objet jQuery:

 (function ($) {
  'use strict';
}) (jQuery);

Les documents JavaScript Bootstrap indiquent que chaque plugin expose son constructeur brut sur une propriété Constructor à laquelle vous pouvez accéder dans votre code pour ajouter des fonctionnalités personnalisées:

 (function ( $) {
  'use strict';

  const Alert = $ .fn.alert.Constructor;

}) (jQuery);

À ce stade, la constante Alert contient une référence au constructeur du plugin d'alerte. Cela vous permet d'accéder au prototype du plugin pour pouvoir y ajouter une méthode personnalisée:

 Alert.prototype.zoomIn = function (e) {
  // code de zoom ici
}

Vous êtes maintenant prêt à ajouter votre méthode personnalisée. Voici la méthode Bootstrap close () qui fonctionnera comme modèle pour zoomIn () :

 close (element) {
  element = element || this._element

  const rootElement = this._getRootElement (élément)
  const customEvent = this._triggerCloseEvent (rootElement)

  if (customEvent.isDefaultPrevented ()) {
    revenir
  }

  this._removeElement (rootElement)
}

Voici le code de la méthode zoomIn () :

 // empêcher l'action par défaut sur le lien
if (e) e.preventDefault ();

// Cache l'élément sur lequel on a cliqué
const $ this = $ (this);

// trouve le parent de l'élément qui a
// a été cliqué, ce qui correspond à l'alerte
const $ parent = $ this.closest ('. alert');

// déclenche l'événement personnalisé sur l'élément
$ this.trigger (e = $ .Event ('zoomIn.bs.alert'));

// saisir la largeur et la taille de police actuelles de l'alerte
let $ parentWidth = parseInt ($ parent.css ('largeur'));
let $ parentFontSize = parseInt ($ parent.css ('font-size'));

// autorise les développeurs à exécuter leurs propres fonctionnalités personnalisées
if (e.isDefaultPrevented ()) renvoie;

// incrémente la largeur de l'alerte de 20px à chaque clic
// et la taille de la police de 2px
$ parent.css ({
  width: $ parentWidth + = 20,
  fontSize: $ parentFontSize + = 2
});

Le code ci-dessus est explicite. Le bit qui pourrait être un peu confus est e.isDefaultPrevented () . J'ai trouvé une excellente explication de ce Stack Overflow thread .

La façon dont le code est censé fonctionner est que chaque fois que vous cliquez sur le lien + la boîte d'alerte et son

Le code pour la fonctionnalité de zoom arrière est le même que le code ci-dessus, mais au lieu d'augmenter les valeurs de pixels de largeur et taille de police il le rend plus petit:

 $ parent.css ({
  width: $ parentWidth - = 20,
  fontSize: $ parentFontSize - = 2
});

Ajout d'une fonctionnalité de contraste élevé

La fonction highContrast () suit le même modèle que zoomIn () et zoomOut () mais au lieu d'utiliser styles CSS inline pour modifier dynamiquement l'apparence de l'alerte, il ajoute et supprime la classe high-contrast-on :

 Alert.prototype.highContrast = function (e) {
  if (e) e.preventDefault ();

  const $ this = $ (this);

  const $ parent = $ this.closest ('. alert');

  $ this.trigger (e =
  $ .Event ('highContrast.bs.alert'));

  if (e.isDefaultPrevented ()) renvoie;

  $ parent.toggleClass ('high-contrast-on');
}

Configuration des écouteurs d'événement

La dernière pièce du puzzle consiste à relier les actions à l'élément DOM avec un attribut spécifié . Le fichier Bootstrap alert.js donne quelques indications sur la façon dont vous pourriez le faire.

Dans la section Implémentation de l'API de données, vous trouverez:

 $ (document) .on (
  Event.CLICK_DATA_API,
  Selector.DISMISS,
  Alert._handleDismiss (nouvelle alerte ())
)

Le document écoute un événement click sur n'importe quel élément avec un attribut data-dismiss et sa valeur. En fait, Selector.DISMISS est défini en haut du fichier, ainsi que les paramètres EVENT_KEY et DATA_API_KEY:

 const Selector = {
  DISMISS: '[data-dismiss="alert"]'
}

const DATA_KEY = 'bs.alert'
const EVENT_KEY = `. $ {DATA_KEY}`
const DATA_API_KEY = '.data-api'

Par conséquent, vous pouvez raccorder les méthodes zoomIn () zoomOut () et highContrast () aux éléments DOM avec les données -zoomIn data-zoomOut et data-highContrast attributs comme suit:

 // hook up zoomIn ()
$ (document) .on ('click.bs.alert.data-api', '[data-zoomIn="alert"]', Alert.prototype.zoomIn);

// raccorder zoomOut ()
$ (document) .on ('click.bs.alert.data-api', '[data-zoomOut="alert"]', Alert.prototype.zoomOut);

// accroche highContrast ()
$ (document) .on ('click.bs.alert.data-api', '[data-highContrast="alert"]', Alert.prototype.highContrast);

 Voir le stylo  Personnalisation de l'alerte Bootstrap  par SitePoint ( @SitePoint ) le  CodePen . 

 Conclusion 
 Comme vous pouvez le voir, Bootstrap a rendu pratique l'ajout de personnalisations à tous ses modules, y compris ses composants basés sur JavaScript. 
 Quelle est votre technique de personnalisation pour les plugins Bootstrap jQuery? Faites-moi savoir dans les commentaires! 
      

        

          
            
          
        
        
 Maria Antonietta Perna est co-rédactrice de la chaîne HTML / CSS de SitePoint et d'un développeur web front-end. Elle aime bricoler avec les standards CSS et est curieuse d'enseigner des approches pour le code frontal. Lorsqu'elle ne code pas pour le Web ou qu'elle n'écrit pas pour le Web, elle aime les livres de philosophie, les longues marches et la bonne nourriture.