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') }}">
  • 相关阅读:
    支持国产共享软件
    Win CE 5.0 增加电池电量显示
    [转]C# 系统应用之鼠标模拟技术及自动操作鼠标
    自己写的 读写 ini 配置文件类
    自己写的 Readini 类
    sizeof与strlen()、递归优化题解
    Git学习资源收集汇总
    好用的Google Chrome插件
    【转】C# Socket编程(5)使用TCP Socket
    【转】C# Socket编程(4)初识Socket和数据流
  • 原文地址:https://www.cnblogs.com/itwatcher/p/12106421.html
Copyright © 2011-2022 走看看