Bootstrap Bentuk Gambar
Sudut tumpul:
Lingkaran:
thumbnail:
Sudut tumpul
The .img-rounded kelas menambahkan sudut bulat untuk gambar (IE8 tidak mendukung sudut dibulatkan):
Contoh
<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre"
width="304" height="236"> Cobalah sendiri " Lingkaran
The .img-circle kelas bentuk gambar ke lingkaran (IE8 tidak mendukung sudut dibulatkan):
Contoh
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre"
width="304" height="236"> Cobalah sendiri " kuku ibu jari
The .img-thumbnail kelas membentuk gambar untuk thumbnail:
Contoh
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre"
width="304" height="236"> Cobalah sendiri " Gambar responsif
Gambar datang dalam semua ukuran. Jadi lakukan layar. gambar responsif secara otomatis menyesuaikan agar sesuai dengan ukuran layar.
Membuat gambar responsif dengan menambahkan .img-responsive kelas ke <img> tag. gambar maka akan skala baik untuk elemen induk.
The .img-responsive kelas berlaku display: block; dan max-width: 100%; dan height: auto; untuk gambar:
Galeri Foto
Anda juga dapat menggunakan Bootstrap's sistem grid dalam hubungannya dengan .thumbnail kelas untuk membuat galeri gambar:
Contoh
<div class="row">
<div class="col-md-4">
<a href="pulpitrock.jpg" class="thumbnail">
<p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
<img src="pulpitrock.jpg" alt="Pulpit
Rock" style="width:150px;height:150px">
</a>
</div>
<div
class="col-md-4">
<a href="moustiers-sainte-marie.jpg"
class="thumbnail">
<p>Moustiers-Sainte-Marie:
Considered as one of the "most beautiful villages of France".</p>
<img src="moustiers-sainte-marie.jpg" alt="Moustiers Sainte Marie"
style="width:150px;height:150px">
</a>
</div>
<div class="col-md-4">
<a href="cinqueterre.jpg" class="thumbnail">
<p>The Cinque Terre: A rugged portion of coast in the Liguria region of
Italy.</p>
<img src="cinqueterre.jpg"
alt="Cinque Terre" style="width:150px;height:150px">
</a>
</div>
</div> Cobalah sendiri " Sematan responsif
Juga membiarkan video atau slideshow skala benar pada perangkat apapun.
Kelas dapat diterapkan langsung ke <iframe>, <embed>, <video> , dan <object> elemen.
Contoh berikut membuat video responsif dengan menambahkan .embed-responsive-item kelas ke <iframe> tag (video maka akan skala baik untuk elemen induk). Yang berisi <div> mendefinisikan aspek rasio video:
Contoh
<div class="embed-responsive embed-responsive-16by9">
<iframe
class="embed-responsive-item" src="..."></iframe>
</div> Cobalah sendiri " Apa aspek rasio?
Aspek rasio gambar menggambarkan hubungan proporsional antara lebar dan tingginya. Dua video umum rasio aspek 4: 3 (format video yang universal abad ke-20), dan 16: 9 (universal untuk televisi HD dan televisi digital Eropa).
Anda dapat memilih antara dua kelas rasio aspek:
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe
class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe
class="embed-responsive-item" src="..."></iframe>
</div>Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 » Latihan 4»
Lengkap Bootstrap Gambar Referensi
Untuk referensi yang lengkap dari semua kelas gambar, pergi ke lengkap kami Bootstrap Gambar Referensi .