演習課題「共通テンプレートにBootstrapを適用する」
右の環境には、Laravelで「myblog」というアプリケーションを作ってあります。
このアプリケーションの共通テンプレート(layput.blade.php)のコンテンツのところを、 Bootstrapのコンテナを利用するように修正してください。
採点して、すべてのジャッジに正解すれば、演習課題クリアです!
※ 採点時は、サーバを起動し、問題文に関するページにアクセスできる状態にしてください。
#03:掲示板にBootstrapを適用しよう
ここでは、Laravelで作る1行掲示板に、HTMLテンプレートのBootstrapを適用します。Bootstrapを利用すると、Webアプリケーションのデザインを簡単にレベルアップさせることができます。
resources/views/style-sheet.blade.php<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'>
<style>body {padding-top: 80px;}</style>
resources/views/nav.blade.php<nav class='navbar navbar-expand-md navbar-dark bg-dark fixed-top'>
<a class='navbar-brand' href={{ route('article.list') }}>paiza bbs</a>
</nav>
resources/views/layout.blade.php<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>paiza bbs</title>
@include('style-sheet')
</head>
<body>
@include('nav')
<div class='container'>
@yield('content')
</div>
</body>
</html>
### Bootstrap
LaravelでBootstrapの導入 - Laravel学習帳
https://laraweb.net/knowledge/1758/
### Bladeテンプレートエンジン
Bladeテンプレート 5.6 Laravel
https://readouble.com/laravel/5.6/ja/blade.html
【Laravel】Viewのbladeの書き方 - Qiita
https://qiita.com/sola-msr/items/a128f4e0900f3541690c
### ビューの共通化
LaravelのBladeテンプレートでレイアウト部分を共通にする | cly7796.net
http://cly7796.net/wp/php/to-a-common-layout-in-blade-template-of-laravel/
Blade テンプレートについて - Laravel学習帳
http://laraweb.net/knowledge/2174/