Contents

Home Study
✔ Viewer
Develop
2018.04.05 08:56

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

hooni
Views 2539 Comment 0
?

Shortcut

PrevPrev Article

NextNext Article

Larger Font Smaller Font Up Down Go comment Print
?

Shortcut

PrevPrev Article

NextNext Article

Larger Font Smaller Font Up Down Go comment Print

# 요약


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
Up Down Go comment Print
Select Editor
?
Write with WYSIWYG Close
List of Articles
No. Category Subject Author Date Views
69 System/OS 맥 OS X 에서 스크린 화면 캡쳐 단축키 (Mac Print Screen) hooni 2015.07.21 1900
68 System/OS 맥북에서 MAC/윈도우 멀티부팅시 시간 설정 file hooni 2013.04.23 29759
67 System/OS 맥에서 파일공유 (윈도우,맥) file hooni 2013.04.25 37301
66 System/OS 맥에서 포트 확인하고 닫기 (mac) hooni 2022.03.22 890
65 Etc 모바일 프로그래머가 갖추어야 할 필수 역량 file hooni 2017.02.16 1293
64 Develop 모터에 대한 pid 제어.. ㅎㅎ file hooni 2013.04.23 18878
63 System/OS 무료로 HTTPS 적용하기 (Let's Encrypt) file hooni 2017.10.28 1401
62 System/OS 무료로 HTTPS 적용하기 (Lets' Encrypt) file hooni 2017.02.16 2174
61 System/OS 무선 인증 서버.. 김도.. ㅋㅋ file hooni 2013.04.23 17595
60 Develop 밸런싱 로봇.. 최종.. (관련 논문도 첨부) ㅋㅋ file hooni 2013.04.23 22820
59 Etc 베지어 곡선 (Bezier curve) file hooni 2013.08.18 221106
58 Develop 베지어 곡선(Bézier curve) 알고리즘(spline 곡선) 3 file hooni 2013.04.23 33259
Write
Board Pagination Prev 1 ... 88 89 90 91 92 93 94 95 96 97 98 Next
/ 98