导入静态资源
public目录下
创建控制器
/*
* 表格demo
*
*/
public function index(){
return view('student.index');
}
创建视图
创建路由
Route::get('student/index',['uses'=>'StudentController@index']);
创建公共模板
公共父模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>轻松学会Laravel-@yield('title','表格demo')</title>
<!-- Bootstrap CSS 文件 -->
<link rel="stylesheet" href="{{ asset('static/bootstrap/css/bootstrap.min.css') }}">
@section('style')
@show
</head>
<body>
<!-- 头部 -->
@section('header')
<div class="jumbotron">
<div class="container">
<h2>轻松学会Laravel</h2>
<p> - 玩转Laravel表单</p>
</div>
</div>
@show
<!-- 中间内容区局 -->
<div class="container">
<div class="row">
<!-- 左侧菜单区域 -->
<div class="col-md-3">
@section('left_menu')
<div class="list-group">
<a href="#" class="list-group-item active">学生列表</a>
<a href="#" class="list-group-item">新增学生</a>
</div>
@show
</div>
<!-- 右侧内容区域 -->
<div class="col-md-9">
@yield('content')
</div>
</div>
</div>
@section('footer')
<!-- 尾部 -->
<div class="jumbotron" style="margin:0;">
<div class="container">
<span> @2016 imooc</span>
</div>
</div>
@show
@section('script')
<!-- jQuery 文件 -->
<script src="{{ asset('static/jquery/jquery-3.4.1.min.js')}}"></script>
<!-- Bootstrap JavaScript 文件 -->
<script src="{{ asset('static/bootstrap/js/bootstrap.min.js')}}"></script>
@show
</body>
</html>
注意：静态资源使用 asset('') 导入
公共消息模板
<!-- 成功提示框 -->
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>成功!</strong> 操作成功提示！
</div>
<!-- 失败提示框 -->
<div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>失败!</strong> 操作失败提示！
</div>
创建子模板（完善视图）
@extends('common.layouts')
@section('content')
@include('common.message')
<!-- 自定义内容区域 -->
<div class="panel panel-default">
<div class="panel-heading">学生列表</div>
<table class="table table-striped table-hover table-responsive">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>添加时间</th>
<th width="120">操作</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>18</td>
<td>男</td>
<td>2016-01-01</td>
<td>
<a href="">详情</a>
<a href="">修改</a>
<a href="">删除</a>
</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>18</td>
<td>男</td>
<td>2016-01-01</td>
<td>
<a href="">详情</a>
<a href="">修改</a>
<a href="">删除</a>
</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>18</td>
<td>男</td>
<td>2016-01-01</td>
<td>
<a href="">详情</a>
<a href="">修改</a>
<a href="">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 分页 -->
<div>
<ul class="pagination pull-right">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</div>
@stop