Comment utiliser Bootstrap avec Vue.js?

Utilisez Bootstrap 5 car il est sans jQuery et compatible avec Vue; 2. Installez Bootstrap via NPM et importez son CSS dans votre fichier principal pour le style; 3. Appliquer des classes bootstrap directement dans des modèles Vue pour la mise en page et la conception; 4. Utilisez éventuellement Bootstrap-Vue-3 pour Vue 3 pour accéder aux composants Vue natifs comme <b-modal> et assurer la réactivité; 5. Initialisez manuellement les composants JavaScript comme les info-bulleurs à l'aide des refs et des crochets de cycle de vie pour s'aligner avec la réactivité de Vue; 6. Personnaliser le bootstrap avec SASS en remplaçant les variables dans un fichier SCSS personnalisé pour un thème cohérent. Cette approche assure l'intégration transparente de l'interface utilisateur de bootstrap avec le système de composants de Vue tout en maintenant la réactivité et en évitant les conflits DOM.

L'utilisation de bootstrap avec Vue.js vous permet de combiner les composants réactifs de Vue avec les styles d'interface utilisateur et le système de mise en page de bootstrap. Voici comment le faire correctement en fonction de vos besoins et de votre configuration.

✅ 1. Choisissez la bonne version de bootstrap

Bootstrap 5 est recommandé (à partir de 2024) car il ne dépend pas de jQuery , qui est incompatible avec Vue. Évitez le bootstrap 4 si possible, car il s'appuie sur jQuery pour les composants JavaScript.

✅ 2. Installez le bootstrap via NPM (recommandé pour les projets VUE)

Si vous utilisez Vue CLI, VITE ou toute configuration de construction moderne:

 NPM Installer Bootstrap Bootstrap-Icons

Remarque: bootstrap-icons est facultatif si vous voulez des icônes officielles.

Ensuite, importez Bootstrap CSS dans votre fichier JavaScript / TypeScript principal (par exemple, main.js ou main.ts ):

 Importer 'bootstrap / dist / css / bootstrap.css'
// Facultatif: si vous souhaitez utiliser les composants JavaScript de Bootstrap (modaux, listes déroutes, etc.)
Importer «bootstrap»

⚠️ N'utilisez pas bootstrap.min.css à moins que vous ayez une raison spécifique - le .css régulier fonctionne bien avec les bundlers.

✅ 3. Utilisez des cours de bootstrap dans vos composants Vue

Vous pouvez maintenant utiliser des classes bootstrap directement dans vos modèles Vue:

 <mpelate>
  <div class = "conteneur mt-4">
    <bouton class = "btn btn-primary" @ click = "showModal = true">
      Modal ouvert
    </ bouton>

    <! - bootstrap modal (structure de base) ->
    <div v-if = "showmodal" class = "modal fade show" style = "affiche: bloc;">
      <div class = "modal-dialog">
        <div class = "modal-content">
          <div class = "modal-header">
            <h5 class = "modal-title"> Bonjour de bootstrap </h5>
            <bouton type = "Button" class = "btn-close" @ click = "showModal = false"> </ bouton>
          </div>
          <div class = "modal-body">
            <p> Il s&#39;agit d&#39;un modal propulsé par Vue et Bootstrap. </p>
          </div>
          <div class = "Modal-Footer">
            <Button class = "btn btn-secondary" @ click = "showModal = false"> Close </utton>
          </div>
        </div>
      </div>
    </div>
  </div>
</ template>

<cript>
Exporter par défaut {
  données() {
    retour {
      Showmodal: faux
    }
  }
}
</cript>

? CONSEIL: Pour les modaux, les info-bulleurs et les popovers, envisagez d'utiliser des emballages Bootstrap-vue ou Vue personnalisés , car la gestion de show hide de la manipulation DOM VIA via la manipulation de DOM brise la réactivité de Vue.

✅ 4. (Facultatif) Utilisez Bootstrap-Vue (pour Vue 2) ou Bootstrap-Vue-3 (pour Vue 3)

Si vous voulez de vraies composants Vue (comme <b-modal> , <b-button> , etc.), utilisez une bibliothèque de wrapper.

Pour Vue 3:

Installez Bootstrap-Vue-3:

 NPM Installer Bootstrap-Vue-3

Puis dans main.js :

 import {createApp} depuis 'vue'
Importer l'application à partir de './app.vue'
Importer Bootstrapvue3 à partir de «bootstrap-vue-3»
Importer 'bootstrap / dist / css / bootstrap.css'
import 'bootstrap-vue-3 / dist / bootstrap-vue-3.css'

const app = createApp (app)
app.use (bootstrapvue3)
app.mount (app)

Utilisez maintenant des composants comme:

 <mpelate>
  <B-Container Class = "MT-4">
    <b-button variant = "primaire" @ click = "show = true"> ouvrir modal </b-button>
    <b-modal V-model = "show" title = "Vue bootstrap"> Bonjour! </b-modal>
  </b-contrainer>
</ template>

<cript>
Exporter par défaut {
  données() {
    return {show: false}
  }
}
</cript>

✅ Cette approche intègre des composants bootstrap dans le système de réactivité de Vue.

✅ 5. Gestion des composants JavaScript (popovers, info-bullets, modaux)

Les composants JS de Bootstrap reposent sur la manipulation DOM. Pour les utiliser en toute sécurité dans Vue:

• Initialisez-les après que l'élément est rendu à l'aide de $nextTick ou ref .
• Détruisez-les lorsqu'il n'est pas nécessaire.

Exemple avec une info-bulle:

 <mpelate>
  <Button ref = "tooltipbtn" class = "btn btn-sucre" data-bs-toggle = "tooltip" title = "je suis un info">
    Planer moi
  </ bouton>
</ template>

<cript>
import {ref, onmounted} depuis &#39;vue&#39;
import {tooltp} à partir de &#39;bootstrap&#39;

Exporter par défaut {
  installation() {
    const fooltipbtn = ref (null)

    onMounted (() => {
      if (tooltipbtn.value) {
        Nouvelle info-bulle (ToolTipBtn.Value)
      }
    })

    return {ToolTipBtn}
  }
}
</cript>

✅ 6. Personnaliser le bootstrap (facultatif)

Vous pouvez personnaliser Bootstrap (couleurs, polices, etc.) en important Sass à la place:

1. Installer SASS:

 NPM Installer Sass

2. Créez un assets/scss/custom.scss :

 // remplace les variables
$ primaire: # ff6b35;
$ ACTIVE RESTIND: FAUX;

// Importer un bootstrap
@IMPORT "Bootstrap / SCSS / Bootstrap";

3. Importez ce fichier dans votre application:

 import './assets/scss/custom.scss'

Maintenant, vos styles sont à thème!

Résumé

Fondamentalement, importez simplement le CSS, éventuellement le JS, et commencez à utiliser des classes. Pour les composants interactifs, utilisez des bibliothèques wrapper ou initialisez manuellement le bootstrap JS avec des crochets de cycle de vie Vue.

Pas compliqué - mais facile à abuser si vous mélangez la manipulation DOM avec la réactivité de Vue.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!