4. project [vuejs-02]: gebruik van het Bootstrap-framework CSS

Het project [vuejs-02] toont het gebruik van Bootstrap in een [vue.js]-project. Het is het CSS-framework dat in al onze projecten zal worden gebruikt. We zullen een variant van Bootstrap gebruiken, genaamd [BootstrapVue] [https://bootstrap-vue.js.org/].

De projectstructuur ziet er als volgt uit:

Opmerking: hierboven is de map [vuejs] in de rest van het document hernoemd naar [cours] [1].

4.1. Installatie van het framework [BootstrapVue]

[BootstrapVue] is een framework dat met de tool [npm] aan het project wordt toegevoegd:

in [1] worden dus twee frameworks geïnstalleerd: [Bootstrap] en de variant daarvan, [BootstrapVue];
in [2] verschijnen beide afhankelijkheden in het bestand [package.json];

4.2. Het script [main.js]

Het hoofdscript [main.js] is als volgt:


// imports
import Vue from 'vue'
import App from './App.vue'

// plugins
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

// bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// configuratie
Vue.config.productionTip = false

// projectinstantiëring [App]
new Vue({
  render: h => h(App),
}).$mount('#app')

regel 2: het framework [Vue] wordt geïmporteerd;
regel 3: het hoofdweergavebestand importeren;
regel 6: het framework [BootstrapVue] wordt geïmporteerd;
regel 7: dit framework is ontworpen als een plug-in van het framework [Vue]. Regel 7 neemt deze plug-in op in het framework [Vue];
regels 10-11: importeren van de CSS-bestanden uit de frameworks [Bootstrap] en [BootstrapVue];
de regels 5-11 zijn dus volledig gewijd aan het gebruik van [BootstrapVue]. De rest van de code is identiek aan wat we in de vorige paragraaf hebben gezien;

4.3. De component [App.vue]


<template>
  <b-container>
    <b-card>
      <!-- Bootstrap Jumbotron -->
      <b-jumbotron>
        <!-- regel -->
        <b-row>
          <!-- kolom met breedte 4 -->
          <b-col cols="4">
            <img src="./assets/logo.jpg" alt="Cerisier en fleurs" />
          </b-col>
          <!-- kolom met breedte 8 -->
          <b-col cols="8">
            <h1>Calculez votre impôt</h1>
          </b-col>
        </b-row>
      </b-jumbotron>
      <HelloBootstrap msg="Hello Bootstrap !" />
    </b-card>
  </b-container>
</template>


<script>
  import HelloBootstrap from "./components/HelloBootstrap.vue";

  export default {
    name: "app",
    components: {
      HelloBootstrap
    }
  };
</script>

Opmerkingen

regels 1-21: alle <b-xx>-tags zijn tags van het [BootstrapVue]-framework;
regels 2, 20: de tag <b-container> definieert een Bootstrap-container. Binnen deze container kunnen we rijen definiëren met de tag <b-row> en kolommen met de tag <b-col>;
regels 3, 19: de tag <b-card> definieert een Bootstrap-‘kaart’. Visueel wordt dit weergegeven als een rechthoek met een rand;
regels 5, 17: met de tag <b-jumbotron> kun je een deel van de pagina extra benadrukken, in dit geval een afbeelding en een tekst. We zullen deze tag in onze verschillende projecten gebruiken als visuele herkenning van het project;
regel 7: de tag <b-row> definieert een rij;
regels 9-11: de tag <b-col> definieert een kolom van de vorige rij. Bootstrap wijst aan elke rij 12 kolommen toe. Het attribuut [cols=’4’] geeft aan dat de kolom <b-col> 4 van deze 12 kolommen in beslag neemt;
regel 10: een afbeelding
regels 13-15: een kolom die 8 van de 12 kolommen van de regel in beslag neemt. Hierin wordt tekst geplaatst;
regel 18: gebruik van een component met de naam [HelloBootstrap] met een eigenschap met de naam [msg];
regels 24-33: het gedeelte <script> van de component;
regels 29-31: de component [HelloBootstrap] die in regel 18 wordt gebruikt, wordt geëxporteerd. Om bekend te zijn, moet deze in regel 25 worden geïmporteerd;

Het resultaat is als volgt:

in [1], de tag <b-card>;
in [2], de tag <jumbotron>;
in [3], de afbeelding over 4 kolommen;
in [4], de tekst in 8 kolommen;

4.4. De component [HelloBootstrap]

[HelloBootstrap] is de volgende component:


<template>
  <div>
    <!-- bericht op groene achtergrond -->
    <b-col cols="12">
      <b-alert show variant="success" align="center">
        <h4>[vuejs-02] : bootstrap</h4>
      </b-alert>
    </b-col>
    <!-- bericht op gele achtergrond -->
    <b-col cols="12">
      <b-alert show variant="warning" align="center">
        <h4>{{msg}}</h4>
      </b-alert>
    </b-col>
  </div>
</template>

<script>
  export default {
    name: "HelloBootstrap",
    props: {
      msg: String
    }
  };
</script>

Opmerkingen

regel 3: de tag <b-alert show> geeft een gekleurde rechthoek weer waarin doorgaans tekst wordt geplaatst (regel 6). Met het attribuut [variant] kan een type waarschuwing worden geselecteerd. Elk type melding heeft een andere achtergrondkleur. De kleur van de variant [success] is groen. Met het attribuut [align] kan de tekst van de melding worden uitgelijnd (links, rechts, gecentreerd). Let op: het attribuut [show] is verplicht om de melding weer te geven. Zonder dit attribuut is de melding niet zichtbaar;
mogelijke waarden voor [variant]:
- [primary]: blauw;
- [secondary]: grijs;
- [success]: groen;
- [danger]: lichtrood;
- [warning]: geel;
- [info]: turkoois;
- [light]: geen achtergrondkleur;
- [dark]: grijs, iets donkerder dan [secondary];
regel 12: [msg] is een parameter van de component [HelloBootstrap] (regels 21-23);

Het visuele resultaat is als volgt:

[1]: tag <b-alert show variant=’success’>;
[2]: tag <b-alert show variant=’warning’>;

4.5. Het project uitvoeren

Om het project uit te voeren, wijzigen we eerst het bestand [package.json]:

in [3], wijzig het script dat wordt uitgevoerd door het commando [serve] [2] uit het bestand package.json [1] ;
in [4] wordt het project uitgevoerd;

Opmerking: in hetgeen hierna volgt, worden de tags van het BootstrapVue-framework gebruikt, tags in de vorm <b-iets>. Dit is niet verplicht. Men kan de oorspronkelijke tags van het Bootstrap-framework gebruiken. Deze werken in de sjablonen van [Vue.js]. Ontwikkelaars die gewend zijn aan Bootstrap-tags kunnen deze dus blijven gebruiken.