Belajar Bootstrap (13. Pagination)

Belajar Bootstrap (13. Pagination)

Pagination pada bootstrap

Halo saudaraku, kali ini kita akan belajar tentang pagination. Pagination adalah penomoran pada halaman. Misal kita sekarang berada di halaman 1,2, atau halaman 3. Inilah fungsi pagination untuk memberi tahu.
Dalam materi ini kami akan meringkas materi-materi yang berkaitan dengan pagination dalam satu html.
check it

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
	<title>belajar pagination</title>
</head>
<body>
	<div class="container">
		<h2>Pagination dasar</h2>
		<ul class="pagination">
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
		</ul>
		<h2>Pagination active</h2>
		<ul class="pagination">
			<li class="active"><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
		</ul>
		<h2>Pagination disabled</h2>
		<ul class="pagination">
			<li class="disabled"><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
		</ul>
		<h2>Mengatur ukuran pagination</h2>
		<ul class="pagination pagination-sm">
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
		</ul>
		<ul class="pagination pagination-lg">
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
		</ul>
		<h2>BreadCrumb adalah class selain paginaion, digunakan untuk mengerahui dimana halaman berada</h2>
		<ul class="breadcrumb">
			<li><a href="#">home</a></li>
			<li><a href="#">bootstrap</a></li>
			<li class="active"><a href="#">pagination</a></li>
		</ul>
	</div>
</body>
</html>

hasil

Semoga bermanfaat, sampai jumpa di postingan selanjutnya.

Written by @akhi_syabab

Leave a Reply

Your email address will not be published.Required fields are marked *