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 :