Component: Listbox, Accordian
Di dalam bootstrap terdapat banyak componen, pada topik ini yang akan dibahas adalah cara menampilkan data dengan menggunakan class listbox, accordian,
Membuat List-group dan Accordian
List-group
- Jalankan program Brackets, pilih menu open folder dan buka folder tempat anda bekerja
- pilih menu File, new dan simpan dengan nama listgroup.css
- isi ketikan css seperti kode dibawah ini
.kiri, .kanan { padding-top: 20px; height: 1200px; color: white; font-size: 20px; } .kiri { background-color: #53777A; } .kanan { background-color: #C02942; }
- pilih menu File, new dan simpan dengan nama listgroup.html
- seperti langkah pada praktek sebelumnya buat dokumen html standard bootstrap dengan menggunakan emmet
- beberapa kata kunci emmet:
- ! (tanda seru)
- meta:vp
- link (arahkan ke 3 css, bootstrap, font-awesome, listgroup.css)
- script:src (arahkan ke 2 file js yaitu jquery dan bootstrap)
- pada bagian isi ketik
- ketik perintah emmet berikut:
- div.row>div.container-fluid , tekan tab
- div.col-sm-8.kiri+div.col-sm-3.col-sm-offset-1.kanan , tekan tab
- sehingga menjadi potongan kode seperti dibawah ini
<div class="container-fluid"> <div class="row"> <div class="col-sm-8 kiri"> ... </div> <div class="col-sm-3 col-sm-offset-1 kanan"> ... </div> </div> </div>
- pada html bagian kiri
- div.list-group
- (a.list-group-item>(span.fa.fa-envira)+{text}+(span.label.label-info.pull-sm-right{000}))*4
- Lakukan modifikasi isi sehingga dapat menampilkan yang berbeda
<h3>List Group</h3> <div class="list-group"> <a href="" class="list-group-item"> <span class="fa fa-money"></span> Money <span class="label label-info pull-sm-right">30</span> </a> <a href="" class="list-group-item"> <span class="fa fa-hand-o-down"></span> hand o down <span class="label label-info pull-sm-right">20</span> </a> <a href="" class="list-group-item"> <span class="fa fa-gitlab"></span> Git lab <span class="label label-info pull-sm-right">10</span> </a> <a href="" class="list-group-item"> <span class="fa fa-firefox"></span> Firefox <span class="label label-warning label-pill pull-sm-right">100</span> </a> </div>
- Penjelasan
- pada contoh diatas merupakan gabungan dari beberapa component
- list-group, hyperlink, icon dan label
- untuk setiap item terdapat 4 fungsi yaitu:
- tag a (hyperlink) yang artinya bila di klik akan membuka halaman web lain.
- gambar icon dengan class font awesome
- tulisan
- label
- perhatikan tag pull-sm-right artinya label akan ditarik rata ke kanan
Membuat accordion
- pada html bagian kanan
- lakukan copy-paste kode berikut:
<!-- accordion --> <div id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <button data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="btn btn-success"> Judul 1 <i class="fa fa-angle-double-right"></i> </button> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> data </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> judul 2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> data 2 </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> judul 3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> data 3 </div> </div> </div> <!-- end accordion -->
Penjelasan
- kunci dari accordian adalah bahwa setiap bagian accordian terdiri dari 2 bagian yaitu judul dan data
- penghubung antar keduannya adalah pada bagian href dan id
- contohnya pada bagian judul 3 terdapat href="#collapseThree"
- pada bagian data menggunakan id="collapseThree"
- jadi apabila anda ingin memiliki lebih dari tiga menu, maka langkah yang anda lakukan
- copy satu bagian dari panel panel-default
- kemudian ubah href pada bagian judul dan id pada bagian data yang menjadi penghubung
hasil dari praktek kita untuk component ini tampak seperti gambar berikut: