Assalamualaikum Wr.Wb
Bootstrap Pagination berguna jika teman - teman misalnya memiliki halaman web lebih dari satu halaman,maka bisa menggunakan bootstrap pagination ini.Jadi dengan kata lain ini bisa di gunakan untuk navigasi halaman sebelumnya dan selanjutnya.Tapi kali ini saya hanya mendemokan macam - macam pagination saja dan tidak saya terapkan ke web, jadi jika teman semua ingin menerapkannya pada web tinggal sisipkan link halaman kita yang lain dengan cara menyisipkannya pada bagian link (href).
Dan inilah hasilnya
Bootstrap Pagination berguna jika teman - teman misalnya memiliki halaman web lebih dari satu halaman,maka bisa menggunakan bootstrap pagination ini.Jadi dengan kata lain ini bisa di gunakan untuk navigasi halaman sebelumnya dan selanjutnya.Tapi kali ini saya hanya mendemokan macam - macam pagination saja dan tidak saya terapkan ke web, jadi jika teman semua ingin menerapkannya pada web tinggal sisipkan link halaman kita yang lain dengan cara menyisipkannya pada bagian link (href).
- Basic Pagination
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Pagination</title>
<meta charset="utf-8">
<meta name="viewport" content="witdh=device-witdh, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Pagination</h2>
<p>Ini contoh basic pagination</p>
<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>
</div><!--container-->
</body>
</html>
Dan inilah hasilnya
- Pagination Active State
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Pagination</title>
<meta charset="utf-8">
<meta name="viewport" content="witdh=device-witdh, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Pagination Active State</h2>
<p>pagination active</p>
<ul class="pagination">
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
</div><!--container-->
</body>
</html>
Dan inilah hasilnya
- Breadcrumbs
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Pagination</title>
<meta charset="utf-8">
<meta name="viewport" content="witdh=device-witdh, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Breadcrumbs</h2>
<p>Pagination Breadcrumbs</p>
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li ><a href="#">Galery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--container-->
</body>
</html>
Dan inilah hasilnya
Mungkin sekian dulu postingan kali ini semoga bermanfaat,oh ya sebelum mencoba script di atas teman - teman harus mendownload dulu bootstrap lalu di ektrak dan letakkan file yang kita buat pada satu folder dengan bootstrap.Oke sampai jumpa di postingan di berikutnya.
Referensi:http://w3schools.com/
Wassalamualaikum Wr.Wb
Referensi:http://w3schools.com/
Wassalamualaikum Wr.Wb
0 komentar:
Posting Komentar