Laravel 프레임워크에 Twitter Bootstrap 추가하기

Laravel 에서 Twitter Bootstrap 사용하기

1. Bootstrap 다운로드

http://getbootstrap.com/getting-started/#download

Bootstrap 위 경우 압축을 해제하면 css, fonts, js 이렇게 3개의 폴더로 구성되어 있어요.

2. Laravel 프로젝트에 추가 하기.

프로젝트에 보시면 "/public" 이라는 폴더가 보이실 겁니다.

그냥 안에 다 넣으시면 끝!

다 넣으시면 아래와 같은 구조가 되겠죠?

아!!! 그리고 "jquery" 를 따로 다운 받아서 js 폴더에 넣어주시는 거 잊지 마세요.

/public/css/bootstrap.css

/public/css/bootstrap.min.css

/public/css/bootstrap-theme.css

/public/css/bootstrap-theme.min.css

/public/fonts/glyphicons-halflings-regular.eot

/public/fonts/glyphicons-halflings-regular.svt

/public/fonts/glyphicons-halflings-regular.ttf

/public/fonts/glyphicons-halflings-regular.woff

/public/js/bootstrap.js

/public/js/bootstrap.min.js

/public/js/jquery-1.11.1.min.js

3. 샘플 코드 작성

"/app/routes.php" 에 아래 코드를 추가해주세요. 

Route::get('boot', function()
{
	return View::make('layouts.master');
});

"app/views/layouts/master.blade.php" 파일 생성 후 아래 코드 추가해주세요.

Colored By Color Scripter™

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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

<title>             @section('title')             Laravel 4 - Tutorial             @show         </title>         <meta name="viewport" content="width=device-width, initial-scale=1.0">         <meta http-equiv="X-UA-Compatible" content="IE=edge">           <!-- CSS are placed here -->         {{ HTML::style('css/bootstrap.css') }}         {{ HTML::style('css/bootstrap-theme.css') }}           <style>         @section('styles')             body {                 padding-top: 60px; }         @show         </style>                     <!-- Navbar -->         <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">             <div class="container">                 <div class="navbar-header">                     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">                         <span class="sr-only">Toggle navigation</span>                         <span class="icon-bar"></span>                         <span class="icon-bar"></span>                         <span class="icon-bar"></span>                     </button>                       <a class="navbar-brand" href="#">Laravel</a>                 </div>                 <!-- Everything you want hidden at 940px or less, place within here -->                 <div class="collapse navbar-collapse">                     <ul class="nav navbar-nav">                         <li><a href="{{{ URL::to('') }}}">Home</a></li>                     </ul>                  </div>             </div>         </div>            <!-- Container -->         <div class="container">               <!-- Content -->             @yield('content')           </div>           <!-- Scripts are placed here -->         {{ HTML::script('js/jquery-1.11.1.min.js') }}         {{ HTML::script('js/bootstrap.min.js') }}

4. 접속 테스트

http://localhost/laravel/public/boot 접속~

다들 아시겠지만 주소에서 laravel 은 저의 프로젝트 이름입니다.

다들 자신의 프로젝트명을 적어주시면 됩니다.

아래와 같은 화면이 나왔다면 성공~^^

감사합니다.