List Style dan Listgroup pada CSS dan Bootstrap 4

Cara Membuat List Style dan Listgroup pada Bootstrap 4 – Pada kesempatan kali ini saya akan membahas tentang yang berhubungan lagi dengan bootstrap yaitu list style dan list group. Untuk list style sebenarnya kita cukup hanya menggunakan css saja namun kita akan membuatnya manual. Caranya sangat mudah cukup ikuti saja tutorial dibawah.

 

Cara Membuat List Style

List style ini bisa kita ubah dan ada banyak macamnya seperti bullet, angka, romawi, huruf besar atau kecil dan masih banyak lagi. Untuk membuat list, sobat bisa menggunakan tag <ul>..</ul> atau tag <ol>…</ol> yang berbeda hanya cssnya saja. Berikut adalah macam-macam dari list style

1. List Style Simbol

Kita bisa membuat simbolnya seperti bulat, ataupun kotak. Contoh penggunaannya adalah sebagai berikut :

Hasilnya :

  • Circle type 1
  • Circle type 2
  • Circle type 3
  • Disc type 1
  • Disc type 2
  • Disc type 3
  • Square type 1
  • Square type 2
  • Square type 3
  • inherit type 1
  • inherit type 2
  • inherit type 3

 

2. List None Style

Jika sobat ingin menggunakan list tapi tanpa ada simbol, angka ataupun huruf maka sobat bisa menambahkan list style none. Contoh penggunaannya adalah sebagai berikut

Tampilannya :

  • None type 1
  • None type 2
  • None type 3

 

3. Lower dan Upper Greek

Hasilnya :

  • Lower-greek type 1
  • Lower-greek type 2
  • Lower-greek type 3
  • Upper-greek type 1
  • Upper-greek type 2
  • Upper-greek type 3

 

4. Decimal/Angka

Style jenis ini adalah untuk membuat list dengan menggunakan angka, sobat juga bisa menambahkan angka 0 di depan angka. Cara penggunaannya adalah sebagai berikut :

Hasilnya :

  • Decimal type 1
  • Decimal type 2
  • Decimal type 3
  • Decimal-leading-zero type 1
  • Decimal-leading-zero type 2
  • Decimal-leading-zero type 3

5. Lower dan Upper Alpha

List jenis ini adalah list dengan huruf. Untuk lower-alpha maka hurufnya kecil semua dan jika Upper alpha maka berupa list dengan angka besar semua seperti A, B, C, D,… AA, AB…. Cara penggunaannya adalah sebagai berikut

Tampilannya :

  • Lower-alpha type 1
  • Lower-alpha type 2
  • Lower-alpha type 3
  • Upper-alpha type 1
  • Upper-alpha type 2
  • Upper-alpha type 3

 

 6. Lower dan Upper Latin

Ada lagi cara untuk membuat list menggunakan huruf baik huruf besar maupun kecil, yaitu lowel latin dan upper latin. Contoh penggunaannya adalah sebagai berikut

Hasilnya :

  • Lower-latin type 1
  • Lower-latin type 2
  • Lower-latin type 3
  • Upper-latin type 1
  • Upper-latin type 2
  • Upper-latin type 3

 

7. Lower dan Upper Roman

Style jenis ini adalah list dengan huruf i atau romawi. Jika sobat ingin menggunakan romawi yang biasa digunakan mala menggunakan Upper Roman karena akan menghasilkan huruf besar semua seperti I, II, III, IV… Sedangkan jika sobat menggunakan huruf kecil semua maka tampilannya akan seperti i, ii, iii, iv… Cara penggunaannya adalah sebagai berikut

Tampilannya :

  • Lower-roman type 1
  • Lower-roman type 2
  • Lower-roman type 3
  • Upper-roman type 1
  • Upper-roman type 2
  • Upper-roman type 3

 

8. List Style Huruf Asing

Style jenis ini sebenarnya jarang atau maah tidak digunakan khususnya di Indonesia, namun siapa tahu ada yang butuh atau untuk pengetahuan saja jadi saya berikan sekalian. contoh penggunaannya adalah sebagai berikut

Hasilnya :

  • Georgian type 1
  • Georgian type 2
  • Georgian type 3
  • Armenian type 1
  • Armenian type 2
  • Armenian type 3
  • Cjk-ideographic type 1
  • Cjk-ideographic type 2
  • Cjk-ideographic type 3
  • Hebrew type 1
  • Hebrew type 2
  • Hebrew type 3
  • Hiragana type 1
  • Hiragana type 2
  • Hiragana type 3
  • Hiragana-iroha type 1
  • Hiragana-iroha type 2
  • Hiragana-iroha type 3
  • Katakana type 1
  • Katakana type 2
  • Katakana type 3
  • Katakana-iroha type 1
  • Katakana-iroha type 2
  • Katakana-iroha type 3

 

Cara Membuat List Group dengan Bootstrap 4

Ada banyak jenis dari list group pada bootstrap. Sobat juga bisa menggabungkan dengan elemen bootstrap lainnya tentunya untuk menggunakan listrgoup dari bootstrap ini kita perlu memasukkan terlebih dahulu librari bootstrapnya seperti dibawah dan masukkan pada tag <head>…</head>

Karena ini untuk keperluan demo maka saya menggunakan css dan js online namun jika sobat ingin menggunakannya untuk keperluan development maka sobat perlu mendownloadnya terlebih dahulu di website resminya atau sobat bisa mendownloadnya bersama project ini diakhir postingan. Berikut macam-macam listgroup

1. List Group Standar

Ini adalah list group biasa yang bisa digunakan. Cara penggunaannya adalah sebagai berikut

Hasilnya :

 

2. List Group dengan Active dan Disabled

Pada list group, kita juga bisa menambahkan elemen active dan disabled, jika kita menambahkan class active tantunya akan menciptakan list yang berbeda sendiri dari lainnya dan jika kita menambahkan class disabled maka list tersebut tidak aktif. Cara penggunaannya adalah sebagai berikut

Tampilannya :

 

3. List Group dengan Link

List group ini adalah untuk merubah list menjadi bisa diklik dan tentunya jika focus maka akan merubah pointer mouse menjadi icon tangan. Cara penggunaannya adalah sebagai berikut

Hasilnya :

 

4. List Group dengan Button

Selain menggunakan link, kita juga bisa menggunakan button untuk merubah pointernya dan tentunya untuk bisa diklik. Cara penggunaannya adalah sebagai berikut

Hasilnya :

 

5. List Group Flush

Hasilnya :

 

6. List Group Horisontal

Hasilnya :

7. List Group dengan warna

Seperti jika kita membuat button, teks, dan masih banyak lagi kebanyakan itu kita bisa memberikan warna sesuai dengan bawaan bootstrap. Cara memberikan warna pada list group adalah sebagai berikut

Hasilnya :

 

8. List Group dengan Badges

List group ini juga bisa kita gabungkan dengan badges. Jika kita menggunakan untuk menu pada admin panel dan ingin memberikan jumlah pemberitahuan pada setiap menu maka sobat perllu listgroup ini. Cara penggunaannya adalah sebagai berikut

Hasilnya :

 

9. List Group dengan Konten

Listgroup ini adalah list group dengan isi yang banyak karena kita bisa memberikan beberapa elemen seperti teks, heading, paragraph dll. Contoh penggunaannya adalah sebagai berikut

Hasilnya :

 

10. List Group dengan Javascript Horizontal

Ini sebenarnya merupakan tablist, jadi kita memerlukan javascript untuk mengaktifkan tabnya jika diklik

Hasilnya :

 

11. List Group dengan Javascript Vertical

Seperti membuat tab secara horizontal, kita juga bisa menggunakan tablist ini secara vertical. Contoh penggunaannya adalah sebagai berikut

Hasilnya :

 

12. List dengan Breadcrumb

Dengan list ini kita juga bisa membuat breadcrumb, cara penggunaannya adalah sebagai berikut

Hasilnya :

 

Sekian postingan saya tentang List Style dan Listgroup pada CSS dan Bootstrap 4. Jika ada kesalahan saya mohon maaf dan jika ada pertanyaan silahkan tinggalkan komentar pada koom komentar yang sudah disediakan.

Artikel Tentang Bootstrap Lainnya :

Mempercantik Button pada HTML dengan Bootsrap 4 dengan Mudah

Macam-macam Form Input pada HTML dan Bootstrap

Cara Membuat SweetAlert dan Macam-Macamnya pada PHP

Membuat Bootstrap Modal dan Animasinya pada PHP

Membuat Badges Menggunakan Bootstrap 4

Membuat Alert pada HTML menggunakan Bootstrap 4

Mengenal Bootstrap Typography pada HTML dan Bootstrap 4

Menggunakan Tooltip pada HTML dan Bootstrap 4

Membuat Card Menu pada HTML Dengan Bootstrap 4

 

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..

One thought on “List Style dan Listgroup pada CSS dan Bootstrap 4

Leave a Reply

Your email address will not be published. Required fields are marked *

15 − 2 =