instalar Bootstrap en Laravel
Se qué utilizar asset hace una referencia a nuestra app/public pero hay alguna manera de crear otro enlace es decir, para tener una mejor estructura y tener referencia de las rutas.
Ejemplo:
public
---assets
---images
---thumbnails
en mi blade tengo que colocar:
{{asset('/images/image-1.jpg')}}
Lo único que necesitarás para seguir este tutorial son ciertos conocimientos básicos acerca de la línea de comandos.
También necesitarás tener instalado tanto Node como el gestor de paquetes npm en tu sistema operativo.
Finalmente, también deberás tener el gestor de paquetes Composer instalado en tu sistema.
Configuración inicial
Si aún no has instalado el instalador de Laravel en tu sistema, abre una ventana de terminal e instálalo mediante el siguiente comando:
composer global require laravel/installerSi todavía no has creado un proyecto, usa el siguiente comando para crear un proyecto con Laravel, reemplezando proyecto por el nombre que le quieras dar al mismo:
laravel new proyectoLuego accede al directorio del proyecto y usa el siguiente comando para instalar las dependencias de Laravel:
composer installInstalación de Bootstrap
Para instalar Bootstrap en Laravel basta con que abras una ventana de terminal y sigas los pasos que se describen a continuación:
- Navega hasta el directorio de tu proyecto y ejecuta el siguiente comando para instalar el paquete laravel/ui:
composer require laravel/ui - Una vez hayas instalado el paquete anterior, debes usar el comando
artisanpara instalar la última versión de Bootstrap en Laravel:php artisan ui bootstrapAlternativamente, también puedes usar el siguiente comando para instalar las páginas por defecto de registro, login y gestión de contraseñas de Laravel:
php artisan ui bootstrap --auth - Finalmente ya solo debes descargar el paquete de Bootstrap junto a sus dependencias, entre las cuales se encuentra jQuery:
npm install - Y con esto ya debería estar Bootstrap instalado.
¿Qué es Bootstrap?
Bootstrap es un marco de desarrollo web gratuito y de código abierto. Está diseñado para facilitar el proceso de desarrollo web de sitios web con capacidad de respuesta para dispositivos móviles al proporcionar una colección de sintaxis para diseños de plantillas.
En otras palabras, Bootstrap ayuda a los desarrolladores web a crear sitios web más rápido, ya que no necesitan preocuparse por los comandos y funciones básicos. Consiste en scripts basados en HTML, CSS y JS para varias funciones y componentes relacionados con el diseño web.
Bootstrap 5 es la versión más reciente de Bootstrap.
Características de Bootstrap
1. Fácil para empezar
Es bastante fácil, para empezar. Ser fácil de usar es probablemente la primera cualidad que hace que Bootstrap sea muy atractivo.
2. LESS y archivos CSS
Bootstrap no solo ofrece archivos LESS, sino que también incluye los archivos CSS antiguos.
3. Fácilmente personalizable
A pesar de que Bootstrap está diseñado en cuadrículas, diseños y componentes receptivos de 12 columnas, también es muy fácil de personalizar. Ya sea que necesite una cuadrícula fija o receptiva, puede ser posible haciendo algunos cambios. Las columnas de compensación y anidamiento también son fáciles de hacer en cuadrículas de navegador basadas en CPU y en dispositivos móviles.
4. Clases de utilidad receptivas
Otra característica destacada de Bootstrap son sus clases de utilidad receptivas. Mediante el uso de clases de utilidad receptivas, se puede hacer que un contenido en particular aparezca u oculte solo en los dispositivos, según el tamaño de la pantalla que se utilice. Esta característica es extremadamente útil para los diseñadores que desean crear una versión de sus sitios web para dispositivos móviles y tabletas.
5. Componentes de Bootstrap
Algunos de los componentes que vienen prediseñados en Bootstrap son:
- Listas deplegables
- Botón
- Navegación
- Insignias
- Alertas
- Barra de progreso
6. Menú desplegable de componentes
El menú de componentes desplegable es una característica adicional de respuesta de un sitio web. Para incluirlo en un sitio web, se prueban muchos complementos diferentes, en su mayoría basados en Java. Pero, a través de Bootstrap y sus sencillas opciones de personalización, esto se puede hacer fácilmente en cuestión de minutos.
7. Plantillas de arranque
Las plantillas fácilmente disponibles facilitan a los usuarios sin experiencia la creación de un sitio web siguiendo un tutorial simple o una demostración disponible en Bootstrap.
¿Qué es Vite?
Vite (la palabra francesa para "rápido", pronunciado /vit/, como "veet") es una herramienta de compilación que tiene como objetivo proporcionar una experiencia de desarrollo más rápida y ágil para proyectos web modernos .
Características de Vite
- Inicio instantáneo del servidor
- Lightning Fast HMR (reemplazo de módulo caliente)
- Compatibilidad con TypeScript, JSX, CSS y más.
- Construcción optimizada
- Complementos universales
- API completamente tipificadas
Laravel acaba de lanzar "laravel 9.19" con un cambio importante. No hay más archivos webpack.mix.js en la raíz de laravel en lugar del archivo webpack.mix.js . Se introduce el archivo vite.config.js .
En esta sección instalaremos bootstrap 5 en laravel 9 con vite. En laravel 9.19 viene con la herramienta vite, instalaremos bootstrap 5 en laravel 9 con larave ui.
Cómo instalar Bootstrap 5 en Laravel 9 con Vite
Utilice los siguientes pasos para instalar Bootstrap 5 en laravel 9 con Vite.
- Instalar proyecto Laravel
- Instale la interfaz de usuario de Laravel para Bootstrap 5
- Configurar andamios de autenticación con Bootstrap 5
- Instalar dependencias de NPM
- Importar ruta vite.config.js Bootstrap 5
- Actualizar bootstrap.js
- Importar Bootstrap 5 SCSS en la carpeta JS
- Reemplace mix () con la directiva @vite Blade
- Ejecutando el Comando Vite para construir el Archivo de Activos
- Inicie el servidor local
Paso 1: instalar el proyecto Laravel
Instalando una nueva aplicación laravel nueva, así que dirígete a la terminal, escribe el comando y crea una nueva aplicación laravel.
composer create-project --prefer-dist laravel/laravel:^9.0 laravel9-bootstrap5-viteo, si ha instalado el instalador de Laravel como una dependencia global del compositor:
laravel new laravel9-bootstrap5-vitePaso 2: Instale la interfaz de usuario de Laravel para Bootstrap 5
A continuación, debe ejecutar el siguiente comando en su terminal
composer require laravel/uiPaso 3: Configurar andamios de autenticación con Bootstrap 5
php artisan ui bootstrap --authPaso 4: Instale las dependencias de NPM
Ejecute el siguiente comando para instalar dependencias frontend:
npm installPaso 5: Importe vite.config.js Ruta Bootstrap 5
Primero, debe cambiar vite.config.js y agregar la ruta de arranque 5 y eliminar resources/css/app.css
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path'
export default defineConfig({
plugins: [
laravel([
'resources/js/app.js',
]),
],
resolve: {
alias: {
'~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
}
},
});Paso 6: Actualizar bootstrap.js
Necesitamos usar importen lugar de require.
import loadash from 'lodash'
window._ = loadash
import * as Popper from '@popperjs/core'
window.Popper = Popper
import 'bootstrap'
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
import axios from 'axios'
window.axios = axios
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
// import Echo from 'laravel-echo';
// window.Pusher = require('pusher-js');
// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: process.env.MIX_PUSHER_APP_KEY,
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
// forceTLS: true
// });Paso 7: Importar Bootstrap 5 SCSS en la carpeta JS
Ahora necesita importar la ruta SCSS de arranque 5 en sus recursos/js/app.js o recursos/js/bootstrap.js
recursos/js/app.js
import './bootstrap';
import '../sass/app.scss'Paso 8: Reemplace mix() con la directiva @vite Blade
Cuando use Vite, deberá usar la directiva @vite Blade en lugar del ayudante mix() . elimine el asistente de mezcla y agregue la directiva @vite .
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}" defer></script>usar la directiva @vite
@vite(['resources/js/app.js'])vistas/diseños/aplicación.blade
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
@vite(['resources/js/app.js'])
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav me-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ms-auto">
<!-- Authentication Links -->
@guest
@if (Route::has('login'))
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
@endif
@if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
@endif
@else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }}
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
@csrf
</form>
</div>
</li>
@endguest
</ul>
</div>
</div>
</nav>
<main class="py-4">
@yield('content')
</main>
</div>
</body>
</html>
Paso 9: Ejecutar Vite Command para crear un archivo de activos
Debe ejecutar el comando de compilación npm para crear un arranque de activos 5.
npm run buildPaso 10: Inicie el servidor local
Ahora abra una nueva terminal y ejecute el siguiente comando desde su terminal para ejecutar el servidor de desarrollo.
php artisan servey navegue al siguiente enlace http://localhost:8000/
Gracias por leer este blog.
Puede encontrar el repositorio de GitHub aquí suresh-ramani/laravel9-bootstrap5-vite .
Lea también: Cómo instalar React en Laravel 9 con Vite
Si desea administrar su servidor VPS / VM sin tocar la línea de comando, vaya y consulte este enlace . ServerAvatar le permite configurar rápidamente sitios web de WordPress o PHP personalizados en VPS / VM en cuestión de minutos. Puede alojar múltiples sitios web en un solo VPS/VM, configurar certificados SSL y monitorear el estado de su servidor sin siquiera tocar la interfaz de línea de comandos .
Comentarios
Publicar un comentario