Bootstrap是一个简洁、直观、强悍的前端开发框架，在Web开发中使用频率很高，本文主要记录一下如何在 webpack项目中引入Bootstrap4.x。

由于Bootstrap在各个Vue组件中经常会被用到，为了避免在每一个组件中重复引入，本文将直接在index.html 中引入Bootstrap。

文件下载

npm install jquery --save // Bootstrap4.x 依赖JQuery，所以需要先安装JQuery
npm install popper.js --save // Bootstrap4.x 依赖Popper，所以需要先安装Popper
npm install bootstrap --save // 安装Bootstrap4.x

安装完成后，按照下图所示，将项目node_modules 文件夹下的如下几个文件拷贝到项目static目录下的相应文件夹中。

  • \node_modules\jquery\dist\jquery.min.js
  • \node_modules\popper.js\dist\umd\popper.min.js
  • \node_modules\bootstrap\dist\js\bootstrap.min.js
  • \node_modules\bootstrap\dist\css\bootstrap.min.css

注意：需要复制 umd 文件夹下的 popper.js 文件，否则使用时有可能会报错 Uncaught SyntaxError: Unexpected token export popper.js 。

为了能够使用Bootstrap的Font Awesome字体图标，从官网下载所需文件，将解压获得的 font-awesome.min.css 和整个 font 文件夹一同拷贝到 static目录的图示位置。

  • \Font-Awesome-3.2.1\css\font-awesome.min.css
  • \Font-Awesome-3.2.1\font\*

修改index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <!--  引入Bootstrap样式文件  -->
  <link type="text/css" rel="stylesheet" href="./static/css/bootstrap.min.css" />
  <!--  引入Font Awesome字体样式文件  -->
  <link type="text/css" rel="stylesheet" href="./static/css/font-awesome.min.css" />

  <title>webpack-demo</title>
</head>

<body>
  <div id="app"></div>
  <!--  注意JS文件引入顺序，JQuery==>Popper==>Bootstrap  -->
  <script type="text/javascript" src="./static/js/jquery.min.js"></script>
  <script type="text/javascript" src="./static/js/popper.min.js"></script>
  <script type="text/javascript" src="./static/js/bootstrap.min.js"></script>
</body>

</html>

使用Bootstrap

创建一个示例组件测试一下，组件模板如下：

<template>
  <div class="hello">
    <button type="button" class="btn btn-warning">
      <i class="icon-home"></i>Home
    </button>
  </div>
</template>

浏览器端效果如下图所示，按钮样式和图标样式均能正常使用：

 

 

 

# bootstrap # webpack
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue