Header Ads Widget

Ticker

6/recent/ticker-posts

Diseños Simples De Laravel 6 Usando Blade Y Bootstrap 4

 Este tutorial ayuda a crear el diseño del tema usando laravel 6 y bootstrap 4. Estoy usando el motor de plantilla Blade para crear el diseño del tema en laravel 6.

El laravel es muy potente y popular marco en PHP. Laravel ayuda a crear aplicaciones web complejas de manera fácil. Blade es uno de ellos, un poderoso motor de plantillas en php, que generará el diseño del tema en formato HTML.

Todos los archivos blade utilizan .blade.phpla extensión de archivo y se almacenan en el resources/viewsdirectorio (laravel 6). Los motores Blade proporcionan vistas rápidas sin ningún gasto general debido a las vistas en caché hasta que se modifican.

En este tutorial, convertiremos un tema HTML Bootstrap simple en un diseño de laravel. Estoy convirtiendo la plantilla HTML de Bootstrap 4 en un diseño de laravel usando la funcionalidad de diseño parcial. Estoy usando el tema Cool Admin .

El CoolAdmin es un libre para usar Bootstrap 4 plantilla de administración. Esta plantilla utiliza los estilos Bootstrap 4 junto con una variedad de potentes complementos y herramientas de jQuery para crear un marco potente para crear paneles de administración o paneles de back-end.

También puede consultar otros tutoriales recomendados de Lumen / Laravel,


laravel-6-plantilla-diseño

Modificaremos Las Siguientes Carpetas Y Archivos De Laravel 6

  • pública: Esta carpeta contendrá cssjsy la imagescarpeta y los archivos.
  • recursos / vistas: esta carpeta contendrá todos los archivos de vistas.
  • recursos / vistas / diseños: esta carpeta contendrá todos los archivos de diseño.
  • recursos / vistas / parciales: esta carpeta contendrá todos los archivos parciales de diseño como encabezado , pie de página y barra lateral, etc.

Creemos los siguientes archivos de plantilla separados, estos archivos tendrán una parte separada del diseño del tema:

  • /resources/views/partials/header.blade.php: este archivo contendrá la parte del encabezado de la plantilla html.
  • /resources/views/partials/sidebar.blade.php: este archivo contendrá la parte de la barra lateral de la plantilla html.
  • /resources/views/partials/footer.blade.php: este archivo contendrá la parte del pie de página de la plantilla html.
  • /resources/views/layouts/master.blade.php: este archivo se utilizará para incluir los archivos parciales anteriores y crear una plantilla de diseño maestra que se procesará en cada solicitud de laravel.

Pasos Sencillos Para Convertir Bootstrap Theme En Diseño De Plantilla Laravel

Paso 1: Descarga el tema Cool Admin .
Paso 2: Mueva todos los archivos y carpetas de temas js , css , imágenes y fuentes a la carpeta laravel-blog /public.
Paso 3: Creó un nuevo views/layouts/master.blade.phparchivo y colocó los siguientes códigos en este archivo.

@include ('partials.header') @include ('partials.sidebar')

@yield ('contenido')
@include ('partials.footer')

Puede ver el código anterior, estoy usando dos directivas
@include: Esta directiva solía incluir archivos parciales.
@yield: Esta directiva se utiliza para establecer contenido en la sección, que es el área de contenido principal del diseño.

Ahora hemos creado un masterdiseño que generará una plantilla dinámica utilizando archivos de vista parcial. Hemos dividido la página del tema en páginas parciales y la hemos incluido en el archivo de diseño maestro.

Paso 5: Creó un nuevo views/partials/header.blade.phparchivo y pegó el código html del encabezado del tema Cool Admin.
Paso 6: Creó un nuevo views/partials/sidebar.blade.phparchivo y pegó el código html de la barra lateral del tema Cool Admin.
Paso 7: Creó un nuevo views/partials/footer.blade.phparchivo y pegó el código html del pie de página del tema Cool Admin.

Hemos creado un diseño maestro que tendrá todas las secciones parciales del tema, excepto el área de contenido, porque el contenido cambiará según la solicitud / rutas, pero el encabezado, el pie de página y la barra lateral no cambiarán.

Cómo Usar El Diseño En Laravel 6

Definiremos el nombre del diseño en cada plantilla y lo vincularemos con las rutas. Las rutas ayudan a encontrar el nombre correcto de la plantilla que se representará.

Crear Una Nueva Vista De Plantilla

Creemos un nuevo archivo home.blade.php en la carpeta / views y agreguemos el siguiente código en este archivo.

esta es mi pagina de inicio

Como puede ver, he usado el nombre de diseño "maestro", de lo contrario, tomará el diseño predeterminado de laravel.

Definir Rutas En Laravel 6

Ahora defina las rutas y llame a la vista de arriba, agreguemos la entrada de abajo en el archivo routes / web.php.

Ahora ejecute la aplicación laravel usando php artisan servey navegue http://codeigniter-blog.com , puede obtener el diseño de la página del tema Cool Admin con el mensaje 'esta es mi página de inicio' .

Conclusión:

Esto ayuda posterior para entender Laravel6 Archivo de tema structure.We han integrado de arranque 4 tema con laravel 6. La página laravel 6 plantilla es creada por la cuchilla template.You puede obtener más información sobre el diseño y la cuchilla laravel en la web oficial laravel

Publicar un comentario

0 Comentarios