[php] Laravel 4. twitter bootstrap 적용하기
# 요약
1. 우선 bootstrap을 다운로드 : http://getbootstrap.com/
2. public 폴더안에 css, fonts, js 폴더 통자로 복사 붙여넣기
3. 내가 만든 blade 또는 view파일에
{{ HTML::style('css/bootstrap.css') }}
{{ HTML::style('css/bootstrap-responsive.css') }}
{{ HTML::script('js/jquery.v1.8.3.min.js') }}
{{ HTML::script('js/bootstrap.min.js') }}
head사이에 넣기!
# 원문
The Twitter-Bootstrap is a simple front-end framework that is used in many web applications.
You can download the latest version at getbootstrap.com. Laravel also has a bootstrap-directory, but this has nothing to do with the Twitter-Bootstrap.
This chapter is based on the previous Using Templates chapter. To start directly, you have to download using-templates-package.
Add Bootstrap to your Application
To make the bootstrap available for our application we have to create some directories:
- /public/css
- /public/fonts
- /public/js
The downloaded bootstrap-package also has this directories somewhere inside. Just copy (extract) the files to the appropriate directories. In addition we download jQuery.com to supply it directly in our public js-directory. Now you should have following files in your public:
- /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
Use Bootstrap in your Master-Template
We have to include the Bootstrap at our master template to supply it to all pages.
/app/views/layouts/master.blade.php:
<!DOCTYPE html> <html> <head> <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> </head> <body> <!-- 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') }} </body> </html>
According to the Bootstrap-Help we add a meta-tag "viewport" for mobile devices. We can use {{ HTML::style('...') }} to add a css and {{ HTML::script('...') }} to add a javascript to our template. So we insert two css and two scripts.
To get this example working we need to add a padding for our body to show the menu correctly. To give the views the possibility to change the styles we add a styles section.
If you test the view, you will not see much changes. In the next step we add a main navigation-bar.
/app/views/layouts/master.blade.php:
<!DOCTYPE html> <html> <head> <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> </head> <body> <!-- 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') }} </body> </html>
I don't want to explain all the elements here. You can look at the Bootstrap Help.
For the Home-Button we insert {{{ URL::to('') }}} to get automatic the correct link to our homepage.
You can test the new layout in your browser.
번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|---|
261 | Etc | 영어의 12 시제 (The twelve tenses of English) | hooni | 2013.07.12 | 15812 |
260 | Develop |
[ios] APNS 클라이언트 구현 (pdf)
![]() |
hooni | 2013.06.27 | 15842 |
259 | PPT |
[ppt] 웜 과제 진행사항(프레임워크 검증환경 구축) 보고
![]() |
hooni | 2013.04.23 | 15940 |
258 | System/OS |
라우팅 경로 결정 영향 요소 ㅋㅋ
![]() |
hooni | 2013.04.23 | 15952 |
257 | System/OS |
[owasp] 10대 웹어플리케이션 보안 취약
![]() |
hooni | 2013.04.23 | 16006 |
256 | Etc |
여기저기서 모은 VoIP(인터넷전화) 자료들~
![]() |
hooni | 2013.04.23 | 16040 |
255 | Etc | 티스토리 테이블 html,css 구문 | hooni | 2013.11.03 | 16065 |
254 | Etc |
[doc] 웜 프레임워크 검증환경 구축(작성중..)
![]() |
hooni | 2013.04.23 | 16067 |
253 | Etc | iOS 에서 쓸만한 오프라인 구글지도 찾기 | hooni | 2014.01.06 | 16112 |
252 | Develop |
[c] 네트워크 정보 알아보기
![]() |
hooni | 2013.04.23 | 16165 |
251 | Etc |
[flash] 페이지 이동 (액션스크립트)
![]() |
hooni | 2013.04.23 | 16297 |
250 | Develop |
[android] 안드로이드 어플 모음 ㅎㅎ
![]() |
hooni | 2013.04.23 | 16340 |