4. Proyecto [vuejs-02]: uso del framework Bootstrap

El proyecto [vuejs-02] presenta el uso de Bootstrap en un proyecto [vue.js]. Este es el framework CSS que se utilizará en todos nuestros proyectos. Utilizaremos una variante de Bootstrap denominada [BootstrapVue] [https://bootstrap-vue.js.org/].

La estructura del proyecto será la siguiente:

Nota: en lo anterior, la carpeta [vuejs] ha sido renombrada como [cours] [1] en el resto del documento.

4.1. Instalación del marco [BootstrapVue]

[BootstrapVue] es un marco que se añade al proyecto con la herramienta [npm]:

en [1], por lo que se instalan dos frameworks: [Bootstrap] y su variante [BootstrapVue];
en [2], las dos dependencias aparecen en el archivo [package.json];

4.2. El script [main.js]

El script principal [main.js] es el siguiente:


// importaciones
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'

// configuración
Vue.config.productionTip = false

// instanciación del proyecto [App]
new Vue({
  render: h => h(App),
}).$mount('#app')

línea 2: importación del marco [Vue];
línea 3: importación de la vista principal;
línea 6: importación del marco [BootstrapVue];
línea 7: este framework está diseñado como un plugin del framework [Vue]. La línea 7 incluye este plugin en el framework [Vue];
líneas 10-11: importación de los archivos CSS de los marcos [Bootstrap] y [BootstrapVue];
las líneas 5-11 están, por lo tanto, dedicadas íntegramente al uso de [BootstrapVue]. El resto del código es idéntico al que hemos visto en el párrafo anterior;

4.3. El componente [App.vue]


<template>
  <b-container>
    <b-card>
      <!-- Bootstrap Jumbotron -->
      <b-jumbotron>
        <!-- línea -->
        <b-row>
          <!-- columna de 4 de ancho -->
          <b-col cols="4">
            <img src="./assets/logo.jpg" alt="Cerisier en fleurs" />
          </b-col>
          <!-- columna de 8 de ancho -->
          <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>

Comentarios

líneas 1-21: todas las etiquetas <b-xx> son etiquetas del framework [BootstrapVue];
líneas 2, 20: la etiqueta <b-container> define un contenedor Bootstrap. Dentro de este contenedor, podremos definir filas con la etiqueta <b-row> y columnas con la etiqueta <b-col>;
líneas 3, 19: la etiqueta <b-card> define una «tarjeta» Bootstrap. Visualmente, se materializa en un rectángulo con un borde;
líneas 5, 17: la etiqueta <b-jumbotron> permite destacar una parte de la página, en este caso una imagen y un texto. La utilizaremos en nuestros diversos proyectos como identificación visual del proyecto;
línea 7: la etiqueta <b-row> define una fila;
líneas 9-11: la etiqueta <b-col> define una columna de la línea anterior. Bootstrap asigna 12 columnas a cada línea. El atributo [cols=’4’] indica que la columna <b-col> ocupará 4 de esas 12 columnas;
línea 10: una imagen
líneas 13-15: una columna que ocupará 8 de las 12 columnas de la línea. En ella se coloca un texto;
línea 18: uso de un componente denominado [HelloBootstrap] con una propiedad denominada [msg];
líneas 24-33: la parte <script> del componente;
líneas 29-31: se exporta el componente [HelloBootstrap] utilizado en la línea 18. Para que sea reconocido, debe importarse en la línea 25;

El resultado es el siguiente:

en [1], la etiqueta <b-card>;
en [2], la etiqueta <jumbotron>;
en [3], la imagen en 4 columnas;
en [4], el texto en 8 columnas;

4.4. El componente [HelloBootstrap]

[HelloBootstrap] es el siguiente componente:


<template>
  <div>
    <!-- mensaje sobre fondo verde -->
    <b-col cols="12">
      <b-alert show variant="success" align="center">
        <h4>[vuejs-02] : bootstrap</h4>
      </b-alert>
    </b-col>
    <!-- mensaje sobre fondo amarillo -->
    <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>

Comentarios

línea 3: la etiqueta <b-alert show> muestra un rectángulo de color en el que normalmente se coloca un texto (línea 6). El atributo [variant] permite seleccionar un tipo de alerta. Cada tipo de alerta tiene un color de fondo diferente. El color de la variante [success] es el verde. El atributo [align] permite alinear el texto de la alerta (izquierda, derecha, centrado). Cabe señalar que el atributo [show] es obligatorio para mostrar la alerta. Sin este atributo, la alerta no es visible;
los valores posibles de [variant]:
- [primary]: azul;
- [secondary]: gris;
- [success]: verde;
- [danger]: rojo claro;
- [warning]: amarillo;
- [info]: turquesa;
- [light]: sin color de fondo;
- [dark]: gris un poco más oscuro que [secondary];
línea 12: [msg] es un parámetro del componente [HelloBootstrap] (líneas 21-23);

El resultado visual es el siguiente:

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

4.5. Ejecución del proyecto

Para ejecutar el proyecto, primero se modifica el archivo [package.json]:

en [3], se modifica el script ejecutado por el comando [serve] [2] del archivo package.json [1] ;
en [4], se ejecuta el proyecto;

Nota: en todo lo que sigue se utilizarán las etiquetas del framework BootstrapVue, etiquetas del tipo <b-algo>. No es obligatorio. Se pueden utilizar las etiquetas originales del framework Bootstrap. Son funcionales en las plantillas de [Vue.js]. Por lo tanto, el desarrollador acostumbrado a las etiquetas de Bootstrap puede seguir utilizándolas.