Laravelでtwitter bootstrapを使う
Laravelにtwitter bootstrapを入れてみる。twitter bootstrapも初めて触る。
とりあえずダウンロードして、web root直下にbootstrapフォルダを置いた。treeコマンドで見ると以下になる。
├─bootstrap │ ├─css │ │ bootstrap-responsive.css │ │ bootstrap-responsive.min.css │ │ bootstrap.css │ │ bootstrap.min.css │ │ │ ├─img │ │ glyphicons-halflings-white.png │ │ glyphicons-halflings.png │ │ │ └─js │ bootstrap.js │ bootstrap.min.js │
次に自分のサイトのヘッダを作る。「app\views」直下に「layout」というフォルダを作り、中に「default.blade.php」というテンプレートを作った。「default.blade.php」内のhtmlのヘッダ内にbootstrapへのリンクを貼った。java scriptへのリンクはページ下部のほうが早くなるらしいけど、まあいいや。
default.blade.php <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> @section('title') Tutorial @show </title> {{ HTML::style('bootstrap/css/bootstrap.min.css') }} {{ HTML::script('bootstrap/js/jquery.js') }} {{ HTML::script('bootstrap/js/bootstrap.min.js') }} </head> <body style="padding-top:80px;"> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="../">Bootswatch</a> <ul class="nav"> <li><a href="{{ URL::to('list') }}">リスト</a></li> </ul> </div> </div> </div> <div class="container"> @yield('content') </div> </body> </html>
これはまだ自分のサイトのデフォルトテンプレートなので、まだindexページも見れない。