Contents

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

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

hooni
조회 수 2530 댓글 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
번호 분류 제목 글쓴이 날짜 조회 수
817 Develop 라이브러리에 대한 설명 (static & dynamic library) hooni 2013.04.23 6942
816 Develop 도메인 관련 솔루션 분석할 거.. ㅋㄷ file hooni 2013.04.23 6981
815 Develop 다운 받아서 테스트 해볼것.. hooni 2013.04.23 9131
814 Develop 다양한 방법으로 아주 큰 수(Big Number) 계산.. ㅋㅋ hooni 2013.04.23 8364
813 Develop 논문에 들어갈 툴바 테스트 해볼 것.. secret hooni 2013.04.23 8013
812 Develop 논문 실험용 고려대 툴바 ㅎㅎ secret hooni 2013.04.23 8686
811 Develop 객체지향 프로그래밍에 대한 개념.. (객체) file hooni 2013.04.23 7308
810 Develop [펌] 게임 엔진 만든거 공개합니다. hooni 2015.02.21 2342
809 Develop [자료구조] 트리(tree) 용어정리 file hooni 2003.04.23 11050
808 Develop [Xcode] 디버깅 옵션 file hooni 2013.04.23 57194
807 Develop [winmobile] 윈도우 모바일 간단한 테스트 코드 ㅋㅋ file hooni 2013.04.23 17081
806 Develop [web] 웹 연동 프로그램 모음.. file hooni 2013.04.23 6960
쓰기
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 71 Next
/ 71