107. Vista index responsive

Comentarios:

• 

  Victor Arana Flores hace 1 día Destacado

  Para crear una vista index responsive en Laravel 10, podemos utilizar Bootstrap, un framework front-end que nos proporciona una amplia variedad de componentes y estilos predefinidos para crear interfaces de usuario responsivas.

  Lo primero que debemos hacer es incluir los archivos CSS y JavaScript de Bootstrap en nuestra aplicación Laravel. Podemos hacerlo utilizando un CDN o descargando los archivos y guardándolos en la carpeta pública de nuestra aplicación.

  A continuación, podemos crear nuestra vista index utilizando el sistema de plantillas Blade de Laravel. Por ejemplo, podemos crear una tabla para mostrar una lista de elementos utilizando las clases de Bootstrap para hacerla responsiva. El código de ejemplo podría ser el siguiente:

  <table class="table table-responsive">
     <thead>
         <tr>
             <th>#</th>
             <th>Nombre</th>
             <th>Descripción</th>
             <th>Acciones</th>
         </tr>
     </thead>
     <tbody>
         @foreach($items as $item)
         <tr>
             <td>{{ $item->id }}</td>
             <td>{{ $item->name }}</td>
             <td>{{ $item->description }}</td>
             <td>
                 <a href="{{ route('items.show', $item->id) }}" class="btn btn-sm btn-primary">Ver</a>
                 <a href="{{ route('items.edit', $item->id) }}" class="btn btn-sm btn-success">Editar</a>
                 <form action="{{ route('items.destroy', $item->id) }}" method="POST" style="display: inline-block;">
                     @csrf
                     @method('DELETE')
                     <button type="submit" class="btn btn-sm btn-danger">Eliminar</button>
                 </form>
             </td>
         </tr>
         @endforeach
     </tbody>
  </table>

  En este ejemplo, utilizamos la clase table-responsive para hacer que la tabla sea responsive y se adapte al tamaño de pantalla del dispositivo. También utilizamos las clases btn, btn-sm y btn-primary, btn-success y btn-danger para crear botones responsivos con diferentes estilos.

  Además, utilizamos la directiva @foreach de Blade para iterar sobre la colección de elementos $items y mostrarlos en la tabla. También utilizamos las funciones route, csrf_field y method_field de Laravel para generar las URL y los campos de formulario necesarios para realizar las acciones de ver, editar y eliminar un elemento.

  En resumen, para crear una vista index responsive en Laravel 10 podemos utilizar Bootstrap y las clases y componentes que nos proporciona para hacer que nuestra tabla se adapte a diferentes tamaños de pantalla y sea fácil de navegar en dispositivos móviles y de escritorio.