Home Study

✔ 뷰어로 보기

Develop

2018.04.05 08:56

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

hooni

조회 수 2539 댓글 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

Prev How to Setup an Email Server on CentOS 7 How to Setup an Email Server on CentOS 7 2018.04.05by hooni [js] Click button copy to clipboard Next [js] Click button copy to clipboard 2018.04.05by hooni

0 추천 0 비추천

Facebook Twitter Google Pinterest KakaoStory Band

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

✔댓글 쓰기

에디터 선택하기

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

댓글 쓰기

에디터 사용하기 닫기

Category

[php][laravel] 라라벨 개발환경 세팅하기 (Mac, Window)

Date2017.12.15 CategoryDevelop Byhooni Views2574

Read More
Laravel 5 Failed opening required bootstrap/../vendor/autoload.php

Date2018.01.24 CategoryDevelop Byhooni Views1652

Read More
[php] Laravel Route에서 PC/Mobile 분기

Date2018.01.24 CategoryDevelop Byhooni Views2464

Read More
What is difference between Get, Post, Put and Delete?

Date2018.02.28 CategoryDevelop Byhooni Views1400

Read More
콘솔에서 패스워드 걸린 zip 압축하는 명령

Date2018.03.02 CategorySystem/OS Byhooni Views937

Read More
[mac] 맥에서 기본 실행 앱 변경하기

Date2018.03.02 CategorySystem/OS Byhooni Views1804

Read More
[python] DJI Tello 드론 코딩 (프로그래밍)

Date2018.03.04 CategoryDevelop Byhooni Views25752

Read More
How to Test SMTP AUTH using Telnet

Date2018.04.05 CategoryDevelop Byhooni Views1332

Read More
How to Setup an Email Server on CentOS 7

Date2018.04.05 CategorySystem/OS Byhooni Views2779

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

Date2018.04.05 CategoryDevelop Byhooni Views2539

Read More
[js] Click button copy to clipboard

Date2018.04.05 CategoryDevelop Byhooni Views1169

Read More
[api] 인스타그램에서 최신 이미지 가져오기 (Using Instagram API)

Date2018.04.05 CategoryDevelop Byhooni Views12344

Read More

쓰기

Contents

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

단축키

단축키

Add Bootstrap to your Application

Use Bootstrap in your Master-Template

[php][laravel] 라라벨 개발환경 세팅하기 (Mac, Window)

Laravel 5 Failed opening required bootstrap/../vendor/autoload.php

[php] Laravel Route에서 PC/Mobile 분기

What is difference between Get, Post, Put and Delete?

콘솔에서 패스워드 걸린 zip 압축하는 명령

[mac] 맥에서 기본 실행 앱 변경하기

[python] DJI Tello 드론 코딩 (프로그래밍)

How to Test SMTP AUTH using Telnet

How to Setup an Email Server on CentOS 7

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

[js] Click button copy to clipboard

[api] 인스타그램에서 최신 이미지 가져오기 (Using Instagram API)

로그인