Criar paginação no Bootstrap 5 é simples e direto. Veja como você pode fazer isso:
1. Inclua Bootstrap CSS e JavaScript: Primeiro, certifique-se de incluir os arquivos CSS e JavaScript do Bootstrap em seu projeto. Você pode baixar o Bootstrap em seu site oficial ou usar um CDN como:
```html
```
2. Crie a marcação de paginação: Em seguida, você precisa criar a marcação HTML para a paginação. A estrutura básica inclui uma lista não ordenada (`
`) com elementos `li` representando cada número de página ou controle de navegação (como anterior e próximo).
- A classe `page-item` é usada para cada elemento de paginação, e a classe `active` é adicionada ao número da página atual para destacá-la. - Você pode ajustar os números de página, os controles de navegação e o número de números de página exibidos com base em seus requisitos.
3. Adicionar funcionalidade de paginação: Para adicionar funcionalidade à paginação, você precisará usar JavaScript. Bootstrap fornece métodos e eventos JavaScript para paginação. Você pode manipular eventos de clique em links de paginação e executar solicitações AJAX ou atualizar o conteúdo da página dinamicamente com base na página selecionada.
Aqui está um exemplo simples de como adicionar manipuladores de eventos de clique:
```javascript // Obtém todos os links de paginação var pagelinks =document.querySelectorAll('.page-link');
//Adiciona manipulador de eventos de clique a cada link pagelinks.forEach (função (link) { link.addEventListener('clique', function(e) { e.preventDefault();
//Obtém o número da página no link var página =link.textContent;
// Carrega o conteúdo da página especificada usando AJAX ou outros métodos loadPageContent(página); }); });
//Função para carregar o conteúdo da página especificada function loadPageContent(página) { // Chamada AJAX ou outro código para carregar o conteúdo da página especificada //Atualiza o conteúdo da página } ```
Ao lidar com eventos de clique em links de paginação, você pode carregar conteúdo dinamicamente com base na seleção do usuário.
Lembre-se de ajustar a marcação HTML e o código JavaScript de acordo com seu caso de uso e requisitos específicos. Bootstrap 5 oferece opções adicionais de personalização e estilos de paginação, que você pode explorar em sua documentação.