Paginação em Bootstrap 5
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
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
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.