如何将 MDBootstrap 5 PRO 上传到我的站点？

Question

我正在尝试上传软件包，有点像通过 CDN 安装，但我是一个粉丝，对此了解不多。在网站上有关于如何通过 NPM 安装包的教程，但我不知道它是什么或它是如何工作的。我正在寻找更简单的解决方案，但我不了解如何加载 MDB 5 Pro 库。

我现在做的是：

我上传了 MD5 Pro 包到我的 wordpress 站点目录
我通过 CDN 复制并粘贴了示例安装链接
我创建了一个简单的 select 来查看 MDB 是否有效

我做错了什么？

Fiddle: https://jsfiddle.net/snake93/9dger1b0/12/

<link href="https://motustrength.it/MDBootstrap-5-pro/css/mdb.min.css" rel="stylesheet">
<script type="text/javascript" src="https://motustrength.it/MDBootstrap-5-pro/js/mdb.min.js"></script>

 <select class="mdb-select md-form" searchable="Search here..">
  <option value="" disabled selected>Choose your car</option>
  <option value="2" data-secondary-text="Production year: 2012">Volkswagen Passat</option>
  <option value="3" data-secondary-text="Production year: 2017">Subaru Legacy</option>
  <option value="3" data-secondary-text="Production year: 2015">Hyundai Elantra</option>
  <option value="3" data-secondary-text="Production year: 2019">Honda Civic</option>
  <option value="3" data-secondary-text="Production year: 2016">Audi A6</option>
</select>

// Material Select Initialization
$(document).ready(function() {
$('.mdb-select').materialSelect();
});

Answer 1

您需要在 MDB 和其他脚本之前导入 jQuery。因此，将此添加到您的 HTML 代码中。

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

最终代码如下所示。

<link href="https://motustrength.it/MDBootstrap-5-pro/css/mdb.min.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<script type="text/javascript" src="https://motustrength.it/MDBootstrap-5-pro/js/mdb.min.js"></script>

 <select class="mdb-select md-form" searchable="Search here..">
  <option value="" disabled selected>Choose your car</option>
  <option value="2" data-secondary-text="Production year: 2012">Volkswagen Passat</option>
  <option value="3" data-secondary-text="Production year: 2017">Subaru Legacy</option>
  <option value="3" data-secondary-text="Production year: 2015">Hyundai Elantra</option>
  <option value="3" data-secondary-text="Production year: 2019">Honda Civic</option>
  <option value="3" data-secondary-text="Production year: 2016">Audi A6</option>
</select>

Answer 2

我自己做的。我意识到必须在 MDB Js 之前插入 Html 代码。另外，我为 select 使用了错误的 class，我很困惑，我使用的是 MDB 4 的 select class.

https://jsfiddle.net/snake93/9dger1b0/32/

<!-- MDB icon -->
<link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" />
    
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" />
    
<!-- Google Fonts Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" />
    
<!-- MDB CSS-->
<link rel="stylesheet" href="https://motustrength.it/MDB5-Pro/css/mdb.min.css" />

<!--your code here-->
  <select class="select" data-mdb-option-height="44">
            <option value="1" data-mdb-secondary-text="Secondary text">One</option>
            <option value="2" data-mdb-secondary-text="Secondary text">Two</option>
            <option value="3" data-mdb-secondary-text="Secondary text">Three</option>
            <option value="4" data-mdb-secondary-text="Secondary text">Four</option>
            <option value="5" data-mdb-secondary-text="Secondary text">Five</option>
          </select>

<!-- MDB JS-->
<script type="text/javascript" src="https://motustrength.it/MDB5-Pro/js/mdb.min.js"></script>

如何将 MDBootstrap 5 PRO 上传到我的站点？

How can I upload MDBootstrap 5 PRO to my site?

javascript

html

css

cdn

mdbootstrap