zoukankan      html  css  js  c++  java
  • laravel实践2.引入bootstrap

    1.安装bootstrap

    composer require laravel/ui --dev

     2.引入bootstrap

    php artisan ui bootstrap

    3.Bootstrap 是以 NPM 扩展包的形式集成到 Laravel 项目中的. 在package.json中可发现:

    • bootstrap —— Bootstrap NPM 扩展包;
    • jquery —— jQuery NPM 扩展包;
    • laravel-mix —— 由 Laravel 官方提供的静态资源管理工具。

    这些扩展包,为 Laravel 提供了一套完整的前端工作流。

    4.可以使用 NPM 对这些扩展包进行安装。

    先使用国内镜像加速:

    $ npm config set registry=https://registry.npm.taobao.org
    $ yarn config set registry 'https://registry.npm.taobao.org'

    5.使用 Yarn 对扩展包进行安装,请在项目根目录下运行以下命令进行安装:

    $ yarn install --no-bin-links
    $ yarn add cross-env

    6.编辑resources/sass/app.scss

    @import '~bootstrap/scss/bootstrap';

    7.将 Bootstrap 导入成功之后,需要使用以下命令来将 .scss 文件编译为 .css 才能正常使用

    npm run dev

    或使用以下命令实时监测.scss变化并及时编译为.css

     npm run watch-poll

    (在进行项目开发时 npm run watch-poll 必须一直运行着,避免出现前端文件更改后没有应用到页面上)。

    所有编译后的资源文件都被存放在 public 文件夹中,在 public/css 文件夹中看到刚刚编译成功之后的文件。

    8.在所需视图页面的<head>中引入:

    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
  • 相关阅读:
    shell_02
    shell_practise
    Shell_01
    PythonDay_03
    PythonDay_02
    PythonDay_01
    面试题32:从上到下打印二叉树
    面试题 31 : 栈的压入、弹出序列
    面试题20 : 表示数值的字符串
    面试题29:顺时针打印矩阵
  • 原文地址:https://www.cnblogs.com/itwatcher/p/12106421.html
Copyright © 2011-2022 走看看