如何使用标准Laravel项目正确设置MDBootstrap

时间:2019-01-17 11:36:21

标签: php css laravel web-frameworks mdbootstrap

我正在学习如何使用Laravel,并且对使用MDBootstrap设置网页样式感兴趣。但是,对于如何将其正确集成到我的项目中,我感到困惑。我不想使用CDN链接它,相反,我想将其安装到我的项目中。

有人可以告诉我在基本的Laravel项目中实现此目标的必要步骤吗?

2 个答案:

答案 0 :(得分:1)

Laravel带有2个前端程序包管理器:npm和yarn

npm

npm i mdbootstrap

纱线

yarn add mdbootstrap

此后,您的软件包位于 node_modules 目录中。

您可以import sass个文件,并将js从软件包组合到 vendor.js

您可以configure使用 webpack.mix.js

转换成什么内容

运行npm run dev将开始编译。


如果要安装mdbootstrap pro,请按照以下步骤操作

  1. 获取许可证并发送电子邮件至contact@mdbootstrap.com,请求访问其git仓库(因为他们尚未自动执行此操作)
  2. generate an access token on gitlab
  3. 运行

    npm install git+https://oauth2:[TOKEN]@git.mdbootstrap.com/mdb/[REPO].git --save
    

    其中 [令牌] 是您从第2步开始的令牌,而 [REPO] 是您在选择jquery,angular,vue或react中需要的令牌。您可以通过访问git.mdbootstrap.com并选择合适的项目来找到确切的URL。在右上角找到克隆按钮,然后复制 https 链接。

答案 1 :(得分:0)

如果您不想使用 CLI /NPM,有一种简单的方法可以将 MBootstrap 导入 Laravel。

只需将 mdb.min.js 和 mdb.min.js.map 复制到您的 public/js 文件夹。 接下来将 mdb css 文件(应该有大约 8 个)复制到您的 public/css 文件夹。

现在在 HTML 刀片文件中(为此我使用头部刀片包含文件)添加以下内容:

 <!-- import MDB Pro -->
 <link rel="stylesheet" href="/css/mdb.min.css" />

...然后在关闭 BODY 标签之前(我使用“foot”刀片包含),添加以下内容:

 <!-- import Font Awesome -->
 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">

 <!-- import Material Icons from Google Fonts -->
 <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">

 <!-- import the MDB javascript file https://mdbootstrap.com/ -->    
 <script type="text/javascript" src="{{ asset('js/mdb.min.js') }}"></script>

...只要记住在新版本发布时更新文件。因为它不会在没有 NPM 的情况下自动发生。