Lebak Cyber Kursus Pemrograman Gratis
Breadcrumb dan Pagination Menggunakan Bootstrap
lebakcyber.net – Breadcrumb dan pagination menggunakan Bootstrap. Oke jadi pada tutorial belajar Bootstrap sekarang ini kita akan membahas mengenai Breadcrumb dan juga Pagination dengan memakai Bootstrap pada halaman html yang kita buat.
Kalau biasanya kita harus mendesain sendiri untuk membuat sebuah breadcrumb ataupun pagination pada halaman html yang kita buat, sekarang dengan memakai Bootstrap kita dapat membuatnya dengan lebih cepat serta tampilan pagination dan juga breadcrumb yang lebih menarik.
Adapun cara untuk membuat pagination ataupun breadcrumb dengan memakai Bootstrap kita harus memakai perintah list pada html lalu kita berikan class yang telah disediakan oleh bootstrap yang bisa dipakai untuk membuat pagination dan breadcrum.
Kita bisa menggunakan class “breadcrumb” untuk membuat sebuah breadcrumb dan class “pagination” untuk membuat pagination pada halaman html yang kita buat.
Membuat Breadcrumb Di Bootstrap
Sekarang kita akan mencoba mempraktekan bagaimana cara membuat sebuah breadcrumb dengan menggunakan bootstrap, silahkan buat sebuah file baru dengan nama index.html lalu masukan perintah dibawah ini :
index.html
<!DOCTYPE html>
<html>
<head>
<title>Breadcrumb dan Pagination Menggunakan bootstrap - lebakcyber.net</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Contoh Pembuatan Breadcrumb Di Bootstrap</h3>
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Artikel Tekno</a></li>
<li><a href="#">Belajar Programming</a></li>
<li><a href="#">Belajar Jaringan</a></li>
</ul>
</div>
</body>
</html>
Nanti hasilnya akan seperti pada gambar dibawah ini :
Membuat Pagination Di Bootstrap
Sekarang langsung saja kita coba praktekan bagaimana cara membuat pagination dengan menggunakan bootstrap, silahkan buat sebuah file index.html lalu masukan perintah dibawah ini :
index.html
<!DOCTYPE html>
<html>
<head>
<title>Breadcrumb dan Pagination di bootstrap - lebakcyber.net</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Contoh Pembuatan Pagination Dengan Bootstrap</h2>
<ul class="pagination">
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
<li><a href="#">Page 5</a></li>
</ul>
<br>
<h3>Contoh pagination dengan ukuran kecil</h3>
<ul class="pagination pagination-sm">
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
<li><a href="#">Page 5</a></li>
</ul>
<br/>
<h3>Contoh pagination dengan ukuran besar</h3>
<ul class="pagination pagination-lg">
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
<li><a href="#">Page 5</a></li>
</ul>
<br/>
</div>
</body>
</html>
Nanti hasilnya akan seperti gambar dibawah ini :
Oke jadi seperti itulah bagaimana cara untuk membuat pagination serta breadcrumb dengan memakai Bootstrap, semoga tutorial sederhana ini dapat bermanfaat dan sampai jumpa di tutorial belajar Bootstrap selanjutnya.
