Class dari bootstrap yang dapat digunakan untuk memberikan bayangan pada suatu element yaitu ….

Menampilkan gambar dalam suatu web adalah komponen penting, sehingga pada topik ini akan dibahas menampilkan gambar dengan berbagai macam media, teknik dan cara menampilkan gambar dengan menggunakan class css yang telah disediakan oleh bootstrap dan menampilkan slideshow dengan menggunakan carousel yang telah disediakan oleh getbootstrap.

• Catatan Singkat
• Download
• Challenge

responsive video dan images

Responsive image

• Berikut adalah langkah praktek siswa
  • Jalankan program bracket
  • Pilih menu File, Open folder, buka folder tempat anda bekerja
  • Pilih menu View, Horizontal split
  • Klik pada window bagian bawah
  • Pilih menu File, New
  • Tekan Ctrl + S dan simpan dengan nama image-video.css
  • Ketik kode css berikut:

.kiri, .tengah, .kanan {
  padding-top: 20px;   
  height: 1200px;   
  text-align: center;   
  color: white;   
  font-size: 20px;   
}
.kiri   {   background-color: #53777A; }  
.kanan  {   background-color: #C02942; }  
.tengah {   background-color: #542437; }

• Klik pada window bagian atas. Pilih menu File, New
  • Tekan Ctrl + S dan simpan dengan nama image-video.html

• Dengan menggunakan teknik emmet ketik perintah berikut:

• Ketik div.container-fluid>div.row>(div.col-sm-2.kiri)+(div.col-sm-8.tengah)+(div.col-sm-2.kanan)

  • Tambahkan kelas kiri, tengah dan kanan pada masing-masing kolom sehingga menjadi seperti berikut:

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-2 kiri">
    ...
    </div>
    <div class="col-sm-8 tengah">
    ...  
    </div>
    <div class="col-sm-2 kanan">
    ...  
    </div>
  </div>
</div>

• Pada kolom tengah tambahkan kode html berikut:
  • Ketik: img.img-fluid tekan tab
  • Kemudian arahkan ke gambar images/big1.jpg
  • Catatan:
  • Img-fluid ini di bootstrap 3 adalah img-responsive
  • Arti class ini adalah max-width=100% dan height = auto
  • Besar akan mengikuti area kolom yang tersedia dan tingginya akan selalu mengikuti perbandingan width sehingga gambar kan selalu dalam ukuran proporsional.
• Untuk mengatur bentuk frame dari image terdapat 3 class
  • img-rounded = ujung frame berbentuk rounded
  • img-circle = frame berbentuk lingkaran
  • img-thumbnail = frame berbentuk kotak berbingkai
• melakukan customize pada class img-fluid
  • pada file css tambahkan perintah berikut:

.img-fluid {
  border: 3px solid darkblue;
  box-shadow: rgba(0,0,0,0.5) 10px 20px 60px;
}

• Ketik img.img-circle.pull-sm-right tekan tab
  • Kemudian arahkan ke gambar images/icon/food.png
    
• Untuk mengatur perataan berikut teknik yang agak berbeda dengan umum:
  • pull-sm-left = rata kiri
  • center-block = rata-tengah
  • pull-sm-right = rata-kanan
• Penjelasan
  • Img-fluid adalah class yang disediakan bootstrap agar gambar responsive
  • Kita dapat mendefinisikan ulang aturan ini di css dan menambah settingnya
  • Rgba(0,0,0,0.4) artinya kita menambahkan shadow dengan warna hitam. Sedangkan digit yang terakhir 0.4 adalah 40% alpha artinya 50 persen transparan
  • 10px adalah digeser 10 pixel ke kanan, kalau ingin ke kiri diketik -10px
  • 20px artinya bayangan digeser ke bawah 20px
  • 60px adalah besar bayangan

Membuat Carousel

• Lakukan copy perintah carousel berikut dan letakkan pada kolom bagian tengah

<!-- Carousel -->
<div id="urutan1" class="carousel slide" data-interval="3000" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#urutan1" data-slide-to="0" class="active"></li>
    <li data-target="#urutan1" data-slide-to="1"></li>
    <li data-target="#urutan1" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img class="first-slide" src="gambar1.jpg" alt="First slide">
      <div class="container">
        <div class="carousel-caption text-xs-left">
          <h2>Judul1 </h2>
          <p>Keterangan 1</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Tombol 1</a></p>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <img class="second-slide" src="gambar2.jpg" alt="Second slide">
      <div class="container">
        <div class="carousel-caption">
          <h2>judul 2</h2>
          <p>Keterangan 2</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Tombol 2</a></p>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <img class="third-slide" src="gambar3.jpg" alt="Third slide">
      <div class="container">
        <div class="carousel-caption text-xs-right">
          <h2>judul 3</h2>
          <p>Keterangan 3</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Tombol 3</a></p>
        </div>
      </div>
    </div>
  </div>
  <a class="left carousel-control" href="#urutan1" role="button" data-slide="prev">
    <span class="fa fa-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#urutan1" role="button" data-slide="next">
    <span class="fa fa-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<!-- end carousel -->

• Ubah semua gambar dari tulisan gambar1.jpg menjadi images/big1.jpg, kemudian gambar2.jpg menjadi images/big2.jpg
• Untuk keterangan anda tidak perlu mengetik, anda dapat melakukan copy paste “Sebagian text” dari folder project bootstrap ini ada di dalam subfolder /ketikan/tingkat-kecerdasan-anjing.txt
  • Images/big1.jpg, judul = Tingkat kecerdasan
  • Images/big2.jpg, judul = Indera Penciuman
  • Images/big3.jpg, judul = Makanan
• cobalah untuk mengubah interval waktu slide carousel menjadi 4 detik.