4. 项目 [vuejs-02]：使用 Bootstrap 框架

[vuejs-02] 项目展示了在 [vue.js] 项目中使用 Bootstrap 的方法。CSS 框架将应用于我们所有的项目。我们将使用一种名为 [BootstrapVue] [https://bootstrap-vue.js.org/] 的 Bootstrap 变体。

项目目录结构如下：

注：在本文后续内容中，上述文件夹 [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);

// 引导
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行：导入框架[Bootstrap]和[BootstrapVue]中的CSS文件；
因此第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> 列将占用这 12 个列中的 4 个；
第 10 行：一张图片
第13-15行：一个将占用该行12列中8列的列。其中放置一段文本；
第18行：使用了名为[HelloBootstrap]的组件，该组件具有一个名为[msg]的属性；
第24-33行：组件的<script>部分；
第29-31行：第18行使用的组件[HelloBootstrap]被导出。为了使其可用，必须在第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-qqchose> 形式的标签。但这并非强制要求。也可以使用Bootstrap框架的原始标签。这些标签在[Vue.js]的模板中同样有效。因此，习惯使用Bootstrap标签的开发者可以继续使用它们。