Bootstrap4分页

La navigazione è il processo di organizzazione del contenuto attraverso la divisione del contenuto in pagine separate.
La navigazione è utilizzata in quasi ogni applicazione web in una forma o nell'altra, ad esempio, i motori di ricerca utilizzano la navigazione per visualizzare un numero limitato di risultati nella pagina dei risultati di ricerca, o nei blog o nei forum per visualizzare un numero limitato di articoli per pagina.

Nel processo di sviluppo web, se si incontra molto contenuto, di solito si esegue la gestione della navigazione.

Bootstrap 4 può implementare facilmente l'effetto di navigazione.

Per creare una pagina di navigazione di base, aggiungi la classe .pagination all'elemento <ul>. Poi aggiungi la classe .page-item agli elementi <li>:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Pagina di navigazione</h2>
　　<p>Per creare una pagina di navigazione di base, aggiungi la classe .pagination all'elemento ul. Poi aggiungi la classe .page-item agli elementi li:</p>　　　　　　　　　　　　　　　　　　
　　<ul class="pagination">
　　　　<li class="page-item"><a class="page-link" href="#">Precedente</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">1</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">2</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">3</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">Successivo</a></li>
　　</ul>
</div>
</body>
</html>

测试看看‹/›

Stato del numero di pagina della pagina corrente

La pagina corrente può essere evidenziata con la classe .active:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Stato del numero di pagina della pagina corrente</h2>
　　<p>La pagina corrente può essere evidenziata con la classe .active:</p>　　　　　　　　　　　　　　　　　　
　　<ul class="pagination">
　　　　<li class="page-item"><a class="page-link" href="#">Precedente</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">1</a></li>
　　　　<li class="page-item active"><a class="page-link" href="#">2</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">3</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">Successivo</a></li>
　　</ul>
</div>
</body>
</html>

测试看看‹/›

Link di navigazione non cliccabili

.disabled classe può impostare i link di navigazione non cliccabili:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Link di navigazione non cliccabili</h2>
　　<p>.disabled classe può impostare i link di navigazione non cliccabili:</p>　　　　　　　　　　　　　　　　　　
　　<ul class="pagination">
　　　　<li class="page-item disabled"><a class="page-link" href="#">Precedente</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">1</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">2</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">3</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">Successivo</a></li>
　　</ul>
</div>
</body>
</html>

测试看看‹/›

Dimensione della visualizzazione della pagina di navigazione

Puoi impostare la dimensione della barra di navigazione a tua scelta.

.pagination-lg classe imposta per la barra di navigazione con caratteri grandi, .pagination-sm classe imposta per la barra di navigazione con caratteri piccoli:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Dimensione della visualizzazione della pagina di navigazione</h2>
　　<p>.pagination-lg classe imposta per la barra di navigazione con caratteri grandi, .pagination-sm classe imposta per la barra di navigazione con caratteri piccoli:</p>　　　　　　　　　　　　　　　　　　
　　<ul class="pagination pagination-lg">
　　　　<li class="page-item"><a class="page-link" href="#">Precedente</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">1</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">2</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">3</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">Successivo</a></li>
　　</ul>
　　　
　　<ul class="pagination pagination-sm">
　　　　<li class="page-item"><a class="page-link" href="#">Precedente</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">1</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">2</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">3</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">Successivo</a></li>
　　</ul>
</div>
</body>
</html>

测试看看‹/›

Navigazione dei pani di segnalazione

.breadcrumb e .breadcrumb-item La classe viene utilizzata per impostare la navigazione dei pani di segnalazione:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Navigazione delle briciole</h2>
　　<p>.breadcrumb e .breadcrumb-item classi vengono utilizzate per impostare la navigazione delle briciole:</p>　　　　　　　　　　　　　　　　　　
　　<ul class="breadcrumb">
　　　　<li class="breadcrumb-item"><a href="#">Fotografie</a></li>
　　　　<li class="breadcrumb-item"><a href="#">Estate 2017</a></li>
　　　　<li class="breadcrumb-item"><a href="#">Italia</a></li>
　　　　<li class="breadcrumb-item active">Roma</li>
　　</ul>
</div>
</body>
</html>

测试看看‹/›

Bootstrap4列表组 Bootstrap4进度条

Tutorial di base di Bootstrap4

Bootstrap4分页

Stato del numero di pagina della pagina corrente

Link di navigazione non cliccabili

Dimensione della visualizzazione della pagina di navigazione

Navigazione dei pani di segnalazione