Paginação em Bootstrap 5

Uma paginação se torna uma necessidade se houver várias páginas da web no seu site, porque ajuda um usuário a navegar facilmente por essas páginas e também conscientiza o usuário da página em que ele/ela está atualmente. Se você está projetando seu site usando o bootstrap 5 e deseja aprender a criar e estilizar uma paginação usando o bootstrap 5, leia o artigo até o fim.

Como criar uma paginação usando o bootstrap 5

Para fazer uma paginação, atribua o .paginação classe para uma lista não ordenada, .Página-Item classe para os itens da lista e .link da página classe para o link presente dentro de cada item da lista.

Html

• «


• 1


• 2


• 3


• 4


• »

O código acima gera uma paginação mostrando a numeração de 1 a 4, enquanto e Laquo e Raquo são nomes de entidades para apontar para a esquerda e apontar aspas de ângulo duplo, respectivamente. Essas entidades ajudam o usuário a mover a numeração da paginação para trás e para frente.

Saída

A saída exibe uma paginação básica.

Como atribuir estados ativos e deficientes a uma paginação

O estado ativo de uma paginação mostra a página em que o usuário está atualmente, enquanto o estado de desativação torna um link sem folha e conscientiza o usuário de que não há mais páginas para navegar.

Html

• Voltar


• 1


• 2


• 3


• 4


• Próximo

O snippet de código criará uma paginação com o item da lista rotulado como “Back” sendo atribuído ao estado desativado, enquanto isso, o estado ativo foi atribuído ao item da lista rotulado como “4”, o que indica que o usuário está atualmente na quarta página.

Saída

Os estados ativos e deficientes foram atribuídos com sucesso à paginação.

Como escalar uma paginação

Se você deseja escalar sua paginação, use .paginação-sm classe para criar paginações de pequeno porte, enquanto que use o .paginação-lg Para gerar paginações de tamanho grande.

Html

O código acima gerará paginações pequenas e grandes para demonstrar a comparação entre os tamanhos de ambas as paginações.

Saída

É assim que você pode escalar sua paginação.

Como definir o alinhamento de uma paginação

Uma paginação por padrão está posicionada no canto esquerdo de uma página, no entanto, se você deseja colocá -lo no centro, use o .justificar-content-center aula, considerando que, use o .justificar o conteúdo do conteúdo para colocá -lo no canto direito da página.

Html

O código acima usa o .Justify-Content-Center Class, portanto, a paginação criada como resultado será colocada no centro da página.

Saída

Esta é uma paginação posicionada central.

Agora vamos posicionar a paginação no canto direito da página.

Html

O código acima usa o .Justify-Content-thend Class, portanto, a paginação será colocada no final da página.

Saída

Esta é uma paginação posicionada certa.

Conclusão

Uma paginação pode ser criada atribuindo o .paginação classe para uma lista não ordenada, .Página-Item classe para os itens da lista e .link da página classe para o link presente dentro de cada item da lista. Se você deseja escalar uma paginação, use o .paginação-sm, e .paginação-lg Aulas. Além disso, para alinhar uma paginação no centro ou no final de uma página, use o .justificar-content-center, e .justificar o conteúdo do conteúdo classes respectivamente. Por fim, você também pode atribuir estados ativos e desbalados aos itens de paginação.