Tutorial Bootstrap Part 15: Card
Oke pada kesempatan kali ini rekayasaternaklele akan membahas tentang Card pada Bootstrap.
Judul
Tutorial Bootstrap Part 15: Card
Pengertian
Menurut Wikipedia, Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website. Sesuai namanya, website yang dibuat dengan alat bantu ini memiliki tampilan halaman yang sama / mirip dengan tampilan halaman Twitter atau desainer juga dapat mengubah tampilan halaman website sesuai dengan kebutuhan.
Latar Belakang
Mencari kemudahan dalam membuat front-end website yang cepat,responsive dan praktis sehingga kita tidak perlu menulis kode CSS dari nol.
Maksud dan Tujuan
Memahami dan bisa menggunakan Bootsrap sehingga pengembangan fron end website lebih efektif dan efisien.
Alat dan Bahan
Text Editor dan PC
Jangka Waktu
1 Jam
Pembahasan
Card dalam bootstrap memiliki banyak manfaat. Conthnya saat pembuatan portal atau pembuatan kartu nama dalam web.
Basic Card
Basic card dibuat dengan class .card dan kontennya menggunakan .card-body. Untuk lebih jelasnya lihat script ini :
Untuk menambahkankan judul pada card gunakan class ,card-header dan untuk menambahkan footer tambahkan class .card-footer. Contoh :
Card with title, teks, and link
Gunakan class .card-title untuk menambahkan card title. Dan class .card-text digunakan untuk menghilangkan margin bawah untuk elemen <p>. Class card-link berfungsi menambahkan warna biru untuk link, dan efek hover. Contoh :
Card with title, teks, and link
Gunakan class .card-title untuk menambahkan card title. Dan class .card-text digunakan untuk menghilangkan margin bawah untuk elemen <p>. Class card-link berfungsi menambahkan warna biru untuk link, dan efek hover. Contoh :
Card Image
card-image-top berfungsi menempatkan image diatas text dan bisa diganti dengan card-imag-bottom untuk meletakkan gambar dibawah text.
Hasil:
Kesimpulan
Referensi
https://www.w3schools.com/bootstrap4/bootstrap_cards.asp
Card dalam bootstrap memiliki banyak manfaat. Conthnya saat pembuatan portal atau pembuatan kartu nama dalam web. Card merupakan hal baru dalam Bootstrap 4, jika di Bootsrap card menggantikan panel.
Referensi
0 Response to "Tutorial Bootstrap Part 15: Card"
Post a Comment