前回、記事一覧と記事を表示する画面を作成しましたが、何のCSSも設定していない為、非常にそっけない画面となっています。今回は、CSS フレームワークであるBootstrap3 を適用して、表示を整えたいと思います。
Bootstrap の導入方法
Bootstrapの導入方法はいくつか考えられます。
- Bootstrap CDNを使用する
- コンパイル済のBootstrap をダウンロードして、public ディレクトリ以下に配置する
- 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の公式サイトに目を通して、何が出来るのか確認してください
広告
