Laravel Web 实战入门每章课程总结 - 4.优化页面
0

本章问题:

Bootstrap 前端框架的基本介绍与使用;
Laravel Mix 前端工作流;
Sass 语法的基本使用;
局部视图的定义和引用;
命名路由的使用;

尝试自我解答:

Sass语法的基本使用:

  1. 定义变量:可在sass文件中定义变量并使用,如:

    $header-color: #fff;
    header {
     color: $header-color;
    }
  2. 嵌套使用:书写语法上,同一个父标签可以用嵌套的写法,更简便:

    body header {
     color: #fff;
    }
    body footer {
     color: #555;
    }

    可以写成:

    body {
     header {
       color: #fff;
     }
     footer {
       color: #555;
     }
    }
  3. 引用:类似于嵌套
    body {
     a {
       color: #777;
     }
     a:hover {
       color: #555;
     }
    }

    可以写为:

    body {
     a {
       color: #777;
       &:hover {
         color: #555;
       }
     }
    }

局部视图定义

_ 为前缀的文件为视图文件的局部视图。通过 @include() 来引用局部视图文件;

命名路由的使用

route/web.php 文件中定义路由;

Route::get('help`, 'StaticPagesController@help')->name('help');

在视图文件中使用 {{ route('name') }} 来使用定义好的路由。

《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

  • 请注意单词拼写,以及中英文排版,参考此页
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
  • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
  • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
  • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
  请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!