PHP Laravel versión 13 - Historial de revisiones

Angelfg: /* Paso 5. Executar Vite */

2026-10-18T18:03:24Z

Paso 5. Executar Vite

Angelfg: /* Exemplo de formulario con Bootstrap e Blade */

2026-10-18T17:58:53Z

Exemplo de formulario con Bootstrap e Blade

Mostrar los cambios

Angelfg en 17:52 18 oct 2026

2026-10-18T17:52:21Z

Angelfg: /* Paso 5. Comprobar a configuración de Vite */

2026-10-18T17:48:51Z

Paso 5. Comprobar a configuración de Vite

Angelfg: /* Paso 5. Comprobar a configuración de Vite */

2026-10-18T17:46:12Z

Paso 5. Comprobar a configuración de Vite

Angelfg: /* Paso 1. Instalar Bootstrap */

2026-10-18T17:35:42Z

Paso 1. Instalar Bootstrap

Angelfg: /* Instalación */

2026-10-18T16:47:49Z

Instalación

Angelfg: /* Instalación */

2026-10-18T16:46:20Z

Instalación

Mostrar los cambios

Angelfg: /* Instalación */

2026-10-18T16:38:36Z

Instalación

Angelfg: /* Instalación */

2026-10-18T16:38:04Z

Instalación

@@ Línea 878: / Línea 878: @@
 Para desenvolver a aplicación executamos:
 <syntaxhighlight lang="bash">
-npm run dev
+composer run dev
 </syntaxhighlight>
 Para xerar os ficheiros optimizados para produción:

@@ Línea 342: / Línea 342: @@
 = Bootstrap e Tailwind en Laravel =
-== Introdución ==
 Laravel é un framework de PHP que permite desenvolver aplicacións web. Para crear a interface que ve o usuario, podemos utilizar HTML, CSS e JavaScript.
@@ Línea 352: / Línea 363: @@
 Laravel non obriga a utilizar ningunha delas. Podemos elixir a que mellor se adapte ás necesidades do noso proxecto.
-== Que é Bootstrap? ==
+=== Que é Bootstrap? ===
 '''Bootstrap''' é un framework de CSS que proporciona estilos e compoñentes preparados para utilizar nas nosas páxinas web.
@@ Línea 379: / Línea 390: @@
 Bootstrap encárgase de aplicar os estilos necesarios para que o botón teña unha aparencia adecuada.
-== Que é Tailwind CSS? ==
+=== Que é Tailwind CSS? ===
 '''Tailwind CSS''' é un framework CSS baseado en clases de utilidade.
@@ Línea 403: / Línea 414: @@
 Tailwind proporciona moita liberdade para personalizar a interface, pero require coñecer e combinar numerosas clases.
-== Diferenzas entre Bootstrap e Tailwind ==
+=== Diferenzas entre Bootstrap e Tailwind ===
 {| class="wikitable"
@@ Línea 439: / Línea 450: @@
 |}
-== Por que imos utilizar Bootstrap? ==
+=== Por que imos utilizar Bootstrap? ===
 Cando estamos aprendendo Laravel, o principal obxectivo é comprender o funcionamento do framework:
@@ Línea 482: / Línea 493: @@
 Deste xeito, podemos dedicar máis tempo a aprender Laravel e menos a deseñar os elementos HTML.
-== Como substituír Tailwind por Bootstrap en Laravel ==
+=== Como substituír Tailwind por Bootstrap en Laravel ===
 Laravel utiliza habitualmente '''Vite''' para procesar os ficheiros CSS e JavaScript.
@@ Línea 498: / Línea 509: @@
 Se o proxecto utiliza un kit de inicio con React, Vue, Inertia ou compoñentes dependentes de Tailwind, será necesario adaptar tamén esas interfaces.
-=== Paso 1. Instalar Bootstrap ===
+==== Paso 1. Instalar Bootstrap ====
 Abrimos unha terminal no directorio principal do proxecto Laravel.
@@ Línea 510: / Línea 521: @@
 Este comando instala Bootstrap e Popper, unha biblioteca que emprega bootstrap para posicionar elementos como ventanas emerxentes, tooltips,....
-=== Paso 2. Eliminar as referencias a Tailwind ===
+==== Paso 2. Eliminar as referencias a Tailwind ====
 Abrimos o ficheiro:
@@ Línea 528: / Línea 539: @@
 Non debemos eliminar regras CSS propias da aplicación que queiramos conservar.
-=== Paso 3. Importar Bootstrap ===
+==== Paso 3. Importar Bootstrap ====
 No ficheiro ''resources/css/app.css'' escribimos:
@@ Línea 540: / Línea 551: @@
 Deste xeito, Vite incorporará os estilos de Bootstrap á aplicación.
-=== Paso 4. Incorporar o JavaScript de Bootstrap ===
+==== Paso 4. Incorporar o JavaScript de Bootstrap ====
 Abrimos o ficheiro:
@@ Línea 556: / Línea 567: @@
 O JavaScript de Bootstrap permite utilizar compoñentes interactivos, como menús despregables, ventás modais e elementos despregables.
-=== Paso 5. Comprobar a configuración de Vite ===
+==== Paso 5. Comprobar a configuración de Vite ====
 Abrimos:
@@ Línea 597: / Línea 608: @@
 Simplemente debemos asegurarnos de que Vite procesa os ficheiros nos que importamos Bootstrap.
-=== Paso 6. Cargar os estilos nas vistas Blade ===
+==== Paso 6. Cargar os estilos nas vistas Blade ====
 Na vista principal da aplicación, comprobamos que exista a directiva:
@@ Línea 644: / Línea 655: @@
 * ''btn-primary'': utiliza a cor principal de Bootstrap.
-=== Paso 7. Compilar os recursos ===
+==== Paso 7. Compilar os recursos ====
 Durante o desenvolvemento executamos:
@@ Línea 660: / Línea 671: @@
 </syntaxhighlight>
-=== Paso 8. Desinstalar Tailwind (opcional) ===
+==== Paso 8. Desinstalar Tailwind (opcional) ====
 Unha vez comprobado que a aplicación funciona con Bootstrap e que xa non utiliza Tailwind, podemos eliminar as súas dependencias.

@@ Línea 566: / Línea 566: @@
 Por exemplo:
-<syntaxhighlight lang="javascript" >
+<syntaxhighlight lang="javascript" highlight="9">
 import { defineConfig } from 'vite';
 import laravel from 'laravel-vite-plugin';

@@ Línea 566: / Línea 566: @@
 Por exemplo:
-<syntaxhighlight lang="javascript">
+<syntaxhighlight lang="javascript" >
 import { defineConfig } from 'vite';
 import laravel from 'laravel-vite-plugin';
 export default defineConfig({
      plugins: [
-         laravel([
+         laravel({
-             'resources/css/app.css',
+             input: ['resources/css/app.css', 'resources/js/app.js'],
-            'resources/js/app.js',
+            refresh: true,
-         ]),
+            fonts: [
      ],
 });
 </syntaxhighlight>

@@ Línea 508: / Línea 508: @@
 </syntaxhighlight>
-Este comando instala Bootstrap e Popper, unha biblioteca utilizada por determinados compoñentes interactivos.
+Este comando instala Bootstrap e Popper, unha biblioteca que emprega bootstrap para posicionar elementos como ventanas emerxentes, tooltips,....
 === Paso 2. Eliminar as referencias a Tailwind ===

@@ Línea 219: / Línea 219: @@
 <br />
 = Instalación =
 * A instalación se fai dunha forma moi doada...
@@ Línea 271: / Línea 287: @@
 * Despois escolleremos a opción de Blade como frontend.
@@ Línea 329: / Línea 339: @@
 <br />
 = Bootstrap e Tailwind en Laravel =

← Revisión anterior		Revisión del 16:38 18 oct 2026
Línea 280:		Línea 280:


−	* Se no log da sección de vite vos aparecen moitas mensaxes de 'deprecated' es debido á versión de BootStrap que non está actualizada.	+	* Se no log da sección de vite vos aparecen moitas mensaxes de 'deprecated' é debido á versión de BootStrap que non está actualizada.
	: Para que non aparezan as mensaxess podedes poñer no arquivo '''vite.config.js''' que se atopa no raíz do proxecto o seguinte:		: Para que non aparezan as mensaxess podedes poñer no arquivo '''vite.config.js''' que se atopa no raíz do proxecto o seguinte:

@@ Línea 266: / Línea 266: @@
 * '''Escribe "No" / "None":''' Se queres un proxecto completamente limpo (por exemplo, para construír só unha API REST ou se prefires crear a túa propia autenticación e interface desde cero).
 : '''NO NOSO CASO ESCOLLEREMOS NON'''
@@ Línea 283: / Línea 284: @@
-<syntaxhighlight lang="php" syntaxlight="19-31">
+<syntaxhighlight lang="php" highlight="19-31">
 import { defineConfig } from 'vite';
 import laravel from 'laravel-vite-plugin';