javascript - 如何将 MDBootstrap 5 PRO 上传到我的网站?
问题描述
我正在尝试上传包,有点像通过 CDN 安装,但我是粉丝,对此没有太多了解。在网站上有关于如何通过 NPM 安装包的教程,但我不知道它是什么或它是如何工作的。我正在寻找更简单的解决方案,但我不了解如何加载 MDB 5 Pro 库。
我现在做的是这样的:
- 我将 MD5 Pro 包上传到我的 wordpress 站点目录
- 我通过 CDN 复制并粘贴了示例安装链接
- 我创建了一个简单的选择来查看 MDB 是否有效
我究竟做错了什么 ?
小提琴: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();
});
解决方案
我自己做的。我意识到必须在MDB Js之前插入Html代码。另外,我为选择使用了错误的类,我很困惑,我使用的是 MDB 4 的选择类。
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>
推荐阅读
- go - 为什么 goroutine 频道会这样做?
- html - H2 元素不在单独的行上
- javascript - 在 Ramda 中获取管道的先前值
- html - 在断点处更改网格模板
- php - 基于类别中帖子数量的 PHP 文本
- google-apps-script - 用于根据部分单元格数据删除行的 Google Apps 脚本代码
- function - Rust:同名的结构和函数
- python - 如何在 django 频道中为消费者编写单元测试?
- c# - C# UWP SpeechRuntime.exe 内存泄漏?
- javascript - 使用 JavaScript 更改事件监听器对产品列表进行排序