LaravelにBootstrapを導入する

こんにちは!とびろぐ管理人のとびうおです。

今回はLaravelにBootstrapを導入していきたいと思います!

とびうおくん
とびうおくん

今回はLaravelの中でも
Laravel10に導入していきたいと思います!

LaravelにBootstrapを導入する方法は2つ

LaravelにBootstrapを導入する方法は大きく2つあります。

  • CDNという形で使う
  • Laravel/uiを使用して使う

この2つの方法があります。

とびうおくん
とびうおくん

個人的にはCDNの方が楽で、初心者にはおすすめです!

慣れてきたらlaravel/ui等を使用していきましょう!

LaravelにBootstrapを導入する
LaravelにBootstrapを導入する

まずCDNで使う方法

では、始めにCDNでBootstrapを使用する方法について解説していきたいと思います。

とびうおくん
とびうおくん

cdnは簡単に使うことが

できるのでおすすめです!

はじめに
世界で最も人気のあるフレームワーク Bootstrap で始めましょう。CDN とテンプレートを使ってモバイルファーストなサイトを構築できます。

上記のサイト通りに、cdnを使っていきます。

スターターテンプレートに書いてあるように、headのところに追加します。

css

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
とびうおくん
とびうおくん

これを追加するだけで、

bootstrapのcssを使用するとができます。

js

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
とびうおくん
とびうおくん

これを追加するだけで、

bootstrapのjsを使用することができます。

LaravelにBootstrapを導入する
LaravelにBootstrapを導入する

このような形にCDNを使って、Bootstrapのclassを簡単に使うことができます。

Laravel uiを使用する

それでは次にLaravel uiを使用していきます。

Laravel uiを使用してインストールしていくには、以下のステップを踏む必要があります。

LaravelにBootstrapを導入する
LaravelにBootstrapを導入する

Laravel/uiを使うには、まずcomposerを使用していuiコマンドが使用できるようにしていく必要があります。

composer require laravel/uiをする

まず最初にcomposer require laravel/uiをしていきます。

LaravelにBootstrapを導入する
LaravelにBootstrapを導入する

筆者の環境はlaravel 10でsailを使用しているので、以下のようなコマンドでlaravel/uiを使用します。

sail composer require laravel/ui

sailを使用していない場合は、

composer require laravel/ui

をしてください。

とびうおくん
とびうおくん

sailを使用しているのにも関わらず、

sailコマンドを使用しないと手元のphpのバージョンが反映されて

しまったりするので、注意してください!

このようにcomposer require laravel/uiをするとuiコマンドを使用することができるようになります。

uiコマンドでインストールをする

では、先ほど使えるようになったuiコマンドを使用してインストールをしていきましょう。

LaravelにBootstrapを導入する
LaravelにBootstrapを導入する
sail php artisan ui bootstrap

sailを使用していない場合は、

php artisan ui bootstrap

と打つと、Bootstrapを使用する準備ができました。

とびうおくん
とびうおくん

ここでも、自分がsailを使用しているかどうかというのを

間違えないようにしてコマンドを打ちましょう!

npm install & npm run devをする

では最後にnpm installとnpm run devをしていきます。

これが最後のステップです。

LaravelにBootstrapを導入する
LaravelにBootstrapを導入する

早速npm installをしていきましょう。

sail npm install

sailを使用していない場合は、

npm install

をします。

そして、

sail npm run dev

sailを使用してない場合は

npm run dev

を打ちます。

とびうおくん
とびうおくん

ここでもsailを自分が使っているかどうかを

自分で判断をして打つコマンドを決めてください!

なお、npm run devが何をしているかわからない方は以下の記事を読むことをおすすめします。

ここまでで、全ての工程をクリアしました。

この状態になったことでBootstrapがlaravelで使えるようになります。

bladeに以下の記述をしてください。

    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
とびうお<br>
とびうお

npm run devでコンパイルしたcssをここでは読み込んでいるよ!

そうすることで、無事Bootstrapを使えるようになりました。

まとめ

以上がLaravelでBootstrapを導入する方法です。

とびろぐではこれ以外にも多くのLaravelの記事を公開しているので、ぜひみてください!

Laravel
「Laravel」の記事一覧です。
とびうお
ブログ管理人です!
swimaneというアプリをリリースしました!

コメント

タイトルとURLをコピーしました