Home Study

✔ 뷰어로 보기

Develop

2018.04.05 08:56

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

hooni

조회 수 3067 댓글 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 [js] Click button copy to clipboard [js] Click button copy to clipboard 2018.04.05by hooni How to Setup an Email Server on CentOS 7 Next How to Setup an Email Server on CentOS 7 2018.04.05by hooni

0 추천 0 비추천

Facebook Twitter Google Pinterest KakaoStory Band

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

✔댓글 쓰기

에디터 선택하기

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

댓글 쓰기

에디터 사용하기 닫기

Category

[js] Click button copy to clipboard

Date2018.04.05 CategoryDevelop Byhooni Views1628

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

Date2018.04.05 CategoryDevelop Byhooni Views3067

Read More
How to Setup an Email Server on CentOS 7

Date2018.04.05 CategorySystem/OS Byhooni Views3546

Read More
How to Test SMTP AUTH using Telnet

Date2018.04.05 CategoryDevelop Byhooni Views2204

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

Date2018.03.04 CategoryDevelop Byhooni Views29641

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

Date2018.03.02 CategorySystem/OS Byhooni Views2578

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

Date2018.03.02 CategorySystem/OS Byhooni Views1686

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

Date2018.02.28 CategoryDevelop Byhooni Views2120

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

Date2018.01.24 CategoryDevelop Byhooni Views3050

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

Date2018.01.24 CategoryDevelop Byhooni Views2277

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

Date2017.12.15 CategoryDevelop Byhooni Views3217

Read More
[php][laravel] 라라벨 프로젝트 생성 및 구조

Date2017.12.15 CategoryDevelop Byhooni Views2911

Read More

쓰기

Contents

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

단축키

단축키

Add Bootstrap to your Application

Use Bootstrap in your Master-Template

[js] Click button copy to clipboard

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

How to Setup an Email Server on CentOS 7

How to Test SMTP AUTH using Telnet

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

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

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

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

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

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

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

[php][laravel] 라라벨 프로젝트 생성 및 구조

로그인