Button List Group dengan Collapse Bootstrap

Transkripsi

1

2 Button List Group dengan Collapse Bootstrap Oleh: Jaf Al Azam Button List Group dengan Collapse Bootstrap, merupakan gabungan dari 3 komponen yang ada di fitur Framework CSS Bootstrap. yaitu terdiri dari Button, List Group yang di gabungkan kedalam Collapse Bootstrap. Dengan di gabungkan ke 3 fitur ini dapat mempercantik wesite dan menghemat tempat karena menggunakan collapse. Selamat mencoba. Assalammualaikum Wr. Wb. Button List Group dengan Collapse Bootstrap, merupakan gabungan dari 3 komponen yang ada di fitur Framework CSS Bootstrap. yaitu terdiri dari Button, List Group yang di gabungkan kedalam Collapse Bootstrap. Dengan di gabungkan ke 3 fitur ini dapat mempercantik wesite dan menghemat tempat karena menggunakan collapse. Selamat mencoba. Button List Group dengan Collapse Bootstrap, ini mirip dengan accordion buttonnya dapat di tampilkan maupun di sembunyikan, dan juga dapat di berisi pengumuman, atau juga dapat di tambahkan konten sesuai kebutuhan kita. Untuk membuatnya kita tidak perlu menambahkan CSS tambahan, tetapi sebaiknya di kustomisasi sendiri. Ini membutuhkan jquery ( jquery min.js ). Dan jangan lupa harus telah memiliki framework CSS Bootstrap dan juga telah menyusun struktur foldernya. Button List Group Langkah pertama kita harus membuat Button List group terlebih dahulu sebelum dimasukkan ke dalam Collapse Bootstrap. Ini sebenarnya merupakan List group Bootstrap yang di tambahkan code href sehingga menjadi sebuah Button List group. HTML <div class="container"> class="list-group-item">kaos class="list-group-item">celana class="list-group-item">kemeja class="list-group-item ">Rok class="list-group-item">facebook class="list-group-item">twitter class="list-group-item">google +

3 class="list-group-item">f.a.q class="list-group-item">tentang Kami Running kita membuat 3 buah list group yang nanti akan di masukkan kedalam collapse Bootstrap. Collapse Bootstrap Langkah selanjutnya 3 buah list group tersebut di masukkan ke code collapse bootstrap,sehingga button list group tersebut berbentuk accordion. HTML <div class="container"> <div style="margin-bottom: 0px" class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> id="headingao"> <h4 class="panel-title" > <a data-toggle="collapse" data-parent="#accordion" href="#collapseao" aria-expanded="true" aria-controls="collapseao" > Pengumuman <div id="collapseao" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingao"> <div class="panel-body"> Pengumuman Pengumuman Pengumuman Pengumuman Pengumuman Pengumuman Pengumuman Pengumuman Pengumuman Pengumuman id="headingone"> <a data-toggle="collapse"

4 data-parent="#accordion" href="#collapseone" aria-expanded="false" aria-controls="collapseone"> Kategori <div id="collapseone" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingone"> class="list-group-item">kaos class="list-group-item">celana class="list-group-item">kemeja class="list-group-item ">Rok id="headingtwo"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapsetwo" aria-expanded="false" aria-controls="collapsetwo"> Sosial Media <div id="collapsetwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingtwo"> class="list-group-item">facebook class="list-group-item">twitter class="list-group-item">google + id="headingfour"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapsefour" aria-expanded="false"

5 aria-controls="collapsefour"> Informasi <div id="collapsefour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingfour"> class="list-group-item">f.a.q class="list-group-item">tentang Kami >Kontak > aria-expanded="false" pada source code di atas, pertama hanya di buat sebuah panel yang bersisikan pengumuman bukan button, 3 buah selanjutnya adalah list group yang telah di buat sebelumnya, dan yang terakhir hanya button link. jadi terdapat 3 contoh pemanfaatan collapse Bootstrap ini. Khusus untuk pengumuman ditambah class "in" (class="panel-collapse collapse in") maka akan terbuka otomatis ketika di jalankan. Demo Terimakasih telah melihat tutorial dari saya, nantikan tutorial Bootstrap selanjutnya dari saya. Tentang Penulis Jaf Al Azam Teknik Informatika Universitas Bengkulu,. melaju kencang menuju impian. ("technojaf")