laravel5.1框架基础之Blade模板继承简单使用方法分析
本文实例讲述了laravel5.1框架基础之Blade模板继承简单使用方法。分享给大家供大家参考,具体如下:
模板继承什么用? 自然是增强基础页面的复用,有利于页面文档的条理,也便于更改多处使用的内容,如页头、页脚
1.用法概要
-
@include('common.header')
包含子视图 -
@extends('article.common.base')
继承基础模板 -
@yield('content')
视图占位符 -
@section('content')
@endsection
继承模板后向视图占位符中填入内容 -
{{-- 注释 --}}
Blade模板中注释的使用
2.具体使用
2.1 新建Article基础模板base.blade.php
直接使用Bootstrap4模板代码及CDN,新建视图基础模板 路径resources/views/article/common/base.blade.php
<!DOCTYPE html <html lang="en"
<head
<title Artilce|标题在此</title
<meta charset="utf-8"
<meta name="viewport" content="width=device-width, initial-scale=1"
<meta http-equiv="x-ua-compatible" content="ie=edge" <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="external nofollow" rel="external nofollow"
</head
<body
{{-- 包含页头 --}}
@include('article.common.header')
{{-- 继承后插入的内容 --}}
@yield('content')
{{-- 包含页脚 --}}
@include('article.common.footer')
<script src="http://ajax.useso.com/ajax/libs/jquery/2.1.4/jquery.min.js" </script
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js" </script
</body
</html
2.2. 建子视图文件 页头和页脚
页头文件 resources/views/article/common/header.blade.php
<nav class="navbar navbar-light bg-faded"
<div class="container"
<a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" Articles</a
<ul class="nav navbar-nav"
<li class="nav-item active"
<a class="nav-link" href="/article" rel="external nofollow" 首页 <span class="sr-only" (current)</span </a
</li
<li class="nav-item"
<a class="nav-link" href="#" rel="external nofollow" rel="external nofollow" 写文章</a
</li
</ul
<ul class="nav navbar-nav pull-right"
<li class="nav-item"
<a href="" class=" rel="external nofollow" rel="external nofollow" btn btn-primary-outline" 登录</a
</li
<li class="nav-item"
<a href="" class=" rel="external nofollow" rel="external nofollow" btn btn-success-outline" 注册</a
</li
</ul
</div
</nav
页脚文件 resources/views/article/common/footer.blade.php
<div class="footer"
style="width: 100%;height: 300px;background-color: #00B388;padding-top: 50px;"
<div class="container"
<h1 style="color: #FFFFFF;font-size: 1.5em;" Articles</h1
</div
</div
2.3 即可继承模板,实现复用
新建主页文件在resources/views/article/index.blade.php
@extends('article.common.base')
@section('content')
<div class="container" style="height: 500px;text-align: center;"
<h1 style="position: absolute;left: 35%;top: 30%;" 继承模板的主页搞定了!</h1
{{-- 这里是Blade注释 --}}
</div
@endsection
2.4 如何访问?
需要路由以及控制器配合,这里简单只用路由实现,详细内容请点击,以及接下来的其它文段
在app/Http/routes.php 路由注册文件写上如下代码
Route::get('/',function(){
return view('article.index');
});
启动你的配置的laravel跑的服务器,比如我在目录地址下php artisan serve
浏览器输入 : localhost:8000,即可看到效果图
3. 效果图
articles效果图|色彩 #00B388
X bootstrap4起始模板代码
bootstrap4文档
<!DOCTYPE html
<html lang="en"
<head
<!-- Required meta tags always come first --
<meta charset="utf-8"
<meta name="viewport" content="width=device-width, initial-scale=1"
<meta http-equiv="x-ua-compatible" content="ie=edge"
<!-- Bootstrap CSS --
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="external nofollow" rel="external nofollow"
</head
<body
<h1 Hello, world!</h1
<!-- jQuery first, then Bootstrap JS. --
<script src="http://ajax.useso.com/ajax/libs/jquery/2.1.4/jquery.min.js" </script
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js" </script
</body
</html
更多关于Laravel相关内容感兴趣的读者可查看本站专题:《Laravel框架入门与进阶教程》、《php优秀开发框架总结》、《php面向对象程序设计入门教程》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》
希望本文所述对大家基于Laravel框架的PHP程序设计有所帮助。
- php概述
- php教程
- php环境搭建
- PHP书写格式
- php变量
- php常量
- PHP注释
- php数组
- php字符串 string
- PHP整型 integer
- PHP浮点型 float
- php布尔型
- php数据类型之数组
- php数据类型之对象
- php数据类型之null
- php数据类型之间的转换
- php运算符
- php表达式
- PHP循环控制
- PHP流程控制
- php函数
- php全局变量
- PHP魔术变量
- php命名空间
- php 日期
- PHP包含文件
- php文件
- PHP 文件上传
- php Cookies
- php Sessions
- php email
- php安全email
- php错误处理
- PHP异常处理
- php过滤器
- PHP 高级过滤器
- php json
- php 表单
- PHP MySQL 简介
- PHP 连接 MySQL
- php创建数据库
- php 创建表
- php mysq 插入数据
- PHP MySQL 插入多条数据
- PHP MySQL 预处理语句
- php mysql 读取数据
- php mysql where
- PHP MySQL Order By
- PHP MySQL Update
- PHP MySQL Delete
- php ODBC
- 重学数据结构(一、线性表)
- Jmeter系列(49)- 详解 HTTP Cookie 管理器
- java.lang.ClassNotFoundException:org.springframework.web.context.ContextLoaderListener问题解决
- ELK + Filebeat + Kafka 分布式日志管理平台搭建
- 一切皆是文件:UNIX,Linux 操作系統的設計哲學
- 【JS】687- 几行代码摸清楚上拉加载原理
- CTO 写的代码,全网被吐槽,真是绝了
- 定义一个函数,在该函数中可以实现任意两个整数的加法。java实现
- JDBC连接ORACLE的三种URL格式
- Centreon+Nagios实战第八篇——Nagios+Centreon添加监控服务
- Centreon+Nagios实战第九篇——利用nrpe插件监控本机
- 第四篇 CentOs7下安装Zabbix
- 第十三篇 zabbix创建Item
- 第十四篇 zabbix创建自定义Item
- 【性能】688- 前端性能优化——从 10 多秒到 1.05 秒