Header Ads Widget

Ticker

6/recent/ticker-posts

Usando Bootstrap 4 en lugar de Tailwind en Laravel 8 con el paquete Laravel / UI v3

 En este artículo, veremos cómo instalar Bootstrap 4 con Laravel 8 usando el laravel/uipaquete de scaffolding v3 y también cómo usar Bootstrap para las vistas de paginación en lugar del CSS Tailwind predeterminado.

Laravel 8 usa Jetstream y Tailwind por defecto

Laravel 8 hace uso de Jetstream de forma predeterminada para el andamio de aplicaciones en lugar del laravel/uipaquete.

Jetstream usa Tailwind en lugar de Bootstrap 4 para estilos CSS y viene con dos pilas: Livewire que usa Blade para plantillas e Inertia.js que usa Vue.js.

El equipo de Laravel recomienda a los desarrolladores usar Jetstream para los nuevos proyectos de Laravel 8, pero también han actualizado el laravel/uipaquete a la versión 3 para usarlo con Laravel 8, especialmente si está actualizando su aplicación Laravel 7 anterior a la última versión.

Para aquellos de ustedes que usan el antiguo paquete "laravel / ui" con Laravel 8, hemos movido el soporte de Laravel 8.x a la rama 3.x. Actualice sus archivos composer.json en consecuencia. Pío

Además, consulte ¿Podemos usar laravel / ui en laravel 8 como en laravel 7?

Instalación de Bootstrap 4 en el proyecto Laravel 8

Incluso si Laravel 8 viene con Tailwind de forma predeterminada, aún puede usar cualquier marco CSS para diseñar sus aplicaciones.

Para Laravel8, podemos instalar Bootstrap 4 de la forma habitual, es decir, incluyendo los archivos en su plantilla Blade principal o usar el laravel/uipaquete v3 instalándolo desde Composer.

Primero, crea un nuevo proyecto de Laravel 8 usando el siguiente comando:

$ composer create-project laravel/laravel --prefer-dist laravel8-bootstrap

A continuación, navegue hasta la carpeta de su proyecto e instale la última versión del laravel/uipaquete de la siguiente manera:

$ cd laravel8-bootstrap
$ composer require laravel/ui

A continuación, instale Bootstrap 4 en su proyecto de Laravel 8 usando el siguiente comando:

$ php artisan ui bootstrap

Finalmente, debe instalar el paquete bootstrap y sus dependencias desde npm y compilar los activos usando los siguientes comandos:

$ npm install
$ npm run dev

 DONE  Compiled successfully in 22806ms                               6:13:23 PM

       Asset      Size   Chunks             Chunk Names
/css/app.css  4.21 MiB  /js/app  [emitted]  /js/app
  /js/app.js  1.33 MiB  /js/app  [emitted]  /js/app

Usando Bootstrap 4 en sus plantillas Blade de Laravel 8

Después de ejecutar los comandos anteriores, compilará los archivos Sass de Bootstrap 4 en un solo archivo CSS en la publiccarpeta de su proyecto. Puede incluir los archivos JS y CSS en sus plantillas Blade de la siguiente manera:

<!doctype html>
<html lang="">
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="" defer></script>
    <link href="" rel="stylesheet">
</head>

<body>
    <h1>Laravel 8 with Bootstrap 4 Styles</h1>
</body>
</html>

Personalización de la vista de paginación con Bootstrap 4

Según los documentos oficiales de Laravel 8 :

De forma predeterminada, las vistas renderizadas para mostrar los enlaces de paginación son compatibles con el marco CSS Tailwind. Sin embargo, si no está utilizando Tailwind, puede definir sus propias vistas para representar estos enlaces

Laravel incluye vistas de paginación creadas con Bootstrap CSS. Para usar estas vistas en lugar de las vistas Tailwind predeterminadas, puede llamar al useBootstrapmétodo del paginador dentro de su AppServiceProvider:

use Illuminate\Pagination\Paginator;

public function boot()
{
    Paginator::useBootstrap();
}

Consulte Cómo solucionar el problema de paginación de la interfaz de usuario de laravel 8

Conclusión

En este artículo, hemos visto cómo instalar Bootstrap 4 con Laravel 8 usando el laravel/uipaquete de scaffolding v3 y también cómo usar Bootstrap para las vistas de paginación en lugar de Tailwind CSS.

Publicar un comentario

0 Comentarios