演習課題「テーブルタグにBootstrapを適用する」
右の環境には、Laravelで「myblog」というアプリケーションを作ってあります。
この一覧ページの表組みを、Bootstrapのデザインを利用するように修正してください。表組みには、以下のスタイルを割り当てます。
```
table table-striped table-hover
```
採点して、すべてのジャッジに正解すれば、演習課題クリアです！
※ 採点時は、サーバを起動し、問題文に関するページにアクセスできる状態にしてください。
演習課題「リンクのデザインをボタンに変える」
右の環境には、Laravelで「myblog」というアプリケーションを作ってあります。
この一覧ページにある新規作成ページへのリンクを、Bootstrapのボタンを利用するように修正してください。ボタンには、以下のスタイルを割り当てます。
btn btn-primary
```
btn btn-primary
```
採点して、すべてのジャッジに正解すれば、演習課題クリアです！
※ 採点時は、サーバを起動し、問題文に関するページにアクセスできる状態にしてください。
＃04:Bootstrapでページの見栄えを整えよう
ここでは、Bootstrapを利用して掲示板アプリケーションの見栄えを整えます。Bootstrapには、テーブルタグやボタンに見栄えの良いスタイルが用意してあります。これを利用すれば、アプリケーションのデザインを簡単にレベルアップできます。
resources/views/index.blade.php@extends('layout')
@section('content')
<h1>paiza bbs</h1>
<p>{{ $message }}</p>
<table class='table table-striped table-hover'>
@foreach ($articles as $article)
<tr>
<td>
<a href='{{ route("article.show", ["id" => $article->id]) }}'>
{{ $article->content }}
</a>
</td>
<td>{{ $article->user_name }}</td>
</tr>
@endforeach
</table>
<div>
<a href={{ route('article.new') }} class='btn btn-outline-primary'>新規投稿</a>
</div>
@endsection
resources/views/show.blade.php@extends('layout')
@section('content')
<h1>paiza bbs</h1>
<p>{{ $message }}</p>
<p>{{ $article->content }}</p>
<p>{{ $article->user_name }}</p>
<p>
<a href={{ route('article.list') }} class='btn btn-outline-primary'>一覧に戻る</a>
</p>
<div>
{{ Form::open(['method' => 'delete', 'route' => ['article.delete', $article->id]]) }}
{{ Form::submit('削除', ['class' => 'btn btn-outline-secondary']) }}
{{ Form::close() }}
</div>
@endsection
### 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/