Tutorial di Bootstrap Base

Plugin di Bootstrap

Etichette Bootstrap Navigazione di Fette di Pane Bootstrap

Navigazione di Paginazione Bootstrap

Questo capitolo spiega le funzionalità di paginazione supportate da Bootstrap. La paginazione (Pagination) è una lista non ordinata, Bootstrap la gestisce come altri elementi di interfaccia.

Paginazione (Pagination)

La tabella sottostante elenca le classi di Bootstrap per la gestione della paginazione.

Classe	Descrizione	Esempio di codice
.pagination	Aggiungere questa classe per visualizzare la paginazione nella pagina.	<ul> 　　<li><a href="#">«</a></li> 　　<li><a href="#">1</a></li> 　　...... </ul>
.disabled, .active	Puoi personalizzare i link utilizzando .disabled per definire i link non cliccabili, utilizzando .active per indicare la pagina corrente.	<ul> 　　<li><a href="#">«</a></li> 　　<li><a href="#">1<span>(corrente)</span></a></li> 　　...... </ul>
.pagination-lg, .pagination-sm	Utilizzare queste classi per ottenere elementi di diverse dimensioni.	<ul>...</ul> <ul>...</ul> <ul>...</ul>

Paginazione predefinita

Di seguito è riportato un esempio che dimostra la classe discussa nella tabella sopra .pagination Come usarlo:

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap esempio - Paginazione predefinita</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></li>
</ul>
</body>
</html>

Testa e vedi ‹/›

I risultati sono come segue:

Stato della paginazione

Di seguito è riportato un esempio che dimostra la classe discussa nella tabella sopra .disabled, .active Come usarlo:

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap esempio - Stato della paginazione</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></li>
</ul>
</body>
</html>

Testa e vedi ‹/›

I risultati sono come segue:

Dimensione della paginazione

Di seguito è riportato un esempio che dimostra la classe discussa nella tabella sopra .pagination-* Come usarlo:

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap esempio - Dimensione della paginazione</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></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></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></li>
</ul>
</body>
</html>

Testa e vedi ‹/›

I risultati sono come segue:

Navigazione delle pagine (Pager)

Se si desidera creare un semplice link di navigazione per l'utente, è possibile farlo tramite la navigazione delle pagine. Come i link di navigazione, la navigazione delle pagine è una lista non ordinata. Di default, i link sono visualizzati al centro. La tabella elenca le classi che Bootstrap gestisce per la navigazione delle pagine.

Classe	Descrizione	Esempio di codice
.pager	Aggiungere questa classe per ottenere i link di navigazione delle pagine.	<ul> 　　<li><a href="#">Precedente</a></li> 　　<li><a href="#">Prossimo</a></li> </ul>
.previous, .next	Utilizzare la classe .previous Allineare a sinistra il link, utilizzare .next Allineare a destra il link.	<ul> 　　<li><a href="#">← Vecchio</a></li> 　　<li><a href="#">Nuovo →</a></li> </ul>
.disabled	Aggiungi questa classe per abilitare il pulsante corrispondente.	<ul> 　　<li><a href="#">← Vecchio</a></li> 　　<li><a href="#">Nuovo →</a></li> </ul>

Paginazione predefinita

Di seguito è riportato un esempio che dimostra la classe discussa nella tabella sopra .pager Come usarlo:

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Paginazione predefinita</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="#">Precedente</a></li>
	<li><a href="#">Prossimo</a></li>
</ul>
</body>
</html>

Testa e vedi ‹/›

I risultati sono come segue:

Link allineati

Di seguito è riportato un esempio che dimostra la classe discussa nella tabella sopra .previous, .next Come usarlo:

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Link allineati nella pagina di paginazione</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="#">← Vecchio</a></li>
	<li class="next"><a href="#">Nuovo →</a></li>
</ul>
</body>
</html>

Testa e vedi ‹/›

I risultati sono come segue:

Stato di paginazione

Di seguito è riportato un esempio che dimostra la classe discussa nella tabella sopra .disabled Come usarlo:

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Stato di paginazione</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="#">← Vecchio</a></li>
	<li class="next"><a href="#">Nuovo →</a></li>
</ul>
</body>
</html>

Testa e vedi ‹/›

I risultati sono come segue:

Più esempi di paginazione

Classe	Descrizione	Esempio
.pager	Un link di paginazione semplice, allineato al centro.	Prova Ora
.previous	Stile del Pulsante di Pagina Precedente nella .pager, Allineamento a Sinistra	Prova Ora
.next	Stile del Pulsante di Pagina Successiva nella .pager, Allineamento a Destra	Prova Ora
.disabled	Link Disabilitato	Prova Ora
.pagination	Link di Paginazione	Prova Ora
.pagination-lg	Link di Paginazione di Grande Dimensione	Prova Ora
.pagination-sm	Link di Paginazione di Piccola Dimensione	Prova Ora
.disabled	Link Disabilitato	Prova Ora
.active	Stile di Link della Pagina Attuale di Accesso	Prova Ora

Etichette Bootstrap Navigazione di Fette di Pane Bootstrap