Bootstrap Images

I.Latar Belakang.
Membuat suatu tampilan dengan Bootsrap.

II.Alat dan Bahan.
  Laptop / PC
  W3SCHOOLS
  Sublime Text

III.Tujuan.
Agar tampilan suatu program itu responsiv.

IV.Penjelasan.

Bootstrap Images

Rounded Corners
Kelas img-bulat 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">

Circle
Kelas img-lingkaran membentuk gambar ke lingkaran (IE8 tidak mendukung sudut dibulatkan):
Contoh

<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre" width="304" height="236">

Thumbnail
Kelas img-thumbnail membentuk gambar untuk thumbnail:
Contoh

<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236">

Responsive Images
Gambar datang dalam semua ukuran. Begitu layar. gambar responsif secara otomatis menyesuaikan agar sesuai dengan ukuran layar.

Membuat gambar responsif dengan menambahkan kelas img-responsif terhadap <img> tag. gambar maka akan skala baik untuk elemen induk.

Kelas img-responsif berlaku display: block; dan max-width: 100%; dan height: auto; untuk gambar:
Contoh

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

Image Gallery
Catatan: Anda akan belajar lebih banyak tentang Sistem Grid kemudian dalam tutorial ini (cara membuat layout dengan jumlah yang berbeda dari kolom).
Contoh

 <div class="row">
  <div class="col-md-4">
    <div class="thumbnail">
      <a href="/w3images/lights.jpg">
        <img src="/w3images/lights.jpg" alt="Lights" style="width:100%">
        <div class="caption">
          <p>Lorem ipsum...</p>
        </div>
      </a>
    </div>
  </div>
  <div class="col-md-4">
    <div class="thumbnail">
      <a href="/w3images/nature.jpg">
        <img src="/w3images/nature.jpg" alt="Nature" style="width:100%">
        <div class="caption">
          <p>Lorem ipsum...</p>
        </div>
      </a>
    </div>
  </div>
  <div class="col-md-4">
    <div class="thumbnail">
      <a href="/w3images/fjords.jpg">
        <img src="/w3images/fjords.jpg" alt="Fjords" style="width:100%">
        <div class="caption">
          <p>Lorem ipsum...</p>
        </div>
      </a>
    </div>
  </div>
</div>
Responsive Embeds
Juga membiarkan video atau slideshow skala dengan benar pada perangkat apapun.

Kelas dapat diterapkan langsung ke <iframe>, <embed>, <video>, dan <object> elemen.

Contoh berikut membuat video responsif dengan menambahkan kelas .embed-responsif-item 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>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
Apa aspek rasio?
Aspek rasio gambar menggambarkan hubungan proporsional antara lebar dan tinggi nya. 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 aspek
kelas ratio:

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Contoh :

 

Maka outputnya : 

V.Kesimpulan.
Kita bisa gunakan bootstrap untuk membantu kita membuat tampilan

VI.Refrensi.
https://www.w3schools.com/bootstrap/default.asp