Desain Web 1 Oleh Dita Rizki Amalia.

Presentasi berjudul: "Desain Web 1 Oleh Dita Rizki Amalia."— Transcript presentasi:

1 Desain Web 1 Oleh Dita Rizki Amalia

2 Pertemuan Sesi 9 Bootstrap table Bootstrap Images Bootstrap Jumbotron

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

4 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">

5 Table Warna pada tabel

6 Table Warna pada tabel (output)

7 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

8 Images Bootstrap Image Shape 1. ROUNDED IMAGES (output)

9 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">

10 Images Bootstrap Image Shape 2. CIRCLE IMAGES (output)

11 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.

12 Images Bootstrap Image Shape 3. Thumbnail Images (output)

13 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">

14 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>

15 Jumbotron output

16 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