もくじ
前提
laravelではpublicディレクトリ配下が、ブラウザに表示するデータをアップロードするディレクトリになります。
なので、画面表示に必要なもの（スタイルシートや画像など）はpublicディレクトリにまとめます。逆に、他人にみられて困るものは絶対にpublicディレクトリに格納してはいけません。 envファイルなどは典型例です。
スタイルシートの適用
スタイルシート作成
publicディレクトリにcssディレクトリを作成し、スタイルシートを作成しましょう。
$ mkdir ./public/css $ touch ./public/css/style.css
cssディレクトリを作成するかは任意ですが、スタイルシートを複数作成するプロジェクトも少なくないので管理しやすくするためにディレクトリを設けることをおすすめします。
これでcssファイルの作成が完了したので、bladeで読み込みましょう。
ビューで読み込む
<head>があるbladeを開きます。<head>タグの中に以下を記述すればOKです。
<head> <link rel="stylesheet" href="{{ asset('css/style.css') }}"> </head>
asset('ファイルパス')関数を使うと、publicディレクトリ内のリソースを読み込めるようになっています。
セキュアな通信の場合
セキュアな通信しかしないよって場合はsecure_assetを使います。
詳しくは→Laravelのアセットに関するTips - Qiita
bootstrapの適用
外部ライブラリであるbootstrapを適用するまでの手順です。めちゃくちゃ簡単です。
CDNを利用する方法（ Aパターン）とダウンロードして使用する方法（Bパターン）の2パターンあります。それぞれを説明します。
Aパターン CDN
bootstrapのCSSを読み込む
前述で作成したスタイルシートと同様、<head>タグの中にコードを記述すればOKです。
<head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <link rel="stylesheet" href="{{ asset('css/style.css') }}"> // ★ </head>
★は前述の独自のスタイルシートの<link>です。bootstrapの読み込みは、独自のスタイルシート（★）の前に記述しましょう。
理由は、bootstrapの後に記述することで独自のスタイルシートでコードの上書きが出来るからです。
bootstrapのJavaScriptを読み込む
次に<body>タグの直前に以下の<script>を挿入します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> // ★ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
2020/09/01 追記
★のコードですが、もともと以下のようにしていましたが、これだとなぜかうまくいかなかったので、上記の★にしたほうが無難です。 以下のコードは、 jQueryのサイトからコピペしたコードです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
参考URL；【2020年版】jQuery最新の読み込みスクリプト「コピペOK＋裏技」 | マコブログ
2020/09/01 追記 ここまで
bootstrap4の中にはcssだけでは動作しないもの（ドロップダウンやコラプスなど）もあり、それを動かすための jQueryや popper.jsを読む込む必要があります。
最新のコードは公式リファレンスからコピペしてください。
Bパターン ダウンロードして使用
CDNのように、外部ファイルを参照すると自身の要領を圧迫しません。しかし、外部ファイル参照を不可とするプロジェクトもあるでしょう。ダウンロードして脆弱性を強くしておきましょう。
ダウンロード
公式サイトのCompiled CSS and JSダウンロードします。
すると、このようなファイル群がダウンロードされます。
たくさんありますが、必要なものをセレクトしましょう。
CSSファイル
たとえば、bootstrapでレイアウトのCSSだけを使いたい場合はbootstrap-grid.cssとbootstrap-grid.min.cssだけでよいということがわかります。
bootstrapのすべての機能を利用する場合は、bootstrap.cssとbootstrap.min.cssがあれば網羅できています。
これをpublic/jsディレクトリにコピーし、bladeファイルの<head>タグの中に読み込むコードを記述しましょう
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
あとで説明しますが、.minのファイルだけで問題ありません。
JSファイル
公式リファレンスのJSファイルも見るとPopperの有無によって使い分けます。
Popper とは、Bootstrapが依存しているライブラリであり、ドロップダウンなどにはこのPopperが必要のようです。参考：ドロップダウン～Bootstrap4移行ガイド
なので、bootstrapの機能全般を使いたい場合はbootstrap.bundle.jsとbootstrap.bundle.min.jsが必要ということになります。
これをpublic/jsディレクトリにコピーし、bladeファイルの<head>タグの中に記述しましょう
<script src="{{ asset('js/bootstrap.bundle.min.js') }}" ></script>
CSS同様、.minのファイルだけで問題ありません。詳しくは後述します。
jQueryファイル
最後にjQueryです。これはbootstrapサイトではなくjQueryの公式サイトからダウンロードします。
このリンクを右クリックして「リンク先を別名で保存」します。リンク先にアクセスしてもファイルの中身を閲覧できるだけです。
ファイル保存ダイアログが開くのでpublic/jsディレクトリに保存します。jquery-3.5.1.min.jsというファイルがダウンロードされました。「jquery-」の後の数字がバージョン番号となっていますので、数字は異なるかもしれません。
jQueryのダウンロードは完了したので、JSファイル同様に読み込みます。bootstrap（★）より前に設置しましょう。
<script src="{{ asset('js/jquery-3.5.1.min.js') }}" ></script> <script src="{{ asset('js/bootstrap.bundle.min.js') }}" ></script> // ★
.minのつくファイルってなんぞ
ここまで、ダウンロードして読み込んだCSS、JS、jQueryのファイルはいずれも.minがついていますね。
拡張子の前に.minがついているファイルは、.minがついていないファイルを最小サイズにしたものです。最小サイズとは、コメントや空白、改行を削除してファイルサイズを抑えた圧縮版です。
- bootstrapを使うにあたってダウンロードしたファイル
bootstrap.css bootstrap.min.css // 圧縮版 bootstrap.bundle.js bootstrap.bundle.min.js // 圧縮版 jquery-3.5.1.min.js // 圧縮版
なので、中身としては同じものになります。
通常は圧縮版を使うので、 .minを読み込んでいます。
まとめ
CDN：外部ファイルを呼び出す
ダウンロード：ローカルにダウンロードして読み込む
以上の違いを理解して、用途や制約によって使い分けましょう。
参考URL
Laravel日記2 - CSSを適用してみる- - Qiita
