導入靜態資源
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