Vous êtes sur la page 1sur 10

BLADE

Integrar una plantilla de bootstrap, o de html con sus respectivos css y script
respectivos.

1. Descargamos la plantilla y colocamos la carpeta que contiene los css y script en la


carpeta public. Para nuestro caso esa carpeta la vamos a llamar bootstrap.

2. En la vista creamos un layout con el index que viene en nuestra plantilla.

 El archivo index que venía en la plantilla lo pasamos a la carpeta view y lo


renombramos como layout.blade.php

 Miramos en el código cual es el encabezado y el footer que es lo que forma


parte en si del layaout. Y cuál es el contenido central, que es el que varía
entre una página y otra.
 Cortamos ese contenido central y lo pasamos a una vista la cual
llamaremos home.blade.php (si laravel viene con una vista home la
podemos borrar para crear esta nueva)
 En el layout.blade.php suprimimos el contenido central y donde estaba el
contenido central colocamos las siguientes líneas. @yield(‘content’)

Nota: También podemos dejar el contenido central de la plantilla y encerrarlo


entre las etiquetas @section(‘content’) y @show

 En el archivo home.blade.php le decimos que extiende de layout con las


siguientes líneas @extends(‘’layout) y el contenido que los metemos
dentro de la línea @section(‘content’) y @stop para indicarle de donde a
donde va ir esa sección. Se pude cerrar con @stop pero también con
@endsection funcionan igual

Nota @extends(‘’layout) debe colocarse al inicio de la nueva hoja html sin


espacios antes.
3. Vamos a route.php (rutas) Las rutas predeterminadas con laravel podemos
borrarlas y crear ahora nuestra ruta para el controlador de las vistas.

Supongo que esta instrucción debe funcionar igual.

4. Vamos al controlador y creamos un controlador


Supongo que este que sigue funciona igual para laravel 5

Si abrimos el navegador se cargará la página sin los css.

5. Ahora colocamos las rutas correctas donde están los css y scripts.

 Abrimos el layout.blade.php y cambiamos la ruta del css

 Cambiamos la ruta omitiendo la carpeta publica pero para que funcione


colocamos la ruta entre llaves usando el helper asset el cual nos apunta a la
carpeta public.
Lo mismo podemos hacer con los javascript.

Crear link:

Usamos la clase HTML con el método link, le pasamos la ruta que va a abrir entre comillas
users/créate y luego separado por coma y entre comillas el texto que el usuario va a ver
como link.

Asignar atirbutos, lo podemos hacer agregando un array, por ejemplo en el que podemos
poner los atributos class, value, etc

Crear un formulario con el helper form.

Hacer un Select.
BOOTSTRAP

Usar bootstrap online

Vamos a la siguiente dirección http://www.bootstrapcdn.com/bootswatch/

Escogemos el tema, combinación de colores, Desplegamos y vamos a html.

Compilamos el liknk y lo pegamos en el código de nuestra página. Es bueno tener en


cuenta que los link para los css los ponemos en la parte de arriba de la página y los de
JavaScript en la parte inferior. Para este caso a copiar dos link para css y dos link para Js.
Vamos a colocarlos en el orden en que se muestran.
Debajo de esta línea colocamos la siguiente inea que está en la pestaña de Font awesome.
O ingresando la url http://www.bootstrapcdn.com/fontawesome/ estos son para los
iconos fuentes.

Desplegamos y tomamos el link de html.


A hora los Js. Los colocamos al final de la página. Primero el Jquery de google
(https://developers.google.com/speed/libraries/ ) y seguidamente el Jquery de Bootstrap.
Deben estar en este orden.

Para jquery de bootsrap vamos a la página de inicio de bootstrap CDN, donde estabaos al
comienzo y desplegamos la pestaña de javascript complete y seleccionamos el de html.

Vous aimerez peut-être aussi