目的
- LaravelでBootstrapを使う方法をまとめる。
実施環境
- ハードウェア環境
項目 | 情報 |
---|---|
OS | macOS Catalina(10.15.3) |
ハードウェア | MacBook Pro (16-inch ,2019) |
プロセッサ | 2.6 GHz 6コアIntel Core i7 |
メモリ | 16 GB 2667 MHz DDR4 |
グラフィックス | AMD Radeon Pro 5300M 4 GB Intel UHD Graphics 630 1536 MB |
- ソフトウェア環境
項目 | 情報 | 備考 |
---|---|---|
PHP バージョン | 7.4.3 | Homwbrewを用いて導入 |
Laravel バージョン | 7.0.8 | commposerを用いて導入 |
MySQLバージョン | 8.0.19 for osx10.13 on x86_64 | Homwbrewを用いて導入 |
実施方法概要
- style sheetのリンクをBootstrapに設定
- 確認コードを貼り付けてチェック
実施方法詳細
-
style sheetのリンクをBootstrapに設定
-
下記のコードをBootstrap対応させたいビューファイルのhead内に記載する。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
-
-
確認コードを貼り付けてチェック
-
下記コードを前述のstylesheetのリンクを記載したビューファルに記載する。
<nav class="navbar fixed-top navbar-light bg-light"> <a class="navbar-brand" href="#">Fixed top</a> </nav>
アプリを起動し当該ビューファイルをみた時に下記のように表示される事を確認する。
-