Integrar bootstrap 3 en laravel

Pasos a seguir:

  • Bajar de la página de bootstrap los archivos compilados y copiar el contenido dentro de la carpeta public para quedar como sigue
  • y copiar el contenido del download bootstrap. Tener cuidado de leer todos los link en el codigo fuente del ejemplo, por que existen scripts js que no se descargan con bootstrap, por ejemplo ie10-viewport-bug-workaround.js.
  • Elegir un ejemplo de la página de bootstrap y copiarlo en un nuevo archivo en resources/views/layout.blade.php

En el archivo resources/views/layout.blade.php revisar los links de los css y js, en el caso de los links con referencias relativas, es decir que el contenido este en nuestro servidor, se debe usar "{{asset('ruta/en/public)}}", esta es una función de blade que permite referenciar las rutas relativas hacia la carpeta public SIN importar la identación. Ejemplo:

<link rel="stylesheet" href="{{asset('assets/css/bootstrap.min.css')}}">

En la siguiente instantanea, se puede apreciar la relación entre el contenido del arhcivo app/Http/routers.php y los archivos "views" en resources/views/.

Como se puede apreciar en el primer "Route", cuando en el navegador se solicita la página inicial (index.php) "/" se entrega el "view" de resources/layout.blade.php. En el segundo ejemplo cuando se pide la página "facturar" se entrega el "view" de resources/factura/facturar.blade.php

Los "views" contenidos en resources/viewstienen la caracteristica que todos tienen la extensión MiVista.blade.php utilizan como base el archivo resources/layout.blade.php, para que esto en resources/layout.blade.php agregamos los siguiente

@section('container')
<div class="container">
      <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> 
        All you get is this text and a mostly barebones HTML document.</p>
      </div>
</div><!-- /.container -->
@show

Como se puede apreciar el "<div class='container'>", es la sección donde está el contenido de la página, y generalmente es la parte que siempre cambia. Para poder usarla como plantilla se usa las etiquetas @section('container') ... y ... @show, lo anterior ocaciona que cuando se llama a la "/" dentro del navegador el contenido dentro del "<div class='container'>" se muestre.

Lo anterior NO es lo optimo por que siempre se debe usar el layout como eso, por lo cual es necesario eliminar las etiquetas @section y @show, y sustituirlas por @yield('container')

<div class="container">
    
    @yield('container')
      
</div><!-- /.container -->

Una ventaja de usar el comando @yield es que nos permite introducir contenido dinámico dentro de una plantilla, por ejemplo se puede configurar el título de una página en donde el primer parametro es el id de la sección y el segundo es el valor por defecto.

<head>
 ....
 <title> @yield('titulo', 'Default')</title>
 ....
</head>

Para usar lo anterior es necesario que en cada vista se incluya un @section, ejemplo:

@section('titulo')
   Titulo de pág.
@stop

Un ejemplo de uso es el agregar en un menu el estilo de activo.

<div id="navbar" class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    <li class="@yield('nav_home','')"><a href="#">Home</a></li>
    <li class="@yield('nav_obtener','')"><a href="obtener">Obtener</a></li>
    <li class="@yield('nav_facturar','')"><a href="facturar">Facturar</a></li>
  </ul>
</div><!--/.nav-collapse -->

Y en cada plantilla se agrega la seccion:

@section('nav_obtener')
 active
@stop

No hay comentarios:

Publicar un comentario

Todos los comentarios serán revisados antes de su publicación!

Suscribirse a: Entradas (Atom)