bootstrapselect使用 Bootstrap's dropdowns require Popper.js

最新推荐文章于 2022-07-13 10:38:44 发布

原创最新推荐文章于 2022-07-13 10:38:44 发布 · 880 阅读

0 ·

CC 4.0 BY-SA版权

bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一款Bootstrap生态链的插件——bootstrapselect，详细阐述了其使用前的依赖关系及正确的引用顺序，强调了引入popper.js的重要性。

虽然我目前喜欢用vue，但是有一些项目会用bootstrap进行配合。

下面介绍一款bootstrap生态链的插件：bootstrapselect。

官网地址：https://www.bootstrapselect.cn/

特别要注意一点，引入bootstrapselect前要先引入popper.js。

由于bootstrap本身代码也有依赖popper.js的地方。所以popper.js位置需要放在jquery和bootstrap之间。

话不多说，参考引用顺序如下：

  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/popper.js/1.15.0/umd/popper.js"></script>
  <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap-grid.min.css" rel="stylesheet">
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>
  <link href="./static/bootstrap/darkly.bootstrap.min.css" rel="stylesheet">