Laravel 4 Tutorial / Add_Twitter-Bootstrap

来源：互联网发布：淘宝邻家好货编辑：程序博客网时间：2024/05/16 08:50

from:https://bitbucket.org/beni/laravel-4-tutorial/wiki/Add_Twitter-Bootstrap

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.

Bootstrap Screenshot

Hint: Sometimes the views are cached in Laravel, so the browser doesn't show the changes. You can try to delete the compiled views inside /app/storage/views/.

The bootstrap-package can also be found at the uploads.

The next chapter shows how to add a User Management.

0 0