一、引入bootstrap

Bootstrap是一个开源的前端框架，提供了一套用于构建网站和应用程序的CSS和JavaScript组件，包括按钮、导航栏、表格、表单等，能够使网页开发更加简单、快速，并且能够在不同的设备上保持一致的外观和风格。

1.项目准备

1.1通过 HBuilderX 创建项目

通过 HBuilderX 新建一个uniapp项目，vue版本选择2.0或3.0即可。

2. bootstrap文件准备

准备以下几个文件 bootstrap的文件

bootstrap.min.css

bootstrap.min.js

2.1 bootstrap.min.css、bootstrap.min.js文件下载

下载：从官方网站下载最新版的Bootstrap，然后将其复制到项目中，或者使用CDN的链接引入。这里是通过官网下载进行使用。

（注意：使用该方法引入bootstrap建议通过官方网站下载bootstrap的css,js文件,其他途径下载的css,js文件在导入uniapp项目后,css的样式文件有所不同，可能会影响页面显示效果，导致整体样式发生改变 ）

bootstrap4 官网：v4.bootcss.com/

下载Bootstrap:选择下载Bootstrap生成文件进行下载。

下载好后可以看到这些文件夹：

复制里面的bootstrap.min.css、bootstrap.min.js文件。

2.2 bootstrap-vue.min.css、bootstrap-vue.min.js

打开项目终端，执行：

npm i vue bootstrap-vue bootstrap

2.3 bootstrap文件放入uniapp项目

在uniapp项目的根目录下，新建文件夹common,在common下分别新建文件夹js,css。将准备好的bootstrap.min.css、bootstrap.min.js分别放入js,css。

同时还要将bootstrap.min.css放入static下的css文件夹：（如没有，则新建一个css文件夹即可）

3.全局引入-修改main.js

打开main.js文件，在顶部添加引入bootstrap.min.css、bootstrap.min.js，如下所示：

import '@/common/js/bootstrap.min.js';
import '@/common/css/bootstrap.min.css';

4.运行测试

        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-secondary">Secondary</button>
        <button type="button" class="btn btn-danger">Danger</button>

结果：（成功显示）

5. 还有另外一种更简单的方法

在项目安装npm的情况下，直接使用npm安装模块

1.打开uniapp项目终端，执行命令：

npm install bootstrap --save
或
npm install bootstrap@4 --save
/*这里@4是指定安装的版本是4.x版本, 不写的话，则默认安装最新版本*/

如下：

1. 打开main.js文件，在顶部添加引入bootstrap的代码，如下所示：

import App from './App'

// #ifndef VUE3
import Vue from 'vue'

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';

成功引入。

二、引入bootstrap-vue

BootstrapVue 是基于 Bootstrap v4 + Vue.js 的前端组件库。它是流行的 Bootstrap 框架与 Vue.js 的集成，提供了一套可以直接在Vue.js项目中使用的Bootstrap组件，能够更方便地在Vue.js项目中使用和定制Bootstrap的样式和功能。

1.BootstrapVue的安装

结合vue，bootstrap-vue的安装可直接使用npm安装。

npm install bootstra-vue bootstrap

2.在项目引入BootstrapVue

npm安装完成后，还需在项目中引入BootstrapVue的CSS和JavaScript文件。打开main.js文件，添加以下代码：（bootstra-vue的引入方式与bootstrap的引入方式类似，代码稍有不同）

import { BootstrapVue} from 'bootstrap-vue'

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

Vue.use(BootstrapVue)

如下：

导入成功。

3.运行测试

<template>
    <div class="content">
        <b-button>Button</b-button>
    </div>
</template>

结果：（成功显示）

三、bootstrap和bootstrap-vue的使用

1.Bootstrap的组成

基本结构

栅格系统，Bootstrap提供了一个栅格系统的基本结构，可以快速创建自适应网页布局。通过一系列的行(row)和列(column)，将网页分成等宽的12列，

每行最多12列，超出12列时，会另起一行，行样式使用.row,列样式使用.col,对行和列进行自由组合和排序，从而形成想要的页面布局。

CSS样式

Bootstrap自带了全局的CSS样式和类，可以用来调整不同组件的样式。如，通过'--primary-color'、'--success-color'、'--warning-color'等定义主题颜色，可以定义按钮、标签等的颜色；

通过'--border-width'、'--border-radius'定义边框和圆角变量，通过'--spacing-base'、'--spacing-sm'、'--spacing-lg'定义间距变量等等。同时，Bootstrap还提供了许多类，

可以通过'btn'定义按钮，'nav'、'navbar'定义导航和导航条，'dropdown'定义下拉框等等许多可以用于添加样式和功能的类。

布局组件

Bootstrap提供了丰富的组件库，可以快速应用页面开发，如卡片、下拉菜单、表单等。

jQuery 插件

Bootstrap包含很多实用性的jquery插件，如模态框、折叠、轮播等插件。

2.BootstapVue的组成

BootstrapVue 是由Bootstrap框架和Vue.js集成的一个组件库，提供了丰富的组件库和样式库。常用的基础组件有：

布局组件

b-container：用于创建包含网格布局的容器。

b-row：用于创建网格系统的行。

b-col：用于创建网格系统中的列。

常用组件

b-button：用于创建按钮。

b-card：用于创建卡片。

b-form-input：用于创建表单中的输入框。

b-table：用于创建表格。

导航组件

b-navbar：用于创建导航栏。

b-nav：用于创建导航项。

b-nav-item：用于创建导航项。

弹窗组件

b-modal：用于创建模态框弹窗。

b-toast：用于创建提示框弹窗。

表单组件

b-form：用于创建表单。

b-form-group：用于创建表单组。

b-form-input：用于创建文本输入框。

b-form-select：用于创建下拉选择框。

以上简单列举了部分常用的组件，还有很多其他组件可以用来快速构建前端。BootstrapVue的大部分组件与Bootstrap的组件相同，在使用时，两者的标签有所区别，BootstrapVue的标签需要加上前缀b-,如b-botton、b-form、b-nav等。此外，Bootstrap官网和Bootstrap-Vue官网都提供了丰富的文档和示例，可以参考它们的官方文档更详细了解其使用方法。

1.bootstrap4 官网：v4.bootcss.com/

2.bootstrapvue官网：code.z01.com/bootstrap-v…