【问题标题】:How do I correctly setup MDBootstrap with my standard Laravel project如何使用我的标准 Laravel 项目正确设置 MDBootstrap
【发布时间】:2019-01-17 11:36:21
【问题描述】:

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

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

【问题讨论】:

    标签: php css laravel web-frameworks mdbootstrap


    【解决方案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
      

      其中 [TOKEN] 是您在步骤 2 中的令牌,而 [REPO] 是您从 jquery、angular、vue 或 react 选项中需要的令牌。您可以通过访问git.mdbootstrap.com 并选择正确的项目来找到确切的网址。在右上角找到 clone 按钮并复制 https 链接。

    【讨论】:

      【解决方案2】:

      如果你不想使用 CLI /NPM,有一种简单的方法可以将 MDBootstrap 导入 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 标记之前(我使用“脚”刀片包含),添加以下内容:

       <!-- 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 它不会自动发生。

      【讨论】:

        猜你喜欢
        • 2012-02-08
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2022-08-18
        • 1970-01-01
        • 2017-10-17
        • 2020-10-26
        • 2018-11-03
        相关资源
        最近更新 更多