8
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

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

テンプレート選び

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

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

スクリーンショット 2021-02-11 10.56.00.png

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

スクリーンショット 2021-02-11 11.04.44.png

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

ダウンロード

スクリーンショット 2021-02-11 11.06.24.png

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

スクリーンショット 2021-02-11 11.09.44.png

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

スクリーンショット 2021-02-11 11.12.42.png

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

スクリーンショット 2021-02-11 11.14.26.png

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

スクリーンショット 2021-02-11 11.17.05.png

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

コードの配置場所

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

ビューファイルは、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" />

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

以上です。

8
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?