Desain Web 1 Oleh Dita Rizki Amalia

Pertemuan Sesi 9 Bootstrap table Bootstrap Images Bootstrap Jumbotron

Table Tabel di bootstrap, paling mendasar adalah hanya memanggil satu class .table contoh implementasinya seperti ini.

Table Ada class lagi untuk table di bootstrap, yaitu untuk tables stripped seperti zebra. Anda tinggal menambah class .table-stripped setelah class .table . implementasinya beigini. <table class="table table-striped"> Ada lagi, jika anda ingin table nya ber border.Tinggal ubah class .table-stripped tadi dengan class .table-bordered . implementasinya seperti ini. <table class="table table-bordered"> Untuk menggunakan efek hover gunakan .table-hover ini bisa di gunakan berbarengan dengan .table-bordered maupun .table-stripped . implementasinya begini. <table class="table table-bordered table-hover">

Table Warna pada tabel

Table Warna pada tabel (output)

Images Bootstrap Image Shape 1. ROUNDED IMAGES Pertama adalah rounded images, contohnya seperti gambar pertama di atas, caranya cukup mudah, hanya tinggal menambah class .img-rounded

Images Bootstrap Image Shape 1. ROUNDED IMAGES (output)

Images Bootstrap Image Shape 2. CIRCLE IMAGES Yang kedua adalah circle images / gambar bundar seperti contoh nomor dua di atas, caranya sama dengan di atas hanya mengganti class nya saja dengan class .img-circle , implementasinya begini, kita tetap memakai gambar yang pertama saja ya. <img src="img/gambar1.jpg" class="img-circle" alt="gambar kedua"width="304" height="236">

Images Bootstrap Image Shape 2. CIRCLE IMAGES (output)

Images Bootstrap Image Shape 3. THUMBNAIL IMAGES Yang ketiga thumbnail images , seperti contoh nomor tiga di atas, caranya pun sama hanya mengganti class nya saja dengan class .img-thumbnail , implementasinya begini, kita tetap memakai gambar pertama.

Images Bootstrap Image Shape 3. Thumbnail Images (output)

Images Responsive Images .img-responsive nah dengan class tersebut maka gambar kita akan menjadi responsive, implementasinya begini. <img src="img/gambar1.jpg" class="img-thumbnail img-responsive" alt="gambar responsive"width="304" height="236">

Jumbotron Cara menggunakan nya, kita tinggal menambah class .jumbotron di <div> , implementasinya begini. <div class="container"> <div class="jumbotron"> <h1>Bootstrap Tutorial</h1> <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p> </div> <p>This is some text.</p> <p>This is another text.</p>

Jumbotron output

Latihan Buatlah sebuah gallery berisi gambar dengan menggunakan variasi bootstrap di dalamnya! Gunakan jumbotron untuk header/judulnya Gunakan shapes dan responsive image untuk gambar Gunakan tabel untuk layoutnya