image bootstrap
Dalam bab ini, kita akan belajar dukungan Bootstrap untuk gambar. Bootstrap menyediakan tiga dapat diterapkan pada gambar sederhana kelas gaya:
- img-bulat:Tambahkanborder-radius: 6pxuntuk mendapatkan fillet gambar.
- img-lingkaran:menambahkanborder-radius: 50%untuk membuat seluruh gambar menjadi melingkar.
- img-thumbnail:Tambahkan beberapa padding (padding) dan perbatasan abu-abu.
Perhatikan contoh berikut menunjukkan:
contoh
<Img src = "/wp-content/uploads/2014/06/download.png" class = "img-bulat">
<Img src = "/wp-content/uploads/2014/06/download.png" class = "img-lingkaran">
<Img src = "/wp-content/uploads/2014/06/download.png" class = "img-thumbnail">
Coba »
Hasilnya adalah sebagai berikut:
<Img> kelas
Kelas berikut tersedia untuk gambar apapun.
| kategori | deskripsi | contoh |
|---|---|---|
| .img-bulat | Menambahkan fillet gambar (IE8 tidak mendukung) | mencoba |
| .img-lingkaran | gambar menjadi melingkar (IE8 tidak mendukung) | mencoba |
| .img-thumbnail | thumbnail | mencoba |
| .img-responsif | Gambar Responsif (akan baik untuk skala elemen induk) | mencoba |
image responsif
Dengan <img> tag untuk menambahkan img-responsif kelas dukungan gambar untuk membuat desain responsif. Gambar akan baik skala untuk elemen induk.
img-responsif kelas max-width: 100%; dan height: auto; gaya diterapkan pada gambar: