11. Ativar Bootstrap 5

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.

<< 10. Atualizar o código da... Índice 12. Criação das vistas do... >>