Contents

조회 수 4660 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

# 요약


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




?

List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
73 Etc WM미통기 - 10. 조건부확률 hooni 2015.04.20 2248
72 Develop [ios] StoryBoard(xib) 없이 프로젝트 만들기 file hooni 2015.02.12 2228
71 Develop [c#] BHO 한샘툴바랑 동현툴바.. secret hooni 2013.04.23 2208
70 System/OS [svn] Can't convert string from native encoding to 'UTF-8' 메시지가 나오는 경우 hooni 2014.12.18 2195
69 Develop [ios] 아이폰 앱 이름 및 버전 정보 hooni 2015.03.24 2194
68 Develop [ios] 로컬에 있는 html 실행하기 hooni 2015.02.10 2181
67 Develop [js] AngularJS 란? file hooni 2015.11.26 2177
66 Develop [ios] 로컬에 있는 JS 파일 웹뷰에서 동적으로 실행하기 hooni 2015.02.10 2176
65 Develop [ios] Xcode의 디버그 모드에서 콜스택 file hooni 2015.01.03 2172
64 Develop [ios] APNS에 사용할 인증서 만들기 (KeyChain에 있는 인증서 Export) file hooni 2015.01.03 2141
63 Develop [c#] 툴바 최근 버전(IE6, IE7 두가지 버전) secret hooni 2013.04.23 2138
62 System/OS [mac] 패키지 매니저, MacPort hooni 2015.01.03 2137
Board Pagination Prev 1 ... 88 89 90 91 92 93 94 95 96 97 ... 99 Next
/ 99