Latest web development tutorials

thumbnail bootstrap

Bab ini akan menjelaskan thumbnail Bootstrap. Kebanyakan situs memerlukan gambar tata letak, video, teks, dll di grid. thumbnail bootstrap untuk ini menyediakan cara mudah. Untuk menggunakan Bootstrap membuat thumbnail sebagai berikut:

  • Tambahkan <a> sekitar tag gambar dengan .thumbnailkelas.
  • Hal ini akan menambah padding (padding) empat piksel dan perbatasan abu-abu.
  • Ketika mouse di atas gambar, animasi akan menunjukkan garis besar gambar.

Contoh berikut menggambarkan thumbnail default:

contoh

<Div class = "row"> <Div class = "col-sm-6 col-md-3"> <A href = "#" class = "thumbnail"> <Img src = "/wp-content/uploads/2014/06/kittens.jpg" alt = "generik placeholder thumbnail"> </ A> </ Div> <Div class = "col-sm-6 col-md-3"> <A href = "#" class = "thumbnail"> <Img src = "/wp-content/uploads/2014/06/kittens.jpg" alt = "generik placeholder thumbnail"> </ A> </ Div> <Div class = "col-sm-6 col-md-3"> <A href = "#" class = "thumbnail"> <Img src = "/wp-content/uploads/2014/06/kittens.jpg" alt = "generik placeholder thumbnail"> </ A> </ Div> <Div class = "col-sm-6 col-md-3"> <A href = "#" class = "thumbnail"> <Img src = "/wp-content/uploads/2014/06/kittens.jpg" alt = "generik placeholder thumbnail"> </ A> </ Div> </ Div>

Coba »

Hasilnya adalah sebagai berikut:

thumbnail

Tambahkan konten kustom

Sekarang bahwa kita memiliki thumbnail dasar, kita bisa menambahkan berbagai konten untuk thumbnail HTML, seperti judul, paragraf, atau tombol. langkah-langkah spesifik adalah sebagai berikut:

  • Label <a> dengankelas .thumbnail berubah <div>.
  • Dalam <div> dalam, Anda dapat menambahkan apa pun yang Anda ingin menambahkan. Karena ini adalah <div>, kita bisa menggunakan default penamaan aturan berdasarkan rentang untuk menyesuaikan ukuran.
  • Jika Anda ingin kelompok beberapa gambar, silakan menempatkan mereka dalam daftar unordered, dan setiap item daftar dibiarkan mengambang.

Contoh berikut menggambarkan hal ini:

contoh

<Div class = "row"> <Div class = "col-sm-6 col-md-3"> <Div class = "thumbnail"> <Img src = "/wp-content/uploads/2014/06/kittens.jpg" alt = "generik placeholder thumbnail"> <Div class = "caption"> tab <H3> Thumbnail </ h3> <P> Beberapa contoh teks. Beberapa contoh teks. </ P> <P> <A href = "#" class = "btn btn-utama" Peran = "button"> tombol </ a> <A href = "#" class = "btn btn-default" Peran = "button"> tombol </ a> </ P> </ Div> </ Div> </ Div> <Div class = "col-sm-6 col-md-3"> <Div class = "thumbnail"> <Img src = "/wp-content/uploads/2014/06/kittens.jpg" alt = "generik placeholder thumbnail"> <Div class = "caption"> tab <H3> Thumbnail </ h3> <P> Beberapa contoh teks. Beberapa contoh teks. </ P> <P> <A href = "#" class = "btn btn-utama" Peran = "button"> tombol </ a> <A href = "#" class = "btn btn-default" Peran = "button"> tombol </ a> </ P> </ Div> </ Div> </ Div> <Div class = "col-sm-6 col-md-3"> <Div class = "thumbnail"> <Img src = "/wp-content/uploads/2014/06/kittens.jpg" alt = "generik placeholder thumbnail"> <Div class = "caption"> tab <H3> Thumbnail </ h3> <P> Beberapa contoh teks. Beberapa contoh teks. </ P> <P> <A href = "#" class = "btn btn-utama" Peran = "button"> tombol </ a> <A href = "#" class = "btn btn-default" Peran = "button"> tombol </ a> </ P> </ Div> </ Div> </ Div> <Div class = "col-sm-6 col-md-3"> <Div class = "thumbnail"> <Img src = "/wp-content/uploads/2014/06/kittens.jpg" alt = "generik placeholder thumbnail"> <Div class = "caption"> tab <H3> Thumbnail </ h3> <P> Beberapa contoh teks. Beberapa contoh teks. </ P> <P> <A href = "#" class = "btn btn-utama" Peran = "button"> tombol </ a> <A href = "#" class = "btn btn-default" Peran = "button"> tombol </ a> </ P> </ Div> </ Div> </ Div> </ Div>

Coba »

Hasilnya adalah sebagai berikut:

kustom Thumbnail