この記事はtomita@atuwebがお届けします。
Laravel+BladeにBootstrapとjQueryを導入してデザイン面を整えます。

利用バージョンはこちら。

  • PHP 5.4
  • Laravel 5.0.0

Bootstrap

art-bootstrap

Bootstrap
http://getbootstrap.com/

Bootstrapはボタンやメニューなどのパーツを簡単に利用することができるフレームワークです。

グリッドシステムと呼ばれるシステムを利用し、自在にレスポンシブなレイアウトを作ることができるのが魅力ですね。

テーマファイルも多数公開されています。
私が良く利用するのはBootswatchです。

art-bootswatch

Bootswatch
http://bootswatch.com/

導入方法

この記事では「publicに、コンパイル済みのBootstrapを直接設置」する方法を説明いたします。

はじめにBootstrapのサイトよりファイルをダウンロードします。

art-bootstrap-dl

左側のDownload Bootstrapをクリックしてzipファイルを入手してください。

zipファイルを解凍し、解凍後フォルダに含まれるcss、fonts、jsをLaravelプロジェクトにコピーします。

コピー先のディレクトリはプロジェクトルート/public/assets/以下としてください。

その他の導入方法

LaravelでBootstrapを利用するには3つの方法があります。

  • Bootstrap CDNを使用する
  • publicディレクトリ以下にコンパイル済のBootstrapを直接する
  • ソースからコンパイルする

Reactなど利用してフロントエンドを作り込むアプリケーションの場合はソースからコンパイルするのが良いでしょう。

この場合、Bootstrapのソースをダウンロードしてresources/assetsディレクトリに配置し、コンパイルのコマンドを打ちます。

コンパイルにはLaravel Mix(旧Laravel Elixir)を利用します。
このLaravel MixはフロンドエンドのJs開発環境が構築が必要のため、そちらに明るくない方には正直に敷居が高いです。

jQuery

art-jquery

jQuery
https://jquery.com/

導入方法

公式サイトからjsファイルをダウンロードし、/プロジェクトルート/public/assets/js/以下にコピーします。

Bladeのコード

BootstrapのBasic templateをBlade化します。
まずはコードを。

layout.blade.php

<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="{{asset('/assets/css/bootstrap.min.css')}}" rel="stylesheet">
  <link href="{{asset('/assets/css/admin-style.css')}}" rel="stylesheet">
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
  <div class="navbar-header">
    <a href="{{url(")}}" class="navbar-brand">AdminTools</a>
  </div>
</div>
</div>
<div class="container">
<div class="row">
  <div class="col-lg-4 col-md-4">
    @section('sidebar')
    @show
  </div>
  <div class="col-lg-8 col-md-8">
    @yield('content')
  </div>
</div>
</div>
<footer>
<div class="row">
  <div class="col-lg-12">
    @section('footer')
    @show
  </div>
</div>
@section('endbody')
<script src="{{asset('/assets/js/jquery.min.js')}}"></script>
<script src="{{asset('/assets/js/bootstrap.min.js')}}"></script>
@show
</body>
</html>

index.blade.php

@extends('layout')

@section('content')
{{-- content body --}}
@stop

@section('endbody')
@parent
<script>
jQuery(function($) {
  // jQueryの処理
});
</script>
@stop

解説

レイアウトの活用

Bladeではレイアウトシステムが利用できますのでこれを活用してlayout.blade.phpとコンテンツ用のてプレートの2ファイルを用意します。
Bootstrapはもちろん、jQueryもほとんどのページで利用すると思いますので、これらはレイアウトの定義側で読み込むこととしました。

JSは最後に読み込む

jQueryなどJavaScriptのファイルや処理はブロッキングの原因となってしまいますので、コンテンツの最後に読み込みます。

セクション分け

前述のとおり、jsファイル類は</body>の後に読み込みますので、endbodyというセクションを追加して、js関係はそちらにまとめることとしました。

@section('content')部分にjsの処理を書いた場合、その時点でjQueryの読み込みは行われておらず、jQueryが見つからないというエラーが発生してしまいます。


これで下地が整いました。

ここまでやれば、ツールチップでもモーダルダイアログでも、インタラクティブなページを作り込むことができますよ!


参考

ララ帳
初めてのLARAVEL 5.1 : (15) BOOTSTRAP3 の導入
https://laravel10.wordpress.com/2015/03/07/初めてのlaravel-5-15-bootstrap3-で表示を整える/



2017年02月25日 Bootstrapの導入について本文を修正
2015年12月17日 タイトルと本文を「ちょっとだけ」変更

スポンサーリンク
ad_336
ad_336
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存