这是父模板

最新推荐文章于 2024-07-30 08:33:45 发布

qq_59791762

最新推荐文章于 2024-07-30 08:33:45 发布

阅读量103

点赞数

文章标签： laravel

本文链接：https://blog.csdn.net/qq_59791762/article/details/124155553

版权

这个博客展示了如何使用 Laravel 的视图继承创建一个包含头部、主体和底部的响应式布局。主体部分由父模板定义，子模板通过 `@section` 和 `@show` 添加内容，如一个简单的搜索表单。页面布局使用 CSS 进行了调整，确保左右两侧栏目的显示，并实现了自适应宽度。

摘要由CSDN通过智能技术生成

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title','姓名')</title>
</head>
<style type="text/css">
    body {
  min-width: 550px;
}
    body,html{
        margin: 0;
    }
        header{
            width: 100%;
            background-color: yellowgreen;
        }
        #container{
            width: 100%;
            background-color: green;
            height: 200px;
            padding-left: 200px;
            padding-right: 200px;   
            box-sizing: border-box;
        }
        .column{
            float: left;
            height: 200px;
           
        }
        #center{
            width: 100%;
            background-color: orange;

        }
        #left{
            position: relative;
            width: 200px;
            background-color: pink;
            margin-left: -100%;
            right: 200px;
        }
        #right{
            width: 200px;
            background-color: lightblue;
            margin-right: -200px;
           
            
        }
        footer{
            clear: both;
            width: 100%;
            background-color: palegreen;
        }
    </style>
<body>
    
    <header>header</header>
   <div id="container">
       <div id="center" class="column">
       
           @section('content')
           <h2>这是父模板</h2>
           @show
           
    </div>
       <div id="left" class="column">left</div>
       <div id="right" class="column">right</div>
   </div>
    <footer >footer</footer>
    
</body>
</html>

<!-- 子模版 -->
<link rel="stylesheet" type="text/css" href="{{asset('').'css/bootstrap.min.css'}}">
@extends('layout.parent')
@section('title','子模板')
@section('content')

<form action="{{url('useer')}}">
    <input type="hidden" name="_token" value="{{csrf_token()}}">
    <label for="song">
        <input type="text"name="song" id="song"placeholder="请输入姓名">姓名
    </label>
    <input type="submit" value="搜索">
</form>
@parent
@endsection

运行结果

在这里插入图片描述

qq_59791762

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
这是父模板

代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
复制链接

扫一扫