Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

Laravel6.x以上にBootstrapを導入

Laravel6.x以上にBootsrapを導入

ターミナル上で以下のコマンドを打つ必要あり

ターミナル
$ composer require laravel/ui
$ php artisan ui bootstrap
$ npm install && npm run dev

インストールされたか確認

CSS

publicの下にcssのフォルダが作成されていたら成功!

public/css/app.css

/*!
 * Bootstrap v4.5.2 (https://getbootstrap.com/)
 * Copyright 2011-2020 The Bootstrap Authors
 * Copyright 2011-2020 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

入ってますね。

Javascript

publicの下にjsのフォルダが作成されていたら成功!
app.jsというファイルが入っているはずです。

head情報に読み込むためのコードを埋め込む


<link href="{{ asset('/css/app.css') }}" rel="stylesheet">

asset('ファイルパス')はpublicディレクトリのパスを返す関数。

ということは、
publicの直下なら
asset('/app.css')

publicの下にcssというディレクトリを作ってその中にcssファイルを入れるなら
asset('/css/app.css')


<script src="{{ asset('/js/app.js') }}"></script>
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
2
Help us understand the problem. What are the problem?