Laravel 5.3 Tutorial for Beginner - Blade layouts

Laravel 5.3 Tutorial for Beginner - Blade layouts

Route & Controller & View

routes/web.php 에서 아래 추가

Route::get('blade', 'PagesController@blade');

PageController.php 에서 아래 추가

public function blade()
{
    return view('blade.bladetest');
}

views/layouts/master.blade.php 파일 생성

views/blade/bladetest.blade.php 파일 생성

bladetest.blade.php에는 아래를 추가한다.

@extends('layouts.master')

Bootstrap에서 가져오기

소스 복사

Bootstrap 중 Narrow Jumbotron example의 페이지 소스를 가져와서 master.blade.php에 집어넣는다.

그리고 Bootstrap 소스를 down 받아온다. (현시점 bootstrap-3.3.7) bootstrap 패키지에서 아래의 파일 라라벨 프로젝트로 복사한다.

• /docs/examples/jumbotron-narrow/jumbotron-narrow.css -> public/css

• /dist/css/bootstrap.min.css -> -> public/css

Link Bootstrap

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
...
<!-- Custom styles for this template -->
<link href="css/jumbotron-narrow.css" rel="stylesheet">

여기까지 하고 localhost/blade 해서 보면 적용된 것을 확인할 수 있다.

Title 적용

master.blade.php

<title>@yield('title')</title>

bladetest.blade.php

@section('title')
    Blade
@endsection

Body 적용

master.blade.php에서 body에 해당하는 내용을 모두 지우고 아래처럼 한다.

@yield('body')

bladetest.blade.php

@section('body')
      <div class="jumbotron">
        <h1>Jumbotron heading</h1>
        <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p>
      </div>

      <div class="row marketing">
        <div class="col-lg-6">
          <h4>Subheading</h4>
          <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

          <h4>Subheading</h4>
          <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

          <h4>Subheading</h4>
          <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
        </div>

        <div class="col-lg-6">
          <h4>Subheading</h4>
          <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

          <h4>Subheading</h4>
          <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

          <h4>Subheading</h4>
          <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
        </div>
      </div>
@endsection