PAGINATION-BADGE-TABBABLE-POPOVER

• Pagination dengan bootstrap
• Membuat Tombol POP text (popover)
• Membuat Tombol Imut (badge)
• Membuat Tabbable Panes using List Group

Membuat Pagination dengan bootstrap

Dalam membuat pagination atau link tombol yang bernomor, kita hanya memanggil class yang bernama "pagination justify-content-end" Seperti contoh dibawah ini :

Adapun skrip pagination dapat dilihat dibawah ini :

<nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="Link_Anda">1</a></li>
<li class="page-item"><a class="page-link" href="Link_Anda">2</a></li>
<li class="page-item"><a class="page-link" href="Link_Anda#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>

Perhatikan skrip yang diberikan huruf tebal disanalah pemanggilan itu sehingga mengeksekusi skrip yang sudah tersedia di Bootstrap, skrip diatas untuk menampilkan disebelah kanan, sedangkan untuk menampilkan sebelah kiri maka cukup menghapus skrip yang ada pada class justify-content-end sehingga menjadi seperti ini : <ul class="pagination">, maka akan tampil seperti dibawah ini :

Jika ingin menampilkannya diposisi tengah maka cukup kata "end" dihapus diganti dengan kata "center" semoga dapat dipahami dengan mudah dan anda juga dapat menambahkan link bernomor dengan cara mengcopy nomor 3 diletakkan dibawahnya kemudian nomor 3 dirubah menjadi nomor 4 begitu seterusnya, seperti contoh diatas.

---

Membuat Tombol POP text (popover)

Terkadang dalam pengembangan suatu website, kita membutuhkan tombol yang satu ini yang disebut popover Silahkan di klik

Banyak yang memanfaatkan fitur ini yang biasanya untuk panduan atau arahan untuk pengguna, pada prinsipnya fitur ini dapat digunakan sesuai kebutuhan pemrograman, perlu dicatat setiap versi bootstrap akan sangat berpengaruh berfungsi atau tidaknya dalam hal ini, karena penulisan dalam pemanggilannya pun berbeda, pada versi 3 sd 4.4.1 dalam pemanggilannya, ditulis dengan : data-toggle="nama_yang_anda_tulis" dan data-content=".." adapun versi 4.5 keatas tentu sudah berbeda dalam penulisannya yakni data-bs-content="..." begitu juga dengan data-bs-toggle="nama_yang_anda_tulis"

Popover Tombol yang unik dan memiliki variasi tersendiri yakni berupa POP (layar pesan). adapun skripnya sebagai berikut :

<button type="button" class="btn btn-secondary" data-bs-toggle="xflash" title="Hanya Testing" data-bs-content="Disini ditulis pesan yang akan disampaikan">Popover
</button> 

Jangan lupa menambahkan javascriptnya untuk menampilkan pesan yang ditulis

<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="xflash"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})</script>

Semoga bermanfaat dan silahkan dipraktekkan, catatan Tombol ini untuk mengeluarkan Sebuah Pop dan Bootstrap menghubungkannya dengan file popper.js, dengan memberikan perintah require Popper.js (maksudnya file popper.js harus ada jika offline atau terhubung melalui online) lebih jelasnya pengguna silahkan kunjungi disini : popper.js.org

---

Membuat Tombol Imut (badge)

Tombol atau link imut atau dikenal dengan sebutan Badge

Tombol ini biasa banyak dijumpai pada iklan-iklan yang ada diwebsite, biasanya berisi iklan pendek dengan tombol yang imut, mungil dan centil seperti penampakan dibawah ini :

Primary Danger Dark Info Light Secondary Success Warning

Penulis akui dalam hal penampakannya memang cantik dan imut, adapun skrip nya juga hanya memanggil nama class yang sudah ditentukan pada bootstrap, perhatikan skrip dibawah ini :

<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-dark">Dark</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-warning">Warning</a>

Selamat mencoba dan jangan lupa mempraktekkannya, apalah arti sebuah ilmu jika tidak diamalkan bukankah begitu ?....

#cara membuat Pagination, #Tombol Imut badge, #belajar bootstrap

Membuat Tabbable Panes using List Group

Tabbable Panes menggunakan List Group

Jika kalian sering online atau berkunjung ke beberapa situs, diantaranya tentu kita akan menemukan tabbable ini dengan tampilan yang berbeda-beda pada website tersebut, seperti contoh dibawah ini.

Banyak contoh dalam bentuk rupa dan corak warna seperti dibawah ini :

Ada juga yang bermodel Horizontal maupun vertical, semua kembali kepada para pengguna dalam membuat suatu website atau aplikasi berbasis Web, dibawah ini merupakan salah contoh link group :

• Skrip Tabbable Panes I
• Skrip Tabbable Panes II
• Skrip Tabbable Panes III

Skrip Tabbable Panes

Adapun skrip diatas sebagai berikut :

Skrip Tabble Panes Model I

<script>
$('#list-tab a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})</script>
	
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" 
data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" 
data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" 
data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" 
data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" 
role="tabpanel" aria-labelledby="list-home-list">X-flash Profesional Edition I</div>
<div class="tab-pane fade" id="list-profile" 
role="tabpanel" aria-labelledby="list-profile-list">X-flash Profesional Edition II</div>
<div class="tab-pane fade" id="list-messages" 
role="tabpanel" aria-labelledby="list-messages-list">X-flash Increms</div>
<div class="tab-pane fade" id="list-settings" 
role="tabpanel" aria-labelledby="list-settings-list">X-flash Increms Unlimited</div>
    </div>
  </div>
</div>

---

Skrip Tabbable Panes II

Skrip Tabble Panes Model II

 <div class="list-group">
 <button type="button" class="list-group-item list-group-item-action active">
 Xflash Company
 </button>
 <button type="button" class="list-group-item list-group-item-action">X-flash Increms Unlimited I</button>
 <button type="button" class="list-group-item list-group-item-action">X-flash Increms Unlimited II</button>
 <button type="button" class="list-group-item list-group-item-action">X-flash Increms Unlimited III</button>
 <button type="button" class="list-group-item list-group-item-action" disabled>Disable Bosku</button>
</div>

---

• Skrip Tabbable Panes I
• Skrip Tabbable Panes II
• Skrip Tabbable Panes III

Skrip Tabbable Panes III

Skrip Tabbble Panes Model III

<ul class="list-group list-group-horizontal">
<li class="list-group-item"><a href="#Skrip-Tabble-Panes">Skrip Tabble Panes I</a></li>
<li class="list-group-item"><a href="#Skrip-Tabble-Panes-II">Skrip Tabble Panes II </a></li>
<li class="list-group-item"><a href="#Skrip-Tabble-Panes-III">Skrip Tabble Panes III</a></li>
</ul>

Selamat mencoba dan salam sukses selalu dari penulis semoga kita diberikan kesehatan dan rezeki yang melimpah ruah..Aamiin