Cara Membuat Pagination Menggunakan Bulma
Pagination berfungsi untuk melakukan lompatan ke page berikutnya. Selain itu pagination dapat memudahkan user untuk meloncati page lebih dari satu misalkan dari page 2 ke page selanjutnya, sehingga user tidak perlu berlam-lama apabila ingin ke page atau halaman yang dituju. Pada tips dan trick kali ini saya akan membagikan Cara Membuat Pagination Menggunakan Bulma
Pada bulma framework kita di suguhi oleh macam-macam class yang memudahkan kita membuat suatu elemen pada website tanpa harus menambhakan css di dalamnya, dan berikut langkah-langkah Cara Membuat Pagination Menggunakan Bulma:
– Pertama, anda download file bulmanya di situs bulma itu sendiri dan tempatkan pada folder project yang teman-teman buat.
– Kedua, anda ketikan kode html di bawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Pagination</title>
<!--link ke css bulma-->
<link rel="stylesheet" href="bulma-0.4.0/css/bulma.css">
<!--link ke font-awesome-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<br>
<div class="columns">
<div class="column is-half is-offset-one-quarter">
<h1 class="has-text-centered title is-1">Membuat Pagination</h1>
<nav class="pagination">
<a class="pagination-previous">Previous</a><!--Membuat tombol page sebelumnya-->
<a class="pagination-next">Next page</a><!--Membuat tombol page selanjutnya-->
<ul class="pagination-list">
<li>
<a class="pagination-link">1</a><!--Membuat tampilan link untuk page-->
</li>
<li>
<span class="pagination-ellipsis">…</span><!--Membuat titik-titik pemisah page-->
</li>
<li>
<a class="pagination-link">45</a>
</li>
<li>
<a class="pagination-link is-current">46</a>
</li>
<li>
<a class="pagination-link">47</a>
</li>
<li>
<span class="pagination-ellipsis">…</span>
</li>
<li>
<a class="pagination-link">86</a>
</li>
</ul>
</nav>
</div>
</div>
</body>
</html>
Untuk penjelasan fungsi dari class di atas ada pada commenting yang saya berikan di kode html di atas.
Coba teman-teman buka di browser teman-teman maka tampilannya akan menjadi seperti berikut:
Dengan bulma kita dapat dengan mudah membuat suatu pagination pada suatu website. Bagaimana teman-teman cukup mudahkan Cara Membuat Pagination Menggunakan Bulma.
Sekian tutorial kali ini tentang pembahasan Cara Membuat Pagination Menggunakan Bulma, semoga bermanfaat bagi teman-teman.
The post Cara Membuat Pagination Menggunakan Bulma appeared first on Kursus Website Terbaik.