Cara Membuat Description List dengan Bootstrap 4

Hallo sobat program, bertemu kembali dengan saya Rizal dan masih tetap sama diwebsite Source Code Aplikasi. Disini kita akan masih membahas seputar bootstrap 4 yaitu mengenai Cara Merancang Description List dengan Bootstrap 4.



Di dasarnya list pada HTML ada 3 yaitu ordered list, unordered list, dan yang akan kita coba sekarang ini yaitu description list. Description list atau daftar penjelasan pada html tag <dl> digunakan bagi mereferensikan daftar istilah berikut penjelasannya. Dan pada penggunaannya <dl> digunakan bersamaan dengan tag <dt> (menunjukan istilah) dan <dd> (penjelasan dari istilah tsb).



Cara Merancang Description List dengan Bootstrap 4.



Oke saya rasa penjelasan secara teori diatas telah lumayan jelas, dan berikutnya kita akan mencoba membangun description list dengan bootstrap 4. Langkah pertama-tama siapkan sebuah folder lalu jalankan/run text-editornya kemudian buka blog bootstrapnya lalu ikutilah step dibawah ini bagi menggunakan starter tampilan default dari bootstrap 4 dengan menggunakan CDN bootstrap 4. Step by step seperti dibawah ini :





Jikalau telah, di bagian <h1>hello world</h1> dihapus saja dan tambahkan script description list seperti di gambar dibawah ini :





Jikalau telah ditambahkan, silahkan dijalankan. Dan hasilnyapun masih default dari bootstrap itu sendiri. Dan disini kita akan mengcostum defaultnya menjadi seperti yang kita inginkan dengan menambahkan css sendiri seperti di gambar dibawah ini :



Cara Merancang Description List dengan Bootstrap 4.





Jikalau telah ditambahkan css nya, langkah berikutnya teman-teman boleh seketika dijalankan kembali dan hasilnya akan menjadi seperti dibawah ini :





Dan bagi hasil mobile atau smartphone akan menjadi seperti di gambar dibawah ini :





Bagaimana ? gampang dan bagus kan teman-teman, jadi seperti begitulah contoh sederhana dipembahasan kali ini mengenai Cara Merancang Description List dengan Bootstrap 4.



Semoga dapat bermanfaat bikin teman-teman dan hingga bertemu dipembahasan berikutnya.



Terimakasih




Sumber https://kursuswebsite.org

Popular posts from this blog

Perbedaan Antara Keyup dan Keydown Pada jQuery

Even di javascript adalah sebuah suatu yang terjadi di element tertentu, maksudnya yaitu suatu respon atau aksi yang di lakukan oleh user dimana kegiatan tersebut akan memicu jalannya script javascript yang terdapat di blog tersebut. Di javascript terdapat banyak event namun di pembahasan kali ini kita akan membahas mengenai Perbedaan Antara Keyup dan Keydown Di jQuery, Keyup adalah sebuah event yang akan di jalankan ketika tombol dilepaskan di di keyboard, dan sedangkan Keydown adalah sebuah event ketika tombol ditekan di keyboard.
Read more

Membuat Table Warna Berselang dengan PHP

Image
Selamat datang di blog Source Code Aplikasi, masih dengan File yang kemarin, tapi sekarang ini kita akan menggunakan Framework Bootstrap dan Membangun Table Warna Berselang dengan PHP, jadi jangan lupa yang kemarin praktekin dulu yah teman teman link nya yang ini . oka seketika saja kita praktekan.
Read more