Daftar Grup dengan Item Tertaut
Kita dapat menautkan item grup daftar dengan menggunakan tag hyperlink <a> dari HTML.
Dalam kode ini kami mengganti tag <li> dengan <a>dan alih-alih <ul> kami menggunakan <div> sebagai induk. menggunakan kode ini kita dapat menambahkan lencana dan ikon, di mana lencana akan muncul di sebelah kanan. <ul> dengan grup .list-group, di mana setiap item daftar memiliki item .list-group-class.
Membuat list group dengan bootstrap dalam kode list tersebut tidak lagi menggunakan tag <ul> tetapi yang di gunakan adalah tag <div> begitu juga dengan tanda <li> berubah menjadi <a> dengan tanda html tersebut list
group berjalan di bootstrap
Contoh kode html bootstrap untuk list group
<div class="list-group">
<a href="#" class="list-group-item active">
<span class="glyphicon glyphicon-camera"></span> Pictures <span class="badge">25</span>
</a>
<a href="#" class="list-group-item">
<span class="glyphicon glyphicon-file"></span> Documents <span class="badge">145</span>
</a>
<a href="#" class="list-group-item">
<span class="glyphicon glyphicon-music"></span> Music <span class="badge">50</span>
</a>
<a href="#" class="list-group-item">
<span class="glyphicon glyphicon-film"></span> Videos <span class="badge">8</span>
</a>
</div>
Dan keluaran nantinya tampak seperti di bawah
Kita dapat menautkan item grup daftar dengan menggunakan tag hyperlink <a> dari HTML.
Dalam kode ini kami mengganti tag <li> dengan <a>dan alih-alih <ul> kami menggunakan <div> sebagai induk. menggunakan kode ini kita dapat menambahkan lencana dan ikon, di mana lencana akan muncul di sebelah kanan. <ul> dengan grup .list-group, di mana setiap item daftar memiliki item .list-group-class.
Membuat list group dengan bootstrap dalam kode list tersebut tidak lagi menggunakan tag <ul> tetapi yang di gunakan adalah tag <div> begitu juga dengan tanda <li> berubah menjadi <a> dengan tanda html tersebut list
group berjalan di bootstrap
Contoh kode html bootstrap untuk list group
<div class="list-group">
<a href="#" class="list-group-item active">
<span class="glyphicon glyphicon-camera"></span> Pictures <span class="badge">25</span>
</a>
<a href="#" class="list-group-item">
<span class="glyphicon glyphicon-file"></span> Documents <span class="badge">145</span>
</a>
<a href="#" class="list-group-item">
<span class="glyphicon glyphicon-music"></span> Music <span class="badge">50</span>
</a>
<a href="#" class="list-group-item">
<span class="glyphicon glyphicon-film"></span> Videos <span class="badge">8</span>
</a>
</div>
Dan keluaran nantinya tampak seperti di bawah
Terima kasih telah membaca artikel tentang Cara membuat list Group menggunakan bootstrap di blog successful blogger jika anda ingin menyebar-luaskan artikel ini dimohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silahkan bookmark halaman ini di web browser anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.