4. Projeto [vuejs-02]: Utilização da estrutura CSS Bootstrap

O projeto [vuejs-02] demonstra a utilização do Bootstrap num projeto [Vue.js]. Esta é a estrutura CSS que será utilizada em todos os nossos projetos. Iremos utilizar uma variação do Bootstrap chamada [BootstrapVue] [https://bootstrap-vue.js.org/].

A estrutura de diretórios do projeto será a seguinte:

Nota: No documento abaixo, a pasta [vuejs] foi renomeada para [cours] [1].

4.1. Instalação da estrutura [BootstrapVue]

O [BootstrapVue] é um framework que adicionamos ao projeto utilizando a ferramenta [npm]:

Em [1], estamos, portanto, a instalar duas frameworks: [Bootstrap] e a sua variante [BootstrapVue];
em [2], ambas as dependências aparecem no ficheiro [package.json];

4.2. O script [main.js]

O script principal [main.js] é o seguinte:


// 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'
 
// configuration
Vue.config.productionTip = false
 
// instanciation projet [App]
new Vue({
  render: h => h(App),
}).$mount('#app')

linha 2: importar o framework [Vue];
linha 3: importar a vista principal;
linha 6: importar o framework [BootstrapVue];
linha 7: este framework foi concebido como um plugin para o framework [Vue]. A linha 7 inclui este plugin no framework [Vue];
linhas 10–11: importar os ficheiros CSS das estruturas [Bootstrap] e [BootstrapVue];
As linhas 5–11 são, portanto, inteiramente dedicadas à utilização do [BootstrapVue]. O resto do código é idêntico ao que vimos no parágrafo anterior;

4.3. O componente [App.vue]


<template>
  <b-container>
    <b-card>
      <!-- Bootstrap Jumbotron -->
      <b-jumbotron>
        <!-- ligne -->
        <b-row>
          <!-- colonne de largeur 4 -->
          <b-col cols="4">
            <img src="./assets/logo.jpg" alt="Cerisier en fleurs" />
          </b-col>
          <!-- colonne de largeur 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>

Comentários

linhas 1–21: todas as tags <b-xx> são tags do framework [BootstrapVue];
linhas 2, 20: a tag <b-container> define um contentor Bootstrap. Dentro deste contentor, podemos definir linhas usando a tag <b-row> e colunas usando a tag <b-col>;
linhas 3, 19: a tag <b-card> define um «cartão» Bootstrap. Visualmente, este aparece como um retângulo com uma borda;
linhas 5, 17: a tag <b-jumbotron> permite destacar uma secção da página, neste caso uma imagem e algum texto. Iremos utilizá-la nos nossos vários projetos como um identificador visual do projeto;
linha 7: a tag <b-row> define uma linha;
linhas 9–11: a tag <b-col> define uma coluna na linha anterior. O Bootstrap atribui 12 colunas a cada linha. O atributo [cols=’4’] indica que a coluna <b-col> ocupará 4 dessas 12 colunas;
Linha 10: uma imagem
linhas 13–15: uma coluna que ocupará 8 das 12 colunas da linha. Colocamos algum texto ali;
linha 18: utilização de um componente chamado [HelloBootstrap] com uma propriedade denominada [msg];
linhas 24–33: a parte <script> do componente;
linhas 29–31: o componente [HelloBootstrap] utilizado na linha 18 é exportado. Para ser reconhecido, deve ser importado na linha 25;

O resultado é o seguinte:

em [1], a tag <b-card>;
em [2], a tag <jumbotron>;
em [3], a imagem de 4 colunas;
em [4], o texto de 8 colunas;

4.4. O [HelloBootstrap]

[HelloBootstrap] é o seguinte componente:


<template>
  <div>
    <!-- message on green background -->
    <b-col cols="12">
      <b-alert show variant="success" align="center">
        <h4>[vuejs-02] : bootstrap</h4>
      </b-alert>
    </b-col>
    <!-- message on yellow background -->
    <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>

Comentários

linha 3: a tag <b-alert show> exibe um retângulo colorido que normalmente contém texto (linha 6). O atributo [variant] permite selecionar um tipo de alerta. Cada tipo de alerta tem uma cor de fundo diferente. A cor da variante [success] é verde. O atributo [align] permite alinhar o texto do alerta (à esquerda, à direita ou centralizado). Note que o atributo [show] é obrigatório para exibir o alerta. Sem este atributo, o alerta não é visível;
Valores possíveis para [variant]:
- [primary]: azul;
- [secondary]: cinzento;
- [success]: verde;
- [danger]: vermelho claro;
- [aviso]: amarelo;
- [informação]: turquesa;
- [light]: sem cor de fundo;
- [dark]: cinzento ligeiramente mais escuro do que [secondary];
linha 12: [msg] é um parâmetro do componente [HelloBootstrap] (linhas 21–23);

O resultado visual é o seguinte:

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

4.5. Executar o projeto

Para executar o projeto, modifique primeiro o ficheiro [package.json]:

em [3], modifique o script executado pelo comando [serve] [2] no ficheiro package.json [1];
em [4], execute o projeto;

Nota: A seguir, utilizaremos as tags do framework BootstrapVue, que têm o formato <b-algo>. Isto não é obrigatório. Pode utilizar as tags originais do framework Bootstrap. Elas funcionam em modelos [Vue.js]. Portanto, os programadores habituados às tags do Bootstrap podem continuar a utilizá-las.