laravel-圣杯布局

parent.blade.php

<link rel="stylesheet" type="text/css" href="{
    
    {asset('bootstrap.min.css')}}">
        <style type="text/css">
            header{
    
    
                height: 60px;
               background-color: lightseagreen;
               color:black;
               padding-top: 15px;;
            }
            header>h2{
    
    
                text-align: center;
            }
            footer{
    
    
                background-color: lightseagreen;
                height: 60px;
            }
            .f{
    
    
                text-align: center ;
                padding-top: 10px;
                color: lightcoral;
            }
            .col-md-2{
    
    
                min-height: 300px;
            }
            .col-md-8{
    
    
                min-height: 300px;
            }

        </style>
	</head>
<body>
    <header>
        <h2>软件20-4 Laravel学习网站</h2>
    </header>
    <div class="main">
    <div class="container-fluid" >
        <div class="row">
            <!-- 左侧 -->
            <div class="col-md-2 " style="background-color: lightblue;">
            @section('left')

            @show
            </div>
            <!-- 中间 -->
            <div class="col-md-8" style="background-color: lightgrey;">
                 @section('content')

                 @show
            </div>
            <!-- 右侧 -->
            <div class="col-md-2"  style="background-color: lightblue;">
                @section('right')

                @show
            </div>
        </div>
    </div>

    </div>
    <footer >
        <div class="f">
        <small >PHP中文网</small><br>
        <samll>推荐使用阿里云</samll>
    </div>
    </footer>

	</body>

create.blade.php

@extends('layout.parent')
@section('left')

    <h3 style="padding-top: 15px;">Laravel</h3>
    <div class="panel">

        <ul class="list-group">
              <a class="list-group-item" href="#">
                入门指南
             </a>
             <a class="list-group-item" href="#">
                架构思想
             </a>
             <a class="list-group-item" href="#">
                基础功能
             </a>
             <a class="list-group-item" href="#">
                深入话题
             </a>
             <a class="list-group-item" href="#">
               安全
             </a>
             <a class="list-group-item" href="#">
               数据库
             </a>
         </ul>

    </div>
    @endsection
    @section('right')
    <hr style="color: lightseagreen; height:3px;margin-bottom:0">
    <h3>页面导航</h3>

    <div class="panel panel-danger">

    <ul class="list-group" >
        <a class="list-group-item" style="color: indianred;" >接触Laravel</a>
        <a class="list-group-item" style="color: indianred;">你的第一个Laravel项目</a>
        <a class="list-group-item" style="color: indianred;">你的第一个Laravel项目</a>
        <a class="list-group-item" style="color: indianred;">初始配置</a>
        <a class="list-group-item" style="color: indianred;">Laravel全线框架</a>
        <a class="list-group-item" style="color: indianred;">Laravel API后端</a>
      </ul>
    </div>
    @endsection
    @section('content')

    <x-alert type="success" :message="$message">

    </x-alert>
    <!-- <form action="{
    
    {--route('user.store')--}}" method="post" ></form> -->
        <form action="{
    
    {url('user')}}" method="post" style="text-align: center; padding-top:20px">

        <input class="" type="hidden" name="_token" value="{
    
    {csrf_token()}}">

            <div style="padding-top: 20px;">
                <label for="username"> 用户名： </label>
                <input id="username" type="text" name="username" placeholder="请输入..." >
            </div>

            <input class="btn " type="submit" value="添加" style="background-color: lightgoldenrodyellow">
        </form>

    @parent
@endsection

** 效果图
**

猜你喜欢