(学习笔记)Laravel 圣杯布局

最新推荐文章于 2024-05-18 11:09:56 发布

cat and cats

最新推荐文章于 2024-05-18 11:09:56 发布

阅读量714

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_56508310/article/details/124082111

版权

效果图

在这里插入图片描述

代码部分

1.parent.blade.php

    <link rel="stylesheet" type="text/css" href="{{asset('bootstrap.min.css')}}">
    <style type="text/css">
        header{
            height: 80px;
            background-color: antiquewhite;
            color: black;
            padding-top: 20px;
        }
        header h2{
            text-align: center;
        }
        footer{
            height: 80px;
            background-color: antiquewhite;
            color: black;
        }
 
      
        .col-md-2{
            min-height: 300px;
        }
        .col-md-8{
            min-height: 300px;
        }
    </style>
</head>
<body >
    <header>
        <h2><b>学生信息添加系统——信息学院</b></h2>
    </header>
    <div class="main">

        <div class="container-fluid" >
            <div class="row">
                <!-- 左侧 -->
                <div class="col-md-2 " style="background-color: #E6CEAC;">
                @section('left')
                    
                @show
                </div>
                <!-- 中间 -->
                <div class="col-md-8" style="background-color: #D1BA74;">
                     @section('content')
                        
                     @show  
                </div>
                <!-- 右侧 -->
                <div class="col-md-2"  style="background-color: #E6CEAC;">
                    @section('right')
                    
                    @show
                </div>
            </div>
        </div>

    </div>
    <footer >
        <div class="f" style="text-align: center;padding:30px">
        <small >学院总机：0530-333333</small>
        |&nbsp;<a href="#">鲁ICP备17008831号-1 </a>
    </div>
    </footer>
</body>

2.create.blade.php

@extends('admin.parent')

@section('left')
<h3 style="padding-top: 15px;">学校通知速知</h3>
<div class="panel">
                    
    <ul class="list-group">
          <a class="list-group-item" href="#">
            疫情——学校快递业务
         </a>
         <a class="list-group-item" href="#">
            疫情——4月11日起恢复见面课
         </a>
         <a class="list-group-item" href="#">
            海尔学院——4月举办音乐节
         </a>
         <a class="list-group-item" href="#">
            信息学院——软件大赛
         </a>
     </ul>
       
</div>
@endsection

@section('right')
<hr style="color: chocolate; height:4px;margin-bottom:0">
<h3>快速链接</h3>

<div class="panel panel-danger">

<ul class="list-group" >
    <a class="list-group-item" >智慧校园</a>
    <a class="list-group-item">教室在线学习中心</a>
    <a class="list-group-item">CRP学生登陆平台</a>
    <a class="list-group-item">学校博物馆</a>
    <a class="list-group-item">专题网站</a>
  </ul>
</div>
@endsection


@section('content')
<x-alert type="error" >
   

</x-alert>

<!-- <form action="{{--route('ph.store')--}}" method="post" ></form> -->
    <form action="{{url('ph')}}" 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>
        <p> </p>
            <input class="btn " type="submit" value="添加" style="background-color: antiquewhite;" >
    </form>
    @parent
    
@endsection

cat and cats

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
(学习笔记)Laravel 圣杯布局

效果图代码部分1.parent.blade.php <link rel="stylesheet" type="text/css" href="{{asset('bootstrap.min.css')}}"> <style type="text/css"> header{ height: 80px; background-color: antiquewhite; color:
复制链接

扫一扫