初めてのLaravel 5.1 : (15) Bootstrap3 の導入

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


Bootstrap の導入方法

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

  1. Bootstrap CDNを使用する
  2. コンパイル済のBootstrap をダウンロードして、public ディレクトリ以下に配置する
  3. Bootstrapのソースをダウンロードして、resources/assets ディレクトリに配置し、Elixirを使ってコンパイルおよび public ディレクトリに配置する

3.が最も最適化できますが、手順が最も複雑で難しくなります。
この記事では最も手軽な、Bootstrap CDN を使用して進めます。
Elixirを使ったBootstrapの導入に関しては、以下の記事をご覧ください。


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

// resources/views/layout.blade.php

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

    <!-- CSSを追加 --><!-- ① 追加 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>

<body>
    <div class="container"><!-- ② 追加 -->
        @yield('content')
    </div>
	
    <!-- Scripts --><!-- ③ 追加 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

① Bootstrap CDN のCSSの読み込みを追加。

② @yield(‘content’)を囲む div.container を追加。
class=”container” を指定するとBootstrapが左右にマージンを表示します。
Bootstrapの使い方はここでは説明しきれないので、公式サイトをご覧ください。

③ jQuery CDNと Bootstrap CDNの JavaScriptの読み込みを追加。


表示内容確認

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

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


演習

Bootstarpの公式サイトに目を通して、何が出来るのか確認してください

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中