Home Study

✔ 뷰어로 보기

Develop

2018.04.05 08:56

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

hooni

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

List of Articles
번호	분류	제목	글쓴이	날짜	조회 수
1129	Develop	[Javascript][Ajax] 자바스크립트 강의 산출물	hooni	2019.10.05	2636
1128	Develop	[ios] Locale Identifiers	hooni	2018.11.29	3323
1127	Develop	[ios] Swift 4 Dictionary 사용하기	hooni	2018.11.29	3712
1126	Develop	[ios] Swift 4 Singleton inheritance	hooni	2018.10.31	5247
1125	Develop	[ios] APNS, Remote Push 사용자가 수신을 동의했는지 확인하기	hooni	2018.10.19	2955
1124	Develop	[ios] APNS, Remote Push 수신 시점에서 앱의 3가지 실행 상태	hooni	2018.10.19	2748
1123	Develop	[ios] Swift 4 String, Date, DateFormatter 예제	hooni	2018.10.18	3843
1122	System/OS	Mac에서 Node.js 설치하기	hooni	2018.09.28	5566
1121	System/OS	서버 확장을 위한 두 가지 방법	hooni	2018.08.29	4507
1120	Develop	[ios] Requesting Location Permissions in iOS	hooni	2018.08.18	7172
1119	Develop	[PHP] Mac OS에서 PHP 7 설치하기	hooni	2018.05.11	6969
1118	Develop	[php] Connect to Firebase Console in Laravel	hooni	2018.05.09	5312

쓰기

Contents

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

단축키

단축키

Add Bootstrap to your Application

Use Bootstrap in your Master-Template

로그인