Bootstrap - Pagination


Kreiranje pagination pomoću Bootstrapa

Paginacija je proces organizacije sadržaja dijeljenjem na zasebne stranice. Paginacija se koristi u nekom ili drugom obliku prilično često u gotovo svakoj web aplikaciji, na primjer, koriste je pretraživači za prikazivanje ograničenog broja rezultata na stranicama rezultata pretraživanja ili prikazivanje ograničenog broja postova za svaku stranicu na bloga ili foruma.

<nav>
    <ul class="pagination">
        <li class="page-item"><a href="#" class="page-link">Prethodna</a></li>
        <li class="page-item"><a href="#" class="page-link">1</a></li>
        <li class="page-item"><a href="#" class="page-link">2</a></li>
        <li class="page-item"><a href="#" class="page-link">3</a></li>
        <li class="page-item"><a href="#" class="page-link">4</a></li>
        <li class="page-item"><a href="#" class="page-link">5</a></li>
        <li class="page-item"><a href="#" class="page-link">Naredna</a></li>
    </ul>
</nav>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Pagination</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <nav>
        <ul class="pagination">
            <li class="page-item"><a href="#" class="page-link">Prethodna</a></li>
            <li class="page-item"><a href="#" class="page-link">1</a></li>
            <li class="page-item"><a href="#" class="page-link">2</a></li>
            <li class="page-item"><a href="#" class="page-link">3</a></li>
            <li class="page-item"><a href="#" class="page-link">4</a></li>
            <li class="page-item"><a href="#" class="page-link">5</a></li>
            <li class="page-item"><a href="#" class="page-link">Naredna</a></li>
        </ul>
    </nav>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Pagination sa aktivnim i neaktivnim stanjima

Linkovi unutar Bootstrap paginacije mogu se dalje prilagoditi različitim okolnostima, na primjer kada se korisnik približava kraju, početku ili ukazuje na trenutni broj stranice. Koristite klasu .disabled za onemogućavanje linka i .active za označavanje trenutne stranice.

<nav>
    <ul class="pagination">
        <li class="page-item disabled"><a href="#" class="page-link" tabindex="-1">Prethodna</a></li>
        <li class="page-item active"><a href="#" class="page-link">1</a></li>
        <li class="page-item"><a href="#" class="page-link">2</a></li>
        <li class="page-item"><a href="#" class="page-link">3</a></li>
        <li class="page-item"><a href="#" class="page-link">4</a></li>
        <li class="page-item"><a href="#" class="page-link">5</a></li>
        <li class="page-item"><a href="#" class="page-link">Naredna</a></li>
    </ul>
</nav>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Pagination sa aktivnim i nekativnim stanjima</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <nav>
        <ul class="pagination">
            <li class="page-item disabled"><a href="#" class="page-link" tabindex="-1">Prethodna</a></li>
            <li class="page-item active"><a href="#" class="page-link">1</a></li>
            <li class="page-item"><a href="#" class="page-link">2</a></li>
            <li class="page-item"><a href="#" class="page-link">3</a></li>
            <li class="page-item"><a href="#" class="page-link">4</a></li>
            <li class="page-item"><a href="#" class="page-link">5</a></li>
            <li class="page-item"><a href="#" class="page-link">Naredna</a></li>
        </ul>
    </nav>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:


<nav>
    <ul class="pagination">
        <li class="page-item disabled"><span class="page-link">Prethodna</span></li>
        <li class="page-item active"><a href="#" class="page-link">1</a></li>
        <li class="page-item"><a href="#" class="page-link">2</a></li>
        <li class="page-item"><a href="#" class="page-link">3</a></li>
        <li class="page-item"><a href="#" class="page-link">4</a></li>
        <li class="page-item"><a href="#" class="page-link">5</a></li>
        <li class="page-item"><a href="#" class="page-link">Naredna</a></li>
    </ul>
</nav>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Promjena veličina Pagination

Takođe možete promijeniti veličinu paginacije da biste povećali ili smanjili područje na koje je moguće kliknuti. Dodajte relativne klase veličine poput .pagination-lg ili .pagination-sm u osnovnu klasu .pagination za stvaranje veće ili manje paginacije.

<!-- Velika (Large) pagination -->
<nav>
    <ul class="pagination pagination-lg">
        <li class="page-item disabled"><span class="page-link">Prethodna</span></li>
        <li class="page-item active"><a href="#" class="page-link">1</a></li>
        <li class="page-item"><a href="#" class="page-link">2</a></li>
        <li class="page-item"><a href="#" class="page-link">3</a></li>
        <li class="page-item"><a href="#" class="page-link">4</a></li>
        <li class="page-item"><a href="#" class="page-link">5</a></li>
        <li class="page-item"><a href="#" class="page-link">Naredna</a></li>
    </ul>
</nav>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Veličina Pagination</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <!-- Velika (Large) pagination -->
    <nav>
        <ul class="pagination pagination-lg">
            <li class="page-item disabled"><span class="page-link">Prethodna</span></li>
            <li class="page-item active"><a href="#" class="page-link">1</a></li>
            <li class="page-item"><a href="#" class="page-link">2</a></li>
            <li class="page-item"><a href="#" class="page-link">3</a></li>
            <li class="page-item"><a href="#" class="page-link">4</a></li>
            <li class="page-item"><a href="#" class="page-link">5</a></li>
            <li class="page-item"><a href="#" class="page-link">Naredna</a></li>
        </ul>
    </nav>
    <!-- Difoltna veličina (Default) pagination -->
    <nav>
        <ul class="pagination">
            <li class="page-item disabled"><span class="page-link">Prehodna</span></li>
            <li class="page-item active"><a href="#" class="page-link">1</a></li>
            <li class="page-item"><a href="#" class="page-link">2</a></li>
            <li class="page-item"><a href="#" class="page-link">3</a></li>
            <li class="page-item"><a href="#" class="page-link">4</a></li>
            <li class="page-item"><a href="#" class="page-link">5</a></li>
            <li class="page-item"><a href="#" class="page-link">Naredna</a></li>
        </ul>
    </nav>
    <!-- Mala (Small) pagination -->
    <nav>
        <ul class="pagination pagination-sm">
            <li class="page-item disabled"><span class="page-link">Prethodna</span></li>
            <li class="page-item active"><a href="#" class="page-link">1</a></li>
            <li class="page-item"><a href="#" class="page-link">2</a></li>
            <li class="page-item"><a href="#" class="page-link">3</a></li>
            <li class="page-item"><a href="#" class="page-link">4</a></li>
            <li class="page-item"><a href="#" class="page-link">5</a></li>
            <li class="page-item"><a href="#" class="page-link">Naredna</a></li>
        </ul>
    </nav>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Poravnanje Pagination

Prema zadanim postavkama paginacija je poravnata vodoravno lijevo. Da biste ga poravnali u sredinu stranice, dodajte klasu .justify-content-center u osnovnu klasu .pagination, kao što je prikazano u sljedećem primjeru:

<nav>
    <ul class="pagination justify-content-center">
        <li class="page-item"><a href="#" class="page-link">Prethodna</a></li>
        <li class="page-item"><a href="#" class="page-link">1</a></li>
        <li class="page-item"><a href="#" class="page-link">2</a></li>
        <li class="page-item"><a href="#" class="page-link">3</a></li>
        <li class="page-item"><a href="#" class="page-link">4</a></li>
        <li class="page-item"><a href="#" class="page-link">5</a></li>
        <li class="page-item"><a href="#" class="page-link">Naredna</a></li>
    </ul>
</nav>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Poravnanje Pagination na sredinu stranice</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <nav>
        <ul class="pagination justify-content-center">
            <li class="page-item"><a href="#" class="page-link">Prethodna</a></li>
            <li class="page-item"><a href="#" class="page-link">1</a></li>
            <li class="page-item"><a href="#" class="page-link">2</a></li>
            <li class="page-item"><a href="#" class="page-link">3</a></li>
            <li class="page-item"><a href="#" class="page-link">4</a></li>
            <li class="page-item"><a href="#" class="page-link">5</a></li>
            <li class="page-item"><a href="#" class="page-link">Naredna</a></li>
        </ul>
    </nav>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Takođe možete koristiti klasu .justify-content-end za poravnavanje paginacije udesno:

<nav>
    <ul class="pagination justify-content-end">
        <li class="page-item"><a href="#" class="page-link">Prethodna</a></li>
        <li class="page-item"><a href="#" class="page-link">1</a></li>
        <li class="page-item"><a href="#" class="page-link">2</a></li>
        <li class="page-item"><a href="#" class="page-link">3</a></li>
        <li class="page-item"><a href="#" class="page-link">4</a></li>
        <li class="page-item"><a href="#" class="page-link">5</a></li>
        <li class="page-item"><a href="#" class="page-link">Naredna</a></li>
    </ul>
</nav>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako: