Blog Request tutorial? klik disini!

  • Membuat List Group Di Dalam Bootstrap

    Ditulis oleh: Faizal Rafik
    1409 kali dibaca
    27 Aug / 2014 15:51

    Hallo teman-teman, pada tutorial kali ini saya akan mengajarkan bagaimana caranya membuat list-group yang ada di Bootstrap. List-group didalam Bootstrap merupakan komponen yang fleksibel dan kuat yang digunakan untuk menampilkan content yang komplek dan disesuikan didalam daftar. Cara membuat list-group didalam Bootstrap teman-teman bisa ikuti langkah-langkahnya dibawah ini.

    Basic List-Group

    Pertama kalian bisa buat tag <ul> kemudian didalam tag <ul> kalian bisa tambahakan class list-group. Kemudain didalan tag <li>, kalian bisa tambahkan class list-group-item. Berikut adalah contoh penggunaannya :

    Add Badge

    Kemudian jika kalian ingin menambahakan badge (lencana) didalam setiap kompnen list kalian bisa membuat tag <span> didalam li yang ingin kalian tambahkan badge, kemudian didalam tag <span> tersebut tambahkan class badge, berikut adalah contoh penggunaannya :

    Linked Item

    Didalam list group ini kalian juga bisa mengkelompokan daftar itemnya, cara kalian bisa gunakan tag <a> bukan tag <li>, kemudian tag <a> tersebut kita bungkus menggunakan tag <div>. Berikut adalah contoh penggunaannya :

    Custom Linked Item

    Kalian juga bisa mengcustom list item link yang ada diatas, misalnya kalian inigin memberikan judul atau menambahkan sebuah paragraph, caranya seperti gambar dibawah ini :

    Demo






Baca juga

Rukan Artha Gading Niaga Blok i - 23, Jalan Boulevard Artha Gading

Kelapa Gading, Jakarta Utara 14240

(Belakang Mall Artha Gading)

Telp: (021) 4585-0387


Ruko Permata Regensi Blok B - 18, Jalan Haji Kelik

Srengseng, Kebon Jeruk, Jakarta Barat 11630

(Depan Hutan Kota Srengseng)

Telp: (021) 5890-8355


Ruko Jalan Taman Daan Mogot Raya No. 23

Kel. Tanjung Duren Utara Kec. Grogol Petamburan, Jakarta Barat 11470

(Belakang Mall Citraland dan Kampus UNTAR II)

Telp: (021) 2941-1188


Ruko Jalan Kartini Raya No. 53

Pancoran Mas, Depok 16436

(± 5 Menit dari Kantor Walikota Depok)

Telp: (021) 7720-7657


Rukan Crown Palace Blok A no 12, Jl Prof Dr Soepomo no 231 (Samping Universitas Sahid).

Kec. Tebet, Kel. Menteng Dalam.

(± 1 Menit dari Tugu Pancoran)

Jakarta Selatan 12870

Telp: (021) 2298-3886

Buka setiap hari Senin - Minggu jam 09.00 s/d 21.00

SMS: 0851-0055-5666 / 0819-7555-666 / 0812-9933-3913 / 0812-9393-3210 / 0812-1999-9155