Cara Membuat Pagination Menggunakan Bulma
Cara Merancang Pagination Menggunakan Bulma
Pagination berfungsi bagi mengerjakan lompatan ke page berikutnya. Selain itu pagination dapat mempermudah user bagi meloncati page lebih dari satu misalkan dari page 2 ke page berikutnya, sehingga user tak perlu berlam-lama apabila ingin ke page atau halaman yang dituju. Di tips dan trick kali ini saya akan membagikan Cara Merancang Pagination Menggunakan Bulma
Di bulma framework kita di suguhi oleh macam-macam class yang mempermudah kita merancang suatu faktor di situs tanpa mesti menambhakan css di dalamnya, dan berikut strategi Cara Merancang Pagination Menggunakan Bulma:
– Pertama-tama, kamu unduh file bulmanya di situs bulma itu sendiri dan tempatkan di folder project yang teman-teman bikin.
– Kedua, kamu 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>Merancang Pagination</h1>
<nav class=pagination>
<a class=pagination-previous>Previous</a><!--Merancang tombol page sebelumnya-->
<a class=pagination-next>Next page</a><!--Merancang tombol page selanjutnya-->
<ul class=pagination-list>
<li>
<a class=pagination-link>1</a><!--Merancang tampilan link bagi page-->
</li>
<li>
<span class=pagination-ellipsis>…</span><!--Merancang 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>
Bagi penjelasan guna dari class di atas ada di commenting yang saya berikan di kode html di atas.
Coba teman-teman buka di browser teman-teman karenanya tampilannya akan menjadi seperti berikut:
Dengan bulma kita dapat dengan gampang merancang suatu pagination di suatu situs. Bagaimana teman-teman lumayan mudahkan Cara Merancang Pagination Menggunakan Bulma.
Demikian panduan kali ini mengenai pembahasan Cara Merancang Pagination Menggunakan Bulma, semoga bermanfaat untuk teman-teman.
Sumber https://kursuswebsite.org
