Tutorial Belajar Bootstrap 4 Part 14 – Membuat List dengan Bootstrap
Selamat datang lagi dalam tutorial warung belajar, masih dalam seri tutorial mengenai bootstrap 4, jika dalam tutorial sebelumnya kita telah membahas mengenai cara membuat pagination dan breadcrumb dengan bootstrap, dalam tutorial kali ini kita akan membahas mengenai cara membuat list dengan bootstrap.
Untuk teman – teman yang belum mengetahui apa itu list silahkan lihat tutorial kita mengenai list di html Cara Membuat Daftar/List di HTML, nah di bootstrap memiliki beberapa class yang bisa digunakan untuk mengatur tampilan dari list agar terlihat lebih menarik.
Cara membuat list dengan bootstrap
Untuk membuat list didalam bootstrap anda perlu menambahkan beberapa class antara lain :
- menambahkan class .list-group didalam tag <ul>
- tambahkan class .list-group-item pada tag <li>
untuk contoh penggunaan skripnya adalah seperti berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Contoh Sistem Operasi</h2> <hr/> <ul class="list-group"> <li class="list-group-item">Microsoft Windows</li> <li class="list-group-item">Linux</li> <li class="list-group-item">Mac Os</li> <li class="list-group-item">Unix</li> </ul> </div> </body> </html> |
Semisal kita simpan dengan nama list_bootstrap.html, lalu kita buka di browser hasilnya :
Menambahkan highlight dengan class .active
Untuk memberikan highlight pada list, anda dapat mendapatkan menambahkan class .active pada bagian tag <li> yang akan mendapatkan highlight, untuk contoh skripnya adalah sebagai berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Contoh Sistem Operasi</h2> <hr/> <ul class="list-group"> <li class="list-group-item">Microsoft Windows</li> <li class="list-group-item active">Linux</li> <li class="list-group-item">Mac Os</li> <li class="list-group-item">Unix</li> </ul> </div> </body> </html> |
semisal kita simpan dengan nama list_highlight.html, lalu kita buka di browser maka hasilnya :
Keterangan :
- Untuk List dibagian linux akan terdapat highlight (berwarna biru) karena dibagian tag <li> kita tambahkan class active
Disabled list dengan class .disabled
Selain class .active yang digunakan untuk memberikan highlight pada list, anda juga bisa disable bagian list tertentu dengan menambahkan class .disabled pada tag <li> yang ingin didisable, untuk contohnya adalah sebagai berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Contoh Sistem Operasi</h2> <hr/> <ul class="list-group"> <li class="list-group-item">Microsoft Windows</li> <li class="list-group-item disabled">Linux</li> <li class="list-group-item">Mac Os</li> <li class="list-group-item">Unix</li> </ul> </div> </body> </html> |
Semisal kita simpan dengan nama list_disabled.html, lalu kita buka di browser maka hasilnya :
Keterangan :
- Terlihat untuk list bagian linux memiliki warna yang berbeda, hal tersebut karena kita menambahkan class disabled dalam tag <li>
Contextual Class pada list
Anda juga bisa memberikan warna pada bagian list, untuk mengganti warna pada list anda tinggal menambahkan contextual class, beberapa class yang bisa anda gunakan antara lain :
- list-group-item-success
- list-group-item-secondary
- list-group-item-info
- list-group-item-warning
- list-group-item-danger
- list-group-item-primary
- list-group-item-dark
- list-group-item-light
Untuk contoh penggunaan skrip adalah sebagai berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Contextual Class pada list bootstrap</h2> <ul class="list-group"> <li class="list-group-item list-group-item-success">Class Success</li> <li class="list-group-item list-group-item-secondary">Class Secondary</li> <li class="list-group-item list-group-item-info">Class Info</li> <li class="list-group-item list-group-item-warning">Class Warning</li> <li class="list-group-item list-group-item-danger">Class Danger</li> <li class="list-group-item list-group-item-primary">Class Primary</li> <li class="list-group-item list-group-item-dark">Class Dark</li> <li class="list-group-item list-group-item-light">Class Light</li> </ul> </div> </body> </html> |
semisal kita simpan dengan nama contextual_class.html, lalu kita buka di browser :
Keterangan :
- Warna List akan ditampilkan berdasarkan class yang digunakan, jadi silahkan menyesuaikan contextual class yang ingin digunakan dengan warna yang diinginkan.
Menambahkan link pada bagian list
Anda juga bisa menambahkan link pada bagian list yang dibuat, untuk contoh pembuatan link pada bagian list adalah sebagai berikut :
|
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 |
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Contoh link pada list bootstrap</h2> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action">Link dengan class Action</a> <a href="#" class="list-group-item list-group-item-success">Link dengan class Success</a> <a href="#" class="list-group-item list-group-item-secondary">Link dengan class Secondary</a> <a href="#" class="list-group-item list-group-item-info">Link dengan class Info</a> <a href="#" class="list-group-item list-group-item-warning">Link dengan class Warning</a> <a href="#" class="list-group-item list-group-item-danger">Link dengan class Danger</a> <a href="#" class="list-group-item list-group-item-primary">Link dengan class Primary</a> <a href="#" class="list-group-item list-group-item-dark">Link dengan class Dark</a> <a href="#" class="list-group-item list-group-item-light">Link dengan class Light</a> </div> </div> </body> </html> |
Semisal kita simpan dengan nama link_list_bootstrap.html, lalu silahkan buka dibrowser :
Keterangan :
- untuk membuat list dengan isi link, silahkan buat tag <div> dan tambahkan class list-group
- didalam tag <div> silahkan tambahkan tag <a> untuk membuat link
- pada tag <a> tambahkan class list-group-item
- anda juga menambahkan contextual class yang telah dibahas dalam bagian sebelumnya didalam tag <a> untuk mengatur warna list yang ada pada bagian link
Sekian dulu teman – teman tutorial mengenai cara membuat list dengan bootstrap, jika ada yang ingin didiskusikan silahkan di kolom komentar, sekian dulu sampai jumpa di tutorial bootstrap selanjutnya
Artikel ini sangat membantu