Blog Request tutorial? klik disini!

  • Cara Membuat Thumbnail Pada Bootstrap

    Ditulis oleh: Faizal Rafik
    3616 kali dibaca
    21 Aug / 2014 10:20

    Halloo teman-teman, pada tutorial kali ini saya akan mengajarkan bagaimana caranya membuat Thumbnail pada Bootstrap. Thumbnail didalam Bootstrap biasanya digunakan untuk mengatur layout Gambar, Video, Teks, dan lain-lainnya didalam sebuah kotak. Nah Bootstrap mempunyai cara yang mudah untuk mengatur itu semua caranya dengan menggunakan Thumbnail.

    Default Thumbnails

    Berikut adalah cara menggunakan Thumbnails didalam Bootstrap :

    - Kalian bisa membuat tag <a> kemudian, kalian bisa menambahkan class thumbnail.

    - Thumbnails yang terdapat pada bootstrap ini sudah memiliki jarak dalam (padding) dan border.

    - Pada saat kalian arahkan kursor ke gambar atau kalian hover gambar tersebut, maka akan terdapat animasi efek border berwarna biru.

    Berikut adalah contoh Source Code nya :

    JIka kalian jalankan maka hasinya seperti gambar dibawah ini :

    Adding Custom Content

    Sekarang kita akan mencoba menambahkan sebuah Judul, Paragraph, dan Button didalam Thumbnails tersebut. Caranya :

    - Kalian bisa rubah tag <a> menjadi tag <div>.

    - Kemudian didalam tag <div> kalian bisa tambahkan atribut class dengan nama Thumbnails.

    - Dan buat satu tag <div> kembali didalam div class thumbnails, dan beri nama class caption untuk isi contentnya.

    Berikut adalah contoh Source Code nya:

    Jika dijalankan maka hasilnya akan seperti gambar dibawah ini :

    Demo | Download Source






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