Pagination dan Breadcrumb Bootstrap – tentu anda sudah pernah mendengar tentang pagination dan breadcrumb. jika sebelumnya anda harus mendesign sendiri bentuk pagination dan breadcrumb anda maka dengan menggunakan bootstrap anda dapat membuat pagination dan bootstrap dengan cepat dan tampilan design pagination dan breadcrumb bootstrap juga sudah sangat modern.
Untuk membuat pagination dan breadcrumb bootstrap anda 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Part 8 : Pagination dan Breadcrumb bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<h1>Cara Membuat Pagination Dengan Bootstrap | www.malasngoding.com</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>
|
pagination dan breadcrumb bootstrap
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 kecil.
|
|
<ul class="pagination pagination-lg">
|
|
|
<ul class="pagination pagination-sm">
|
dan jika ada list pagination yang ingin di buat aktif atau di disable bisa menambahkan class disabled atau active pada tag <li> pembuka.
|
|
<h1>Cara Membuat Pagination Dengan Bootstrap | www.malasngoding.com</h1>
<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>
<li class="disabled"><a href="#">5</a></li>
</ul>
|
Cara membuat breadcrumb dengan bootstrap
untuk cara membuat breadcrumb buat juga dengan menggunakan list HTML. baca di sini tutorial tentang list HTML.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Part 8 : Pagination dan Breadcrumb bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<h1>Cara Membuat Breadcrumb Dengan Bootstrap | www.malasngoding.com</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>
|
membuat breadcrumb dengan bootstrap
Sekian Tutorial Bootstrap Part 8 : Pagination dan breadcrumb bootstrap.