Belajar Bootstrap Part 9 Membuat List Group

Belajar Bootstrap Part 9 Membuat List Group 

Assalamualaikum Wr. Wb.

Hai Sobat ketemu lagi dengan saya, bagaimana kabarnya ? sehat ?. Alhmadulillah kalo sobat masih sehat, jadi masih ada waktu buat belajar. Pada kesempatan kali ini saya akan menjelaskan tentang penggunaan bootstrap untuk membuat list.

PENGERTIAN

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.

LATAR BELAKANG

Belajar menampilkan list group dengan menggunakan framework bootstrap .

MAKSUD & TUJUAN

Dapat membuat list group dengan framework bootstrap.
Membuat list group yang responsive.

ALAT & BAHAN

• Bootstrap
• Laptop/PC
• Text Editor
• Browser

PEMBAHASAN

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.

<div class="container">
<div class="list-group">
<a href="#" class="list-group-item">Kaos</a>
<a href="#" class="list-group-item">Celana</a>
<a href="#" class="list-group-item">Kemeja</a>
<a href="#" class="list-group-item ">Rok</a>
</div>

<div class="list-group">
<a href="#" class="list-group-item">Facebook</a>
<a href="#" class="list-group-item">Twitter</a>
<a href="#" class="list-group-item">Google +</a>
</div>

<div class="list-group">
<a href="#" class="list-group-item">F.A.Q</a>
<a href="#" class="list-group-item">Tentang Kami</a>
</div>
</div>

Hasilnya..

Collapse Bootstrap

Langkah selanjutnya 3 buah list group tersebut di masukkan ke code collapse bootstrap ,sehingga button list group tersebut berbentuk accordion.

<div class="container">

    <div style="margin-bottom: 0px" class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">   

         <div class="panel panel-default">

            <div class="panel-heading" role="tab" id="headingAO">

              <h4 class="panel-title" >

                <a data-toggle="collapse" data-parent="#accordion" href="#collapseAO" aria-expanded="true" aria-controls="collapseAO" >

                    Pengumuman

                </a>

              </h4>

            </div>

            <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

               

               </div>

            </div>

          </div>

             

                             

          <div class="panel panel-default">

            <div class="panel-heading" role="tab" id="headingOne">

              <h4 class="panel-title">

                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">

                  Kategori

                </a>

              </h4>

            </div>

            <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">

              <div class="list-group">

                <a href="#" class="list-group-item">Kaos</a>

                <a href="#" class="list-group-item">Celana</a>

                <a href="#" class="list-group-item">Kemeja</a>

                <a href="#" class="list-group-item ">Rok</a>

              </div>

            </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">

                  Sosial Media

                </a>

              </h4>

            </div>

            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">

              <div class="list-group">

                <a href="#" class="list-group-item">Facebook</a>

                <a href="#" class="list-group-item">Twitter</a>

                <a href="#" class="list-group-item">Google +</a>

              </div>

            </div>

          </div>

           

          <div class="panel panel-default">

            <div class="panel-heading" role="tab" id="headingFour">

              <h4 class="panel-title">

                <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">

                  Informasi

                </a>

              </h4>

            </div>

            <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">

              <div class="list-group">

                <a href="#" class="list-group-item">F.A.Q</a>

                <a href="#" class="list-group-item">Tentang Kami</a>

              </div>

            </div>

          </div>

           

          <div class="panel panel-default">

            <div class="panel-heading" role="tab" >

              <h4 class="panel-title">

                <a href="#" aria-expanded="false" >Kontak</a>

              </h4>

            </div>

          </div>       

        </div>

</div>

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 

Mungkin itu dari saya kurang lebihnya mohon maaf.

Syukron

Wassalamualaikum Wr. Wb. 

Referensi

http://jagocoding.com