【Laravel初心者】Bootstrapテンプレートを使ってみた

4704 ワード
laravel8 初心者 Bootstrap Laravel Bootstrap テキストリンク

Laravel初学者です。
オリジナルアプリを作成しているのでその過程を記事にしています。

理解が曖昧なところも多いため、ご指摘等ありましたらご連絡いただければ幸いです。

今回はBootstrapのテンプレートを用いてviewを作成したので記録として残します。

環境

Version
PHP 7.4.14
Laravel 8.24.0
mysql 8.0.23
docker 20.10.2
docker-compose 1.27.4

Bootstrapを選んだ理由

  • Laravelで使えるようになっているから
  • レスポンシブ対応が簡単
  • 簡単にお洒落になる
  • 時間短縮

view考えるのも好きなので自分で１から作りたい気持ちはありますが...
本当に簡単すぎてテンプレート提供してくれている方に感謝しかないです。

テンプレート選び

「Bootstrapテンプレート 無料」みたいな感じで検索して自分がいいなと思うものを探しました。

私の場合はこちらの記事を参考にさせて頂きStart Bootstrapを選びました。

こちらがトップ画面です。
右下の矢印のところにProとFreeというのがあるので無料でやりたい場合はFreeにしましょう。

たくさん出てきます。
この中から自分にあったものを探します。

ダウンロード

一つ選んだら上記の画像のようにGithubにいきます。

Githubにやり方が書いてあります。
今回の場合はnpmするか、リポジトリでダウンロードやクローンするかという感じです。
私はダウンロードを選びました。

上記の画像のようにCodeを押して

上記の画像のようにDownload ZIPを押してダウンロードします。

ダウンロードすると上記のようなフォルダになっていました。
それぞれを自分のプロジェクトのフォルダに入れていきます。

コードの配置場所

ここで問題なのがどこに配置したらいいのか分からないということでした。
こちらの記事を参考にさせて頂きました。
ありがとうございます！

ビューファイルは、resources/viewsの中に入れることで読み込む。
css,jsなどは、publicに入れることで読み込む。

ということです。
通常ダウンロードしたindex.htmlをviewに配置して拡張子を変更しindex.blade.phpにするようですが
私の場合はこのテンプレートの一部だけ使いたかったので
cssやjsやimgはそのままpublicフォルダに配置し、indexは使いたい部分だけコピーして自分のビューファイルに貼り付けました。

パスの変更

そのまま配置しただけだとパスが違うためviewに反映されません。
直していきます。

<link rel="icon" type="image/x-icon" href="assets/img/favicon.ico" />

例えば初期の状態は上記のようなパスになっています。
publicフォルダに入れたのでassetsを変更します。

<link rel="icon" type="image/x-icon" href="public/img/favicon.ico" />

上記のように一つ一つ直していき完成です。

以上です。