Belajar Bootstrap Part 8 : Membuat Pagination dan Breadcrumb Bootstrap
PAGINATION DAN BREADCRUMB BOOTSTRAP
tentu sobat sudah pernah mendengar tentang pagination dan breadcrumb. jika sebelumnya sobat harus mendesign sendiri bentuk pagination dan breadcrumb sobat maka dengan menggunakan bootstrap sobat dapat membuat pagination dan bootstrap dengan cepat dan tampilan design pagination dan breadcrumb bootstrap juga sudah sangat modern.
Untuk membuat pagination dan breadcrumb bootstrap sobat harus menggunakan list HTML. kemudian berikan class yang sudah di sediakan oleh bootstrap untuk membuat pagination dan breadcrumb. gunakan class “pagination” untuk membuat pagination, dan gunakan class “breadcrumb” untuk membuat breadcrumb.
CARA MEMBUAT PAGINATION DENGAN BOOTSTRAP
Untuk membuat pagination dengan bootstrap caranya sangat mudah, silahkan perhatikan contoh berikut untuk cara membuat pagination dengan bootstrap.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Part 8 : Pagination dan Breadcrumb</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.css"></script>
<script type="text/javascript" src="js.bootstrap.css"></script>
</head>
<body>
<div class="container">
<h1>Cara Membuat Pagination Dengan Bootstrap | <a href="http://script-kiddies.org">Script Kiddies</a></h1>
<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>
<li><a href="#">5</a></li>
</ul>
<br/>
<h3>Membuat pagination dengan ukuran besar</h3>
<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>
<li><a href="#">5</a></li>
</ul>
<br/>
<h3>Membuat pagination dengan ukuran kecil</h3>
<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>
<li><a href="#">5</a></li>
</ul>
</div>
</body>
</html>
dapat di lihat pada contoh penggunaan class pagination di atas. untuk membuat pagination tambahkan class “pagination” pada tag <ul>. dan untuk membuat pagination dengan ukuran besar tambahkan class “pagination-lg”. dan tambahkan class “pagination-sm” untuk membuat pagination dengan ukuran yang lebih
<ul class="pagination">
<ul class="pagination pagination-lg">
<ul class="pagination pagination-sm">Untuk tambahan sobat dapat menambahkan class active dan class disabled didalam tag <li> berikut contohnya
<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>
<li class="disabled"><a href="#">5</a></li>
</ul>
CARA MEMBUAT BREADCRUMB DENGAN BOOTSTRAP
Untuk cara membuat breadcrumb saya kira cukup mudah yaitu dengan memanggil class "breadcrumb" dan berikut contoh penggunaanya
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Part 8 : Pagination dan Breadcrumb</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.css"></script>
<script type="text/javascript" src="js.bootstrap.css"></script>
</head>
<body>
<div class="container">
<h1>Cara Membuat Breadcrumb Dengan Bootstrap | <a href="http://script-kiddies.org">Script Kiddies</a></h1>
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">Membuat Breadcrumb Dengan Bootstrap</a></li>
</ul>
</div>
</body>
</html>
KESIMPULAN
Dengan adanya Pagination dan Breadcrumb Bootstrap ini kita dapat dengan mudah membuat pagination maupun breadcrumb tanpa harus membuat class CSS nya. Pagination dan Breadcrumb ini sering digunakan oleh Blogger
REFERENSI : Malas Ngoding
TUTORIAL BOOTSTRAP DASAR LAINYA :
- Bootstrap Part 1 : Mengenal Dan Cara Menggunakan Bootstrap
- Bootstrap Part 2 : Membuat Tabel Dengan Bootstrap
- Bootstrap Part 3 : Mengatur Tampilan Gambar Bootstrap
- Bootstrap Part 4 : Cara Membuat Tombol Dengan Bootstrap
- Bootstrap Part 5 : Membuat Jumbotron Dengan Bootstrap
- Bootstrap Part 6 : Membuat Pesan Alert Dengan Bootstrap
- Bootstrap Part 7 : Membuat Icon Bootstrap
- Bootstrap Part 8 : Membuat Pagination dan Breadcrumb Bootstrap
- Bootstrap Part 9 : Membuat List Dengan Bootstrap
- Bootstrap Part 10 : Membuat Panel Dengan Bootstrap
- Bootstrap Part 11 : Membuat Navigasi Tabs Dan Pils
- Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
- Bootstrap Part 13 : Membuat Form Dengan Bootstrap
- Bootstrap Part 14 : Membuat Carousel / Slideshow Dengan Bootstrap
- Bootstrap Part 15 : Membuat Modal Dengan Bootstrap
- Bootstrap Part 16 : Mengenal Grid System Bootstrap
Tidak ada komentar :
Posting Komentar