Header Ads Widget

Ticker

6/recent/ticker-posts

Cómo crear un diseño de panel de Bootstrap

 Cómo crear un diseño de panel de Bootstrap


En este tutorial, nos tomaremos un poco de tiempo para centrarnos en el diseño del panel de arranque de esta aplicación. Los paneles en bootstrap son una buena forma de crear espacio y proporcionar un diseño visualmente agradable. En la versión 4, probablemente usaríamos Bootstrap Cards, que también son un buen elemento de diseño. Sin embargo, por ahora, nos ocuparemos de las ideas de diseño de paneles, incluida la creación de un mejor diseño del panel de arranque y cómo centrar un panel de arranque. También veremos cómo mover los elementos de navegación a su propia vista parcial vile y crear un enlace para que los usuarios registrados vean sus hilos.


Hacer un mejor diseño de panel de Bootstrap

Hemos estado usando paneles de Bootstrap en esta aplicación y, como saben, un panel en bootstrap es solo un cuadro bordeado con algo de relleno alrededor del contenido. En nuestra página principal, no hay mucho espacio entre los paneles, simplemente se entrelazan todos. Podemos solucionarlo con el siguiente marcado que proporcionará un mejor efecto visual.

index.blade.php

diseño del panel de arranque


Cómo centrar un panel de Bootstrap

Nuestra página principal del hilo se ve mejor ahora. ¿Qué tal si hacemos que la página de perfil se vea bien también? Lo que haremos es reducir el ancho del panel en la página del perfil y centrarlo. Para centrar el panel de arranque, puede envolverlo dentro de un div y hacer uso de la clase.offset en Bootstrap.

show.blade.php

Cómo centrar un panel de Bootstrap


Creación de una vista parcial de navegación

La vista de diseño de app.blade.php se está volviendo un poco hinchada. Podemos solucionarlo extrayendo los elementos de navegación a su propio archivo de vista parcial. Actualizaremos app.blade.php para hacer una simple llamada a @include ('layout.nav'), el lugar todo el marcado de navegación en ese archivo nav.blade.php. Tenga la seguridad de que todo funciona igual una vez que se completa esta refactorización.
app.blade.php

nav.blade.php


Crear un enlace de perfil para usuarios registrados

Ahora podemos agregar un enlace al lado derecho del menú de navegación. Actualmente, la aplicación comprueba si el usuario ha iniciado sesión y, si lo está, se muestra un enlace de cierre de sesión. Agreguemos otro enlace para los usuarios registrados que se vinculará directamente a su perfil para que puedan ver todos sus hilos. Por supuesto, esto es bastante sencillo. Busque el código en nav.blade.php y edítelo donde esté resaltado. Tenga en cuenta que podemos vincularnos a una ruta con nombre ya que la habíamos configurado anteriormente.

Crear un enlace de perfil para usuarios registrados


Cómo crear un resumen de diseño de panel Bootstrap

con los ajustes que hemos hecho a nuestro marcado html en este tutorial, tenemos nuestros paneles de arranque con un aspecto agradable y elegante. Ahora sabemos cómo espaciar adecuadamente los paneles, además de centrarlos en la página.

Publicar un comentario

0 Comentarios