Neste capítulo, vamos integrar o Bootstrap 5 na nossa aplicação Laravel. Bootstrap é uma framework CSS popular, que facilita a criação de layouts responsivos e componentes de interface de utilizador. Vamos abordar como configurar o Bootstrap no nosso projeto e utilizá-lo para estilizar as nossas páginas de forma eficiente.
Passo 1: Instalar o Bootstrap
Primeiro, precisamos de instalar o Bootstrap no nosso projeto Laravel. Pode fazer isso utilizando o npm (Node Package Manager), que deve estar já instalado no seu ambiente de desenvolvimento.
npm install bootstrap sass
Passo 2: Configurar o Vite
O que é o vite.config.js? É o arquivo de configuração central do Vite, onde você define as opções e personalizações para o seu projeto. Ele é como um "centro de controle" que determina como o Vite irá processar seus arquivos, quais plugins que vai usar e como gerar os bundles finais.
// vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/sass/app.scss',
'resources/js/app.js'
],
refresh: true,
}),
],
});
Passo 3: Criar o arquivo app.scss:
Depois, crie uma nova folha de estilos no na pasta resources/sass
chamada app.scss
e importe o Bootstrap:
// resources/sass/app.scss
@import 'bootstrap/scss/bootstrap';
Passo 4: Atualizar os Ficheiros de Layout
O Laravel 11 oferece uma abordagem mais flexível para a criação de layouts, permitindo que se personalize a estrutura da aplicação de acordo com suas necessidades. Não existe o ficheiro app.blade.php por padrão como nas versões anteriores. O utilizador pode criar seus próprios layouts utilizando componentes Blade, herança de templates ou uma combinação de ambas as abordagens.
Para este exemplo vamos então criar o nosso template base app.blade.php
que ficará localizado em resources/views/layouts
já configurada para incluir o Bootstrap :
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Laravel 11 - Tutorial CRUD</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
</head>
<body>
<div class="container">
<h3 class=" mt-3">Laravel 11 - Tutorial CRUD</h3>
@yield('content')
<div class="row justify-content-center text-center mt-3">
<div class="col-md-12">
<p>
Master AI, before AI masters you: <a href="https://master-ai.eu"><strong>master-ai.eu</strong></a>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Passo 5: Ativar Bootstrap 5 no Paginator
Para facilitar a paginação e manter a consistência visual, vamos ativar o Bootstrap 5 no Paginator do Laravel. Adicione a linha Paginator::useBootstrapFive();
no ficheiro AppServiceProvider.php
.
// app/Providers/AppServiceProvider.php
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use Illuminate\Pagination\Paginator;
class AppServiceProvider extends ServiceProvider
{
public function boot()
{
Paginator::useBootstrapFive();
}
}
Passo 6: Compilar os Assets
A seguir, compile os assets para garantir que todas as mudanças foram aplicadas:
npm run build
Nota: em modo de desenvolvimento pode usar npm run dev
pois desta forma os assets são recompilados sempre que grava as alterações. Antes de fazer o deploy e passar para produção deve correr o npm run build
.
Exemplo Prático
Vamos criar uma página básica para mostrar como podemos utilizar o Bootstrap. Crie um novo ficheiro chamado index.blade.php
em resources/views
e adicione o seguinte conteúdo:
@extends('layouts.app')
@section('content')
<div class="row">
<div class="col-md-8">
<h1>Bem-vindo ao Laravel com Bootstrap 5</h1>
<p>Esta é uma página de exemplo para demonstrar a integração do Bootstrap 5 com Laravel.</p>
</div>
</div>
@endsection
@extends
- Extensão de um Layout: A diretiva @extends indica que uma view está "herdando" ou "estendendo" outro layout. Esse layout base geralmente contém a estrutura principal da página, como o cabeçalho, menu de navegação e rodapé.
- Reutilização de Código : Ao utilizar @extends, evitamos a repetição de código em todas as views, tornando o código mais organizado e fácil de manter.
@section
- Definição de Seções: A diretiva @section define uma seção dentro de uma view. Essa seção pode ser preenchida com conteúdo específico para cada view que estende o layout.
- Personalização de Layouts: As seções permitem que se personalize diferentes partes do layout em cada view, mantendo a estrutura geral do layout base.
Adicione às rotas uma nova entrada para poder visualizar a página
// routes/web.php
Route::get('/teste', function () {
return view('index');
});
Nota importante: sempre que alterar ficheiros de configuração do Laravel deve correr sempre o comando
php artisan optimize
para garantir que as novas configurações sejam utilizadas.
Ative o servidor e pode visualizar a página em http://127.0.0.1:8000/teste
Resumo
Neste capítulo, aprendemos como ativar e configurar o Bootstrap 5 no nosso projeto Laravel.. Instalámos o Bootstrap, configurámos o Laravel Vite, atualizámos os ficheiros de layout principais e ativámos o Bootstrap 5 no Paginator. Além disso, mostramos um exemplo prático de como utilizar o Bootstrap numa página da nossa aplicação.