今回のパートではBootstrapと呼ばれる、効率的にデザインを作成できるCSSフレームワークを導入していきます。

BootstrapはCSSを細かく指定せずにサイトをある程度形にできます。レスポンシブ（PCでもスマートフォンでもきれいに表示されるという意味です）にも対応してくれる便利なツールです。Bootstrapを導入するとキレイなWebアプリケーションを効率よく開発できます。

Bootstrapについて詳しく勉強したい方は以下のドットインストールの動画をご覧ください。

Bootstrap 4入門

本パートの目標物

本パートでは、下記の画像のように青色のボタンを表示するところまで実装していきます。

目標物を作成するまでの流れ

Bootstrapを手軽に導入するためにCDNを使って導入していきます。CDNを使うと特にインストール作業などせずにスタイルシートへのリンクを貼るだけでBootstrapを使うことができます。

1. 公式CDNページに沿ってBootstrap4を導入

まず今回導入するBootstrap4の公式CDNページにアクセスしてください。

公式CDNページ

上記のコードをコピー&ペーストするだけで導入できます。次のセクションで実際にビューへ貼り付けます。

2. Bootstrapが導入されたか確認

実際にBootstrapが機能するか確認します。

BootstrapのComponentsの公式ドキュメントを参考に仮のボタンにBootstrapのクラスを当てます。

laravelgram/resources/views/post/index.blade.phpを以下のコードを追加してください。

Copied!
laravelgram
└── resources
    └── views
        └── post
             └── index.blade.php   

resources/views/post/index.blade.php
123456789
         
Copied!
<!-- // ==========ここから追加する========== --> 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- // ==========ここまで追加する========== --> 

<p>このページは仮のトップページです。</p>

<!-- // ==========ここから追加する========== --> 
<a href="#" class="btn btn-primary">仮のボタンです</a>
<!-- // ==========ここまで追加する========== --> 

コードを追加したら、まずサーバーを再起動してください。
（サーバーが既に立ち上がっている場合は、control + Cでサーバーを終了させることができます。そのあと「php artisan serve --port=8080」コマンドでサーバーを立ち上げてください。）

再起動したら、「Preview Running Application」をクリックしてプレビューしてください。

青色のボタンが表示されていればうまく動作しています。

以上で今回のパートは終了です。

お疲れ様でした。