4. Проєкт [vuejs-02]: використання фреймворку CSS Bootstrap

Проєкт [vuejs-02] демонструє використання Bootstrap у проєкті [vue.js]. У всіх наших проєктах буде використовуватися фреймворк CSS. Ми будемо використовувати модифікацію Bootstrap під назвою [BootstrapVue] [https://bootstrap-vue.js.org/].

Структура проекту буде такою:

Примітка: у подальшому тексті папка [vuejs] була перейменована на [cours] [1].

4.1. Встановлення фреймворку [BootstrapVue]

[BootstrapVue] — це фреймворк, який додається до проєкту за допомогою інструменту [npm]:

у [1], отже, встановлюються два фреймворки: [Bootstrap] та його варіант [BootstrapVue];
у [2] обидві залежності з’являються у файлі [package.json];

4.2. Скрипт [main.js]

Основний скрипт [main.js] має такий вигляд:


// імпорт
import Vue from 'vue'
import App from './App.vue'

// плагіни
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

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

// конфігурація
Vue.config.productionTip = false

// інстанціювання проєкту [App]
new Vue({
  render: h => h(App),
}).$mount('#додаток')

рядок 2: імпорт фреймворку [Vue];
рядок 3: імпорт головного представлення;
рядок 6: імпорт фреймворку [BootstrapVue];
рядок 7: цей фреймворк розроблено як плагін до фреймворку [Vue]. У рядку 7 цей плагін включено до фреймворку [Vue];
рядки 10–11: імпорт файлів CSS із фреймворків [Bootstrap] та [BootstrapVue];
отже, рядки 5–11 повністю присвячені використанню [BootstrapVue]. Решта коду ідентична тому, що ми розглядали в попередньому абзаці;

4.3. Компонент [App.vue]


<template>
  <b-container>
    <b-card>
      <!-- Bootstrap Jumbotron -->
      <b-jumbotron>
        <!-- рядок -->
        <b-row>
          <!-- стовпець шириною 4 -->
          <b-col cols="4">
            <img src="./assets/logo.jpg" alt="Cerisier en fleurs" />
          </b-col>
          <!-- стовпець шириною 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>

Коментарі

рядки 1–21: усі теги <b-xx> є тегами фреймворку [BootstrapVue];
рядки 2, 20: тег <b-container> визначає контейнер Bootstrap. Усередині цього контейнера ми зможемо визначати рядки за допомогою тегу <b-row> та стовпці за допомогою тегу <b-col>;
рядки 3, 19: тег <b-card> визначає «карту» Bootstrap. Візуально це виглядає як прямокутник з рамкою;
рядки 5, 17: тег <b-jumbotron> дозволяє виділити частину сторінки, у даному випадку зображення та текст. Ми будемо використовувати його в наших різних проєктах як візуальну ідентифікацію проєкту;
рядок 7: тег <b-row> визначає рядок;
рядки 9–11: тег <b-col> визначає стовпець попереднього рядка. Bootstrap виділяє 12 стовпців для кожного рядка. Атрибут [cols=’4’] вказує, що стовпець <b-col> займатиме 4 з цих 12 стовпців;
рядок 10: зображення
рядки 13–15: стовпець, який займатиме 8 із 12 стовпців рядка. У нього вставляється текст;
рядок 18: використання компонента з назвою [HelloBootstrap] із властивістю [msg];
рядки 24–33: частина <script> компонента;
рядки 29–31: компонент [HelloBootstrap], який використовується в рядку 18, експортується. Щоб він став доступним, його потрібно імпортувати в рядку 25;

Результат такий:

у [1] — тег <b-card>;
в [2] — тег <jumbotron>;
в [3] — зображення у 4 стовпцях;
у [4] — текст у 8 стовпців;

4.4. Компонент [HelloBootstrap]

[HelloBootstrap] — це такий компонент:


<template>
  <div>
    <!-- повідомлення на зеленому тлі -->
    <b-col cols="12">
      <b-alert show variant="success" align="center">
        <h4>[vuejs-02] : bootstrap</h4>
      </b-alert>
    </b-col>
    <!-- повідомлення на жовтому тлі -->
    <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>

Коментарі

рядок 3: тег <b-alert show> відображає кольоровий прямокутник, у який зазвичай вставляють текст (рядок 6). Атрибут [variant] дозволяє вибрати тип сповіщення. Кожен тип сповіщення має свій колір фону. Колір варіанту [success] — зелений. Атрибут [align] дозволяє вирівняти текст сповіщення (ліворуч, праворуч, по центру). Слід зауважити, що атрибут [show] є обов’язковим для відображення сповіщення. Без цього атрибута сповіщення не відображається;
можливі значення [variant]:
- [primary]: синій;
- [secondary]: сірий;
- [success]: зелений;
- [danger]: світло-червоний;
- [warning]: жовтий;
- [info]: бірюзовий;
- [light]: без фонового кольору;
- [dark]: сірий, трохи темніший за [secondary];
рядок 12: [msg] є параметром компонента [HelloBootstrap] (рядки 21–23);

Візуальний результат виглядає так:

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

4.5. Виконання проєкту

Щоб запустити проект, спочатку потрібно змінити файл [package.json]:

на [3], змінюємо скрипт, що виконується командою [serve] [2] з файлу package.json [1] ;
у [4] виконується проект;

Примітка: у всьому, що йде далі, ми будемо використовувати теги фреймворку BootstrapVue, а саме теги у формі <b-щось>. Це не є обов’язковим. Можна використовувати оригінальні теги фреймворку Bootstrap. Вони працюють у шаблонах [Vue.js]. Тому розробник, який звик до тегів Bootstrap, може продовжувати їх використовувати.