Home Study

✔ 뷰어로 보기

Develop

2018.04.05 08:56

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

hooni

조회 수 4673 댓글 0

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

# 요약

1. 우선 bootstrap을 다운로드 : http://getbootstrap.com/

2. public 폴더안에 css, fonts, js 폴더 통자로 복사 붙여넣기

3. 내가 만든 blade 또는 view파일에

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

0 추천 0 비추천

Facebook Twitter Google Pinterest KakaoStory Band

위로 아래로 댓글로 가기 인쇄

✔댓글 쓰기

에디터 선택하기

✔ 텍스트 모드 ✔ 에디터 모드

댓글 쓰기

에디터 사용하기 닫기

Category

[js] 이미지 미리 로딩하기

Date2003.04.23 CategoryDevelop Byhooni Views8425

Read More
[js] 사라지는 브라우저

Date2003.04.23 CategoryDevelop Byhooni Views8422

Read More
[html] 메타태그 사용예.. 은지나 바라~

Date2003.04.23 CategoryDevelop Byhooni Views8409

Read More
[c][java] 소켓 프로그래밍(채팅 서버 C, 클라이언트 Java)

Date2003.04.23 CategoryDevelop Byhooni Views8406

Read More
[c] 단기과정[01/10] 과제.. swap(any data, ..)

Date2003.04.23 CategoryDevelop Byhooni Views8406

Read More
[c] kmp 활용 search

Date2013.04.23 CategoryDevelop Byhooni Views8388

Read More
[js] 자바스크립트와 정규표현식 메뉴얼 (chm 형식)

Date2013.04.23 CategoryDevelop Byhooni Views8387

Read More
[php] 무조건 다운로드 받도록 header 세팅

Date2013.04.23 CategoryDevelop Byhooni Views8386

Read More
[asp] 폼 메일 소스

Date2013.04.23 CategoryDevelop Byhooni Views8384

Read More
[c] 시간(요일,날짜 포함) 출력하는 프로그램 초간단 코드

Date2013.04.23 CategoryDevelop Byhooni Views8380

Read More
[c] 단기과정[01/06] sizeof, 실수표현, 메모리, 연산자

Date2003.04.23 CategoryDevelop Byhooni Views8377

Read More
[php] gd 프로그램.. htm 파일.. ㅋㅋ

Date2013.04.23 CategoryDevelop Byhooni Views8365

Read More

쓰기

Contents

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

단축키

단축키

Add Bootstrap to your Application

Use Bootstrap in your Master-Template

[js] 이미지 미리 로딩하기

[js] 사라지는 브라우저

[html] 메타태그 사용예.. 은지나 바라~

[c][java] 소켓 프로그래밍(채팅 서버 C, 클라이언트 Java)

[c] 단기과정[01/10] 과제.. swap(any data, ..)

[c] kmp 활용 search

[js] 자바스크립트와 정규표현식 메뉴얼 (chm 형식)

[php] 무조건 다운로드 받도록 header 세팅

[asp] 폼 메일 소스

[c] 시간(요일,날짜 포함) 출력하는 프로그램 초간단 코드

[c] 단기과정[01/06] sizeof, 실수표현, 메모리, 연산자

[php] gd 프로그램.. htm 파일.. ㅋㅋ

로그인