Laravel サーバサイド

[入門者向け]5分でわかるLaravelにBootstrapを入れてボタンやフォームをスタイリングする方法

どうも、シローです。

普段はサーバサイドやフロントサイドの開発をしております。

 

今回はLaravelにBootstrapを導入する方法についてご紹介します。

この記事の対象者

  • Laravelを触り始めた人
  • Bootstrapを導入してボタンやフォームをいい感じにしたい人

Bootstrapを導入

BootstrapをLaravelに導入するためにはlarave/uiパッケージをインストールする必要があります。

そのために次のコマンドを実行します。

laravel/uiがインストールされたら、新しくuiのartisanコマンドが追加されます。このコマンドによってBootstrapVueReactのScaffolding(足場)を作成することが可能になります。

Bootstrapを導入するには次のコマンドを実行します。

--authは認証機能(ユーザ登録・ログイン・パスワード変更など)も追加で導入するオプションです。

実際にBootstrapが適用されているか確認

レイアウトに新しくlayouts/app.blade.phpが作成されているので、実際にそれを使ってレイアウトを調整してみます。

before

 

after

おわりに

いかがだったでしょうか?

今回はLaravelにBootstrapを導入しスタイリングする方法をご紹介しました。

本記事がLaravelを初めてみてBootstrapを入れてみようと思った方に少しでも参考になれば幸いです。

-Laravel, サーバサイド

© 2024 Shiro's secret base