Contents

조회 수 4663 댓글 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
번호 분류 제목 글쓴이 날짜 조회 수
843 Develop 프로그램 문서 관리 (Doxygen) hooni 2013.04.23 17834
842 Develop 프로그래밍에서 foo, bar 함수의 유래 file hooni 2013.06.25 22885
841 Develop 프로그래밍 소스 관련 사이트.. hooni 2013.04.23 17901
840 Develop 페이팔에서 돈 찾기 (Paypal withdraw) file hooni 2014.02.20 12746
839 Develop 캘리포니아 운전면허 족보 file hooni 2017.06.12 2817
838 Develop 최근 논문 자료 (2011/01/03, 만현형한테 보낸거..) secret hooni 2013.04.23 10366
837 Develop 참고하고 지울 자료.. 집에서 바야지.. ㅋㅋ file hooni 2013.04.23 14094
836 Develop 정리할 자료. file hooni 2015.07.02 2090
835 Develop 자주 쓰는 Docker 명령어 alias hooni 2020.01.10 289468
834 Develop 이어서 작업할 내용~ secret hooni 2013.11.21 0
833 Develop 웹페이지 성능 테스트 툴 설명 hooni 2013.04.23 28443
832 Develop 알고리즘 성능분석 file hooni 2014.06.24 4264
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 71 Next
/ 71