Contents

Home Study
✔ 뷰어로 보기
Develop
2018.04.05 08:56

[php] Laravel 4. twitter bootstrap 적용하기

hooni
조회 수 2537 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

가 크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

가 크게 작게 위로 아래로 댓글로 가기 인쇄

# 요약


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.



[출처] https://bitbucket.org/beni/laravel-4-tutorial/wiki/Add_Twitter-Bootstrap




Facebook Twitter Google Pinterest KakaoStory Band
위로 아래로 댓글로 가기 인쇄
에디터 선택하기
?
에디터 사용하기 닫기
List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
829 Develop OGNL(Object Graph Navigation Language) hooni 2013.04.23 15727
828 Develop OpenGL 강좌 사이트 모음 hooni 2013.04.23 9637
827 Develop OPT와 CAS에 대한 자료.. (교수님 메일로 보내드린 자료..) file hooni 2013.04.23 13917
826 Develop SVN 명령어 (SVN command) hooni 2014.02.28 12137
825 Develop SVN 초간단 사용하기 hooni 2014.02.28 7616
824 Develop URI 인코딩, URL 인코딩 file hooni 2013.04.23 18845
823 Develop What is difference between Get, Post, Put and Delete? hooni 2018.02.28 1400
822 Develop XE Core 1.8.18 본문 작성시 태그(html) 사라지는 버그 file hooni 2016.04.21 864
821 Develop XML, JSON, BSON, MSGPACK 장,단점 비교 file hooni 2017.01.11 2237
820 Develop ZBar 라이브러리를 이용한 바코드 스캔 앱 개발하기 file hooni 2015.01.01 1628
819 Develop [ajax] 샘플 코드와 한글처리에 대한 간단한 설명 hooni 2013.04.23 6842
818 Develop [ajax] 이벤트 코드 생성기 작업중.. ㅋㅋ file hooni 2013.04.23 7116
쓰기
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 71 Next
/ 71