第一步:安装 jQuery、 Bootstrap、popper.js依赖。 其中popper.js 用于在 Bootstrap 中显示弹窗、提示、下拉菜单,所以需要引入。 npm install jquery bootstrap@3 popper.js --save 注意:上面的 bootstrap@3 指的是安装 Bootstrap 第三版,如果不加 @3 符号,默认安装第四版 这里的配置含义是创建 '$'、'jQuery'、'window.jQuery' 三个变量指向 jquery 依赖,创建 'Popper' 变量指向 popper.js 依赖。 jQuery: 'jquery', 'window.jQuery': 'jquery', Popper: ['popper.js
提示我们 jquery 以及 popper.js 找不到,并,让我们进行安装 那么,安装好了 npm install --save jquery popper.js 这样就引入了 bootstrap 样式
cdn.bootcss.com/twitter-bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/<em>popper.js</em> /1.12.5/umd/<em>popper.js</em>"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/4.1.0/js/bootstrap.min.js
BootStrap 引用文件 在引用文件中出现了popper.js <! -- popper.min.js 用于弹窗、提示、下拉菜单 --> <script src="https://cdn.bootcss.com/<em>popper.js</em>/1.12.5/umd/popper.min.js
getting-started/download/ 下载并解压js和css两个文件夹到新建目录c:/mysite/static/bootsrap/下 因为bootstrap.js依赖 jquery.js 和 popper.js 附上官网下载链接(进入下载页面,复制粘贴代码到新文件即可): jquery.js: https://jquery.com/download/ popper.js: https://popper.js.org
cdn.bootcss.com/twitter-bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/<em>popper.js</em> /1.12.5/umd/<em>popper.js</em>"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/4.1.0/js/bootstrap.min.js
--jQuery first, then Popper.js, then Bootstrap JS --> 38. <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/<em>popper.js</em>/1.14.3/umd/popper.min.js"integrity="sha384 --jQuery first, then <em>Popper.js</em>, then Bootstrap JS --> 46. <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"integrity="sha384
OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> 或者下载 https://getbootstrap.com/ popper.js /js/popper.js"></script> <script src=".. /js/<em>popper.js</em>"></script> <script src="..
--jQuery first, then Popper.js, then Bootstrap JS --> 38. <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/<em>popper.js</em>/1.14.3/umd/popper.min.js"integrity="sha384 --jQuery first, then <em>Popper.js</em>, then Bootstrap JS --> 46. <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"integrity="sha384
例如, jQuery、Popper.js 以及JavaScript插件。 官方网页模板如下 <!doctype html> <html lang="en"> <head> <! -- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://cdn.bootcss.com/jquery Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdn.bootcss.com/<em>popper.js</em> /js/bootstrap.min.js"></script> </body> </html> 注意 Bootstrap 4中,没有 Popper.js文件 但是 bootstrap.bundle.js
-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://cdn.bootcss.com/jquery node.js 的 npm 命令来下载,打开终端,进入项目的根目录: npm init -y npm install bootstrap npm install jquery npm install <em>popper.js</em> -- jQuery first, then <em>Popper.js</em>, then Bootstrap JS --> <script src="node_modules/jquery/dist/jquery.slim.min.js "></script> <script src="node_modules/<em>popper.js</em>/dist/popper.min.js"></script> <script src="node_modules "></script> <script src="node_modules/<em>popper.js</em>/dist/popper.min.js"></script> <script src="node_modules
可以看到,安装完成后,npm 提示我们 bootstrap 依赖于 jquery 和 popper.js,所以这里我们手动添加上这两个依赖的组件。 "devDependencies": {}, "dependencies": { "bootstrap": "^4.3.1", "jquery": "^3.4.1", "popper.js +AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==" }, "popper.js ": { "version": "1.14.7", "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.7 /node_modules/popper.js/dist/**/*.*" }, { name: "bootstrap", dist: ".
下载与使用 bootbox的所有版本都是在Bootstrap和jQuery的基础之上的,因此bootstrap,jQuery和bootbox的版本要对应 如果您使用的是Bootstrap 4,则还必须包含Popper.js 如果您愿意,Bootstrap当前还会在预编译版本中包含bootstrap.bundle.min.js文件,该文件将Popper.js与bootstrap.js源文件结合在一起。
></script> <script type="text/javascript" src="asserts/js/popper.min.js" th:src="@{/webjars/<em>popper.js</em> /1.11.1/dist/<em>popper.js</em>}"></script> <script type="text/javascript" src="asserts/js/bootstrap.min.js ></script> <script type="text/javascript" src="asserts/js/popper.min.js" th:src="@{/webjars/<em>popper.js</em> /1.11.1/dist/<em>popper.js</em>}"></script> <script type="text/javascript" src="asserts/js/bootstrap.min.js /1.11.1/dist/<em>popper.js</em>}"></script> <script type="text/javascript" src="asserts/js/bootstrap.min.js" th
jQuery,怕你原本就下载了引起冲突,也不会在dependencies里面安装jQuery而是: "peerDependencies": { "jquery": "1.9.1 - 3", "popper.js node_modules/_bootstrap@4.4.1@bootstrap/dist/js/bootstrap.js Module not found: Error: Can't resolve 'popper.js
bootstrap4不支持 nodejs安装bootstrap npm install bootstrap(使用的时候需要css) npm install jquery npm install popper.js
body' }) ] } 额外组件: bootstrap、jquery、moment bootstrap 、 jquery 、 moment 是前端页面用到的,然后 bootstrap 还依赖 popper.js 先安装依赖: npm install bootstrap jquery moment popper.js --save 接下来就比较特殊了,因为 webpack 走的是和 node.js 一样的模块隔离
></script> <script type="text/javascript" src="asserts/js/popper.min.js" th:src="@{/webjars/<em>popper.js</em> /1.11.1/dist/<em>popper.js</em>}"></script> <script type="text/javascript" src="asserts/js/bootstrap.min.js
jQuery: "jquery", "windows.jQuery": "jquery", // 添加plugins Popper: ['popper.js
自定义组件名称) demo3(自定义组件传参) demo4(子父组件传参) demo4(slot插槽使用) ---- bootstrap CSS样式引入 npm i jquery bootstrap@4.6 popper.js , jQuery: 'jquery', 'window.jQuery': 'jquery', // 引入popper.js Popper: ['popper.js', 'default'] }) ] } } 增删查demo 包含技术点: 源码