8.8 優化前端 · ThinkPHP 5.1 教程 - Web 入門開發實戰

# 優化前端本章的后端邏輯代碼到這里就結束了，現在的前端頁面不難看，但是也不好看，由于我們是要打造一款類似微博功能的網站，恰好今日看到 twitter 更新了 UI，布局簡潔值得模仿，由下圖為例，我們盡可能的還原 twitter。 ![eMfWYd.png](https://s2.ax1x.com/2019/07/27/eMfWYd.png) ## 整體布局由于上圖中的布局呈左-中-右的形式，所以我們需要把默認布局更改為三欄。 `resources\views\_layout\default.blade.php` ~~~html ... <body> <div class="container mt-5"> <div class="row"> <div class="col"> @include('_layout.header') </div> <div class="col-6"> <ul class="list-group"> <li class="list-group-item"> <a onclick="window.history.go(-1); return false;" class="btn btn-light" aria-label="Previous"> <span aria-hidden="true">«</span> </a> @yield('title') </li> <li class="list-group-item"> @yield('content') </li> </ul> </div> <div class="col"> @include('_layout.footer') </div> </div> </div> ... ~~~ 修改側欄布局 `resources\views\_layout\header.blade.php` ~~~html <header> <nav class="nav flex-column"> <ul class="list-group list-group-flush"> <li class="list-group-item list-group-item-action"> <a class="nav-link" href="{{ url('welcome/index/home') }}"> 主頁 </a> </li> <li class="list-group-item list-group-item-action"> <a class="nav-link" href="{{ url('user/auth/index') }}"> 所有用戶 </a> </li> @if(session('user')) <li class="list-group-item list-group-item-action"> <a class="nav-link" href="{{ url('user/auth/index') }}"> 個人資料 </a> </li> <li class="list-group-item list-group-item-action"> <div class="dropdown"> <a class="nav-link dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="">更多</a> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item"> <form action="{{ url('user/session/delete', ['id' => session('user.id')]) }}" method="POST"> @php echo token() @endphp <button class="btn btn-block" type="submit" name="button">退出</button> </form> </a> </div> </div> </li> @else <a class="btn btn-outline-success my-2 my-sm-0" href="{{ url('user/auth/create') }}"> 注冊 </a> <a class="btn btn-outline-success my-2 my-sm-0" href="{{ url('user/session/create') }}"> 登錄 </a> @endif </ul> </nav> </header> ~~~ 創建樣式表文件 `public\static\css\app.css` ~~~css .pagination li:first-child { margin-left: 0; border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; } .pagination li { position: relative; display: block; padding: 0.5rem 0.75rem; margin-left: -1px; line-height: 1.25; color: #007bff; background-color: #fff; border: 1px solid #dee2e6; } ~~~ 全部保存后，刷新頁面，可以看到整體的布局已經非常接近了，細節方面存在瑕疵，我們將會在后面的章節中持續優化。