4. Projekt [vuejs-02]: wykorzystanie frameworka Bootstrap w projekcie CSS

Projekt [vuejs-02] przedstawia wykorzystanie Bootstrap w projekcie [vue.js]. We wszystkich naszych projektach będzie wykorzystywany framework CSS. Będziemy korzystać z odmiany Bootstrap o nazwie [BootstrapVue] [https://bootstrap-vue.js.org/].

Struktura katalogów projektu będzie wyglądała następująco:

Uwaga: w dalszej części dokumentu folder [vuejs] został przemianowany na [cours] [1].

4.1. Instalacja frameworka [BootstrapVue]

[BootstrapVue] to framework, który dodaje się do projektu za pomocą narzędzia [npm]:

w przypadku [1] instalowane są zatem dwa frameworki: [Bootstrap] oraz jego wariant [BootstrapVue];
w przypadku [2] obie zależności pojawiają się w pliku [package.json];

4.2. Skrypt [main.js]

Główny skrypt [main.js] wygląda następująco:


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

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

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

// konfiguracja
Vue.config.productionTip = false

// instancjonowanie projektu [App]
new Vue({
  render: h => h(App),
}).$mount('#aplikacja')

wiersz 2: import frameworka [Vue];
wiersz 3: import głównego widoku;
wiersz 6: import frameworka [BootstrapVue];
wiersz 7: ten framework został zaprojektowany jako wtyczka do frameworka [Vue]. Wiersz 7 dołącza tę wtyczkę do frameworka [Vue];
wiersze 10–11: import plików CSS z frameworków [Bootstrap] i [BootstrapVue];
wiersze 5–11 są zatem w całości poświęcone wykorzystaniu [BootstrapVue]. Pozostała część kodu jest identyczna z tym, co widzieliśmy w poprzednim akapicie;

4.3. Komponent [App.vue]


<template>
  <b-container>
    <b-card>
      <!-- Jumbotron Bootstrap -->
      <b-jumbotron>
        <!-- wiersz -->
        <b-row>
          <!-- kolumna o szerokości 4 -->
          <b-col cols="4">
            <img src="./assets/logo.jpg" alt="Cerisier en fleurs" />
          </b-col>
          <!-- kolumna o szerokości 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>

Komentarze

wiersze 1–21: wszystkie tagi <b-xx> są tagami frameworka [BootstrapVue];
wiersze 2, 20: tag <b-container> definiuje kontener Bootstrap. Wewnątrz tego kontenera będziemy mogli definiować wiersze za pomocą tagu <b-row> oraz kolumny za pomocą tagu <b-col>;
wiersze 3, 19: tag <b-card> definiuje „kartę” Bootstrap. Wizualnie przedstawia się to jako prostokąt z obramowaniem;
wiersze 5, 17: tag <b-jumbotron> pozwala wyróżnić część strony, w tym przypadku obraz i tekst. Będziemy go używać w naszych różnych projektach jako wizualnego identyfikatora projektu;
wiersz 7: tag <b-row> definiuje wiersz;
wiersze 9–11: tag <b-col> definiuje kolumnę w poprzednim wierszu. Bootstrap przypisuje każdemu wierszowi 12 kolumn. Atrybut [cols=’4’] wskazuje, że kolumna <b-col> zajmie 4 z tych 12 kolumn;
wiersz 10: obrazek
wiersze 13–15: kolumna, która zajmie 8 z 12 kolumn wiersza. Umieszczamy w niej tekst;
wiersz 18: użycie komponentu o nazwie [HelloBootstrap] z właściwością o nazwie [msg];
wiersze 24–33: część <script> komponentu;
wiersze 29–31: komponent [HelloBootstrap] użyty w wierszu 18 jest eksportowany. Aby był rozpoznawalny, należy go zaimportować w wierszu 25;

Wynik jest następujący:

w [1] – tag <b-card>;
w [2] – tag <jumbotron>;
w [3] – obraz w 4 kolumnach;
w [4], tekst w 8 kolumnach;

4.4. Komponent [HelloBootstrap]

[HelloBootstrap] to następujący komponent:


<template>
  <div>
    <!-- komunikat na zielonym tle -->
    <b-col cols="12">
      <b-alert show variant="success" align="center">
        <h4>[vuejs-02] : bootstrap</h4>
      </b-alert>
    </b-col>
    <!-- komunikat na żółtym tle -->
    <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>

Komentarze

wiersz 3: tag <b-alert show> wyświetla kolorowy prostokąt, w którym zazwyczaj umieszcza się tekst (wiersz 6). Atrybut [variant] pozwala wybrać typ alertu. Każdy typ powiadomienia ma inny kolor tła. Kolorem wariantu [success] jest zielony. Atrybut [align] pozwala na wyrównanie tekstu powiadomienia (do lewej, do prawej, do środka). Należy zauważyć, że atrybut [show] jest obowiązkowy do wyświetlenia alertu. Bez tego atrybutu alert nie jest widoczny;
możliwe wartości atrybutu [variant]:
- [primary]: niebieski;
- [secondary]: szary;
- [success]: zielony;
- [danger]: jasnoczerwony;
- [warning]: żółty;
- [info]: turkusowy;
- [light]: brak koloru tła;
- [dark]: szary, nieco ciemniejszy niż [secondary];
wiersz 12: [msg] jest parametrem komponentu [HelloBootstrap] (wiersze 21–23);

Efekt wizualny wygląda następująco:

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

4.5. Uruchomienie projektu

Aby uruchomić projekt, należy najpierw zmodyfikować plik [package.json]:

na [3], modyfikuje się skrypt uruchamiany przez polecenie [serve] [2] z pliku package.json [1] ;
w pliku [4] uruchamia się projekt;

Uwaga: w dalszej części będziemy używać tagów frameworka BootstrapVue, czyli tagów w postaci <b-coś>. Nie jest to jednak obowiązkowe. Można korzystać z oryginalnych tagów frameworka Bootstrap. Działają one w szablonach [Vue.js]. Dlatego programista przyzwyczajony do tagów Bootstrap może nadal z nich korzystać.