Vista index responsive
Comprar curso

133. Vista index responsive

En este capítulo, descubre cómo crear una vista index responsive en Laravel 10. Aprende cómo utilizar Bootstrap para crear una vista index que se adapte a diferentes tamaños de pantalla.


1 comentarios

Inicia sesión para comentar

Comentarios:

  • Victor Arana Flores

    Victor Arana Flores hace 11 meses 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.