こんにちは！とびろぐ管理人のとびうおです。
今回はLaravelにBootstrapを導入していきたいと思います！
今回はLaravelの中でも
Laravel10に導入していきたいと思います！
LaravelにBootstrapを導入する方法は2つ
LaravelにBootstrapを導入する方法は大きく2つあります。
- CDNという形で使う
- Laravel/uiを使用して使う
この2つの方法があります。
個人的にはCDNの方が楽で、初心者にはおすすめです！
慣れてきたらlaravel/ui等を使用していきましょう！
まずCDNで使う方法
では、始めに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を使用することができます。
このような形にCDNを使って、Bootstrapのclassを簡単に使うことができます。
Laravel uiを使用する
それでは次にLaravel uiを使用していきます。
Laravel uiを使用してインストールしていくには、以下のステップを踏む必要があります。
Laravel/uiを使うには、まずcomposerを使用していuiコマンドが使用できるようにしていく必要があります。
composer require laravel/uiをする
まず最初にcomposer require laravel/uiをしていきます。
筆者の環境はlaravel 10でsailを使用しているので、以下のようなコマンドでlaravel/uiを使用します。
sail composer require laravel/uisailを使用していない場合は、
composer require laravel/uiをしてください。
sailを使用しているのにも関わらず、
sailコマンドを使用しないと手元のphpのバージョンが反映されて
しまったりするので、注意してください！
このようにcomposer require laravel/uiをするとuiコマンドを使用することができるようになります。
uiコマンドでインストールをする
では、先ほど使えるようになったuiコマンドを使用してインストールをしていきましょう。
sail php artisan ui bootstrapsailを使用していない場合は、
php artisan ui bootstrapと打つと、Bootstrapを使用する準備ができました。
ここでも、自分がsailを使用しているかどうかというのを
間違えないようにしてコマンドを打ちましょう！
npm install & npm run devをする
では最後にnpm installとnpm run devをしていきます。
これが最後のステップです。
早速npm installをしていきましょう。
sail npm installsailを使用していない場合は、
npm installをします。
そして、
sail npm run devsailを使用してない場合は
npm run devを打ちます。
ここでもsailを自分が使っているかどうかを
自分で判断をして打つコマンドを決めてください！
なお、npm run devが何をしているかわからない方は以下の記事を読むことをおすすめします。
ここまでで、全ての工程をクリアしました。
この状態になったことでBootstrapがlaravelで使えるようになります。
bladeに以下の記述をしてください。
<link rel="stylesheet" href="{{ asset('css/app.css') }}">npm run devでコンパイルしたcssをここでは読み込んでいるよ！
そうすることで、無事Bootstrapを使えるようになりました。
まとめ
以上がLaravelでBootstrapを導入する方法です。
とびろぐではこれ以外にも多くのLaravelの記事を公開しているので、ぜひみてください！
swimaneというアプリをリリースしました！
コメント