Tutorial Básico do Bootstrap

Plugins do Bootstrap

Etiquetas Bootstrap Navegação de Pão Bootstrap

Paginação Bootstrap

Este capítulo explicará as características de paginação suportadas pelo Bootstrap. A paginação (Pagination) é uma lista não ordenada, o Bootstrap trata a paginação da mesma forma que outros elementos de interface.

Paginação (Pagination)

A tabela a seguir lista as classes de manipulação de paginação fornecidas pelo Bootstrap.

Classe	Descrição	Código de exemplo
.pagination	Adicione essa classe para exibir a paginação na página.	<ul> 　　<li><a href="#">«/a></li> 　　<li><a href="#">1</a></li> 　　....... </ul>
.disabled, .active	Você pode personalizar os links, usando .disabled para definir links não clicáveis, usando .active para indicar a página atual.	<ul> 　　<li><a href="#">«/a></li> 　　<li><a href="#">1<span>(current)</span></a></li> 　　....... </ul>
.pagination-lg, .pagination-sm	Use essas classes para obter itens de diferentes tamanhos.	<ul>.../ul> <ul>.../ul> <ul>.../ul>

Paginação padrão

Os exemplos a seguir mostram as classes discutidas na tabela acima .pagination Uso:

Exemplos online

Exemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Paginação padrão</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js></script>
</head>
<body>
<ul class="pagination">
	<li><a href="#">«/a></li>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">»</a>/a></li>
</ul>
</body>
</html>

Teste e veja ‹/›

Os resultados estão exibidos a seguir:

Estado da paginação

Os exemplos a seguir mostram as classes discutidas na tabela acima .disabled、.active Uso:

Exemplos online

Exemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Estado da paginação</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js></script>
</head>
<body>
<ul class="pagination">
	<li><a href="#">«/a></li>
	<li class="active"><a href="#">1</a></li>
	<li class="disabled"><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">»</a>/a></li>
</ul>
</body>
</html>

Teste e veja ‹/›

Os resultados estão exibidos a seguir:

Tamanho da paginação

Os exemplos a seguir mostram as classes discutidas na tabela acima .pagination-* Uso:

Exemplos online

Exemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Tamanho da paginação</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js></script>
</head>
<body>
<ul class="pagination pagination-lg">
	<li><a href="#">«/a></li>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">»</a>/a></li>
</ul><br>
<ul class="pagination">
	<li><a href="#">«/a></li>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">»</a>/a></li>
</ul><br>
<ul class="pagination pagination-sm">
	<li><a href="#">«/a></li>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">»</a>/a></li>
</ul>
</body>
</html>

Teste e veja ‹/›

Os resultados estão exibidos a seguir:

Paginação (Pager)

Se você quiser criar um link de paginação simples para fornecer navegação ao usuário, você pode fazer isso através da paginação. Como os links de paginação, a paginação também é uma lista não ordenada. Por padrão, os links são exibidos no centro. A tabela a seguir lista as classes que o Bootstrap usa para lidar com a paginação.

Classe	Descrição	Código de exemplo
.pager	Adicione essa classe para obter os links de paginação.	<ul> 　　<li><a href="#">Anterior/a></li> 　　<li><a href="#">Próximo/a></li> </ul>
.previous, .next	Use a classe .previous Alinhe os links para a esquerda, usando .next Alinhe os links para a direita.	<ul> 　　<li><a href="#">← Antigo</a>/a></li> 　　<li><a href="#">Novo →</a>/a></li> </ul>
.disabled	Adicione essa classe para desativar o botão correspondente.	<ul> 　　<li><a href="#">← Antigo</a>/a></li> 　　<li><a href="#">Novo →</a>/a></li> </ul>

Paginação padrão

Os exemplos a seguir mostram as classes discutidas na tabela acima .pager Uso:

Exemplos online

Exemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Paginação padrão/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js></script>
</head>
<body>
<ul class="pager">
	<li><a href="#">Anterior/a></li>
	<li><a href="#">Próximo/a></li>
</ul>
</body>
</html>

Teste e veja ‹/›

Os resultados estão exibidos a seguir:

Links alinhados

Os exemplos a seguir mostram as classes discutidas na tabela acima .previous, .next Uso:

Exemplos online

Exemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Links alinhados na paginação/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js></script>
</head>
<body>
<ul class="pager">
	<li class="previous"><a href="#">← Antigo</a>/a></li>
	<li class="next"><a href="#">Novo →</a>/a></li>
</ul>
</body>
</html>

Teste e veja ‹/›

Os resultados estão exibidos a seguir:

Estado de paginação

Os exemplos a seguir mostram as classes discutidas na tabela acima .disabled Uso:

Exemplos online

Exemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Estado de paginação</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js></script>
</head>
<body>
<ul class="pager">
	<li class="previous disabled"><a href="#">← Antigo</a>/a></li>
	<li class="next"><a href="#">Novo →</a>/a></li>
</ul>
</body>
</html>

Teste e veja ‹/›

Os resultados estão exibidos a seguir:

Mais exemplos de paginação

Classe	Descrição	Exemplo
.pager	Um link de paginação simples, link alinhado no centro.	Experimente
.previous	Estilo do Botão de Página Anterior na .pager, Alinhado à Esquerda	Experimente
.next	Estilo do Botão de Próximo da Página na .pager, Alinhado à Direita	Experimente
.disabled	Link Desativado	Experimente
.pagination	Links de Página de Paginação	Experimente
.pagination-lg	Links de Página de Paginação de Tamanho Maior	Experimente
.pagination-sm	Links de Página de Paginação de Tamanho Menor	Experimente
.disabled	Link Desativado	Experimente
.active	Estilo de Link da Página de Acesso Atual	Experimente

Etiquetas Bootstrap Navegação de Pão Bootstrap