Webpack项目中引入Bootstrap4.x

本文详细介绍如何在Webpack项目中引入Bootstrap4.x,避免在每个Vue组件中重复引入。通过在index.html中引入Bootstrap,安装并配置JQuery、Popper和Bootstrap,确保字体图标正常显示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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>

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

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值