반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- Blade
- blockchain
- 사업자계좌
- 코로나
- 개인사업자
- 전자소송
- vue
- elasticSearch
- win32
- 이더리움
- 체당금
- 인민공원
- javascript
- 소액임금체불
- auth
- as후기
- 당사자표시정정신청서
- 홈택스
- Java
- Eclipse
- php
- 보정명령
- Tutorial
- 코로나19
- Python
- cartalyst
- reactnative
- Bootstrap
- Laravel
- Sentinel
Archives
- Today
- Total
그냥 사는 이야기
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
'Development > Web' 카테고리의 다른 글
Laravel 5.3 Tutorial for Beginner - Pagination (0) | 2020.01.19 |
---|---|
Laravel 5.3 Tutorial for Beginner - Blade subviews (0) | 2020.01.17 |
Laravel 5.3 Tutorial for Beginner - View Composers (0) | 2020.01.16 |
Laravel 5.3 Tutorial for Beginner - Sharing data with all Views (0) | 2020.01.15 |
Laravel 5.3 Tutorial for Beginner - Mutators & Accessors (0) | 2020.01.14 |
Comments