初めてのLaravel 5.6 : (15) Bootstrap の導入

前回、記事一覧と記事を表示する画面を作成しましたが、何の CSS も設定していない為、非常にそっけない画面となっています。今回は、CSS フレームワークである Bootstrap を適用して、表示を整えたいと思います。


Bootstrap の導入方法

Bootstrap の導入方法はいくつか考えられます。

  1. Laravel デフォルトの CSS, JavaScript を使用する
  2. Bootstrap CDN を使用する
  3. コンパイル済の Bootstrap をダウンロードして、public ディレクトリ以下に配置する
  4. Bootstrap のソースを npm でダウンロードして、Laravel Mix を使って public ディレクトリに配置する

4.が最も最適化できますが、node や npm, Laravel Mix 等のフロントエンドの知識が必要になります。
この記事では最も手軽な、1. のデフォルト CSS, JavaScript を使っていきます。

4.の Laravel Mix の使い方に関しては、公式サイトを御覧ください

https://laravel.com/docs/5.6/frontend
https://laravel.com/docs/5.6/mix


ドキュメントルート

Laravel のドキュメントルートは public ディレクトリになります。デフォルト CSS, JavaScript はその中にあります。

public
├── css
│   └── app.css     CSS ファイル
└── js
    └── app.js      JavaScript ファイル

レイアウトファイルを修正

// resources/views/layout.blade.php

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>My Blog</title>

    <!-- ① CSS を追加 -->
    <link rel="stylesheet" href="/css/app.css">

    <!-- ② JavaScript を追加 -->
    <script src="/js/app.js" defer></script>
</head>
<body>
 
    <div class="container py-4"> <!-- ③ 追加 -->
        @yield('content')
    </div>
 
</body>
</html>

① デフォルト CSS の読み込みを追加。
② デフォルト JavaScript の読み込みを追加。

③ 実際に Bootstrap を使ってみます。
div を追加して、@yield(‘content’) を囲みます。
div に class=”container py-4″ を指定すると Bootstrap が上下左右に余白を表示します。
Bootstrap の使い方はここでは説明しきれないので、公式サイトをご覧ください。
https://getbootstrap.com/


表示内容確認

http://localhost:8000/articles/ にアクセスして表示を確認します。左右に余白ができていれば成功です。

表示を整えるとか言って、現状ではあまり変わらなかったですね(汗)。今後、メニューやフォームを作成していくのですが、その時になれば、Bootstrap の美しさがわかると思います。


演習

Bootstarp の公式サイトに目を通して、何が出来るのか確認してください。
https://getbootstrap.com/

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中