Tutorial Bootstrap : Tables, Images, dan Jumbotron

Bootstrap : Tables, Images, dan Jumbotron

Assalamu'alikum W. W.
A. Pendahuluan

Halo, pada kesempataan kali ini saya akan menjelaskan cara mengatur table, images, dan jumbotron di bootstrap.

1.Pengertian

Bootstrap adalah sebuah framework yang bersifat open source. Bootstrap adalah sebuah framework yang digunakan untuk membuat sebuah website dinamis dengan menggunakan bahasa script CSS. Bootstrap dapat membantu developer dan designer dalam membuat sebuah tampilan website dengan cepat dan mudah tanpa harus membuatnya dari awal.

2.Latar Belakang
Mencari cara agar dapat membuat front end website dengan bagus, responsive, dan efektif. Tanpa harus membutuhkan waktu yang lama.

3.Maksud dan Tujuan
Paham dan dapat menggunakan Bootstrap, sehingga pengembangan front end dapat dilakukan dengan mudah.

B. Alat dan Bahan

- PC

- Text Editor

- Web Browser
C. Jangka Waktu Pelaksanaan

-
D. Penjelasan

Table
1. Boostrap 4 Basic Table

Ini adalah table default untuk bootstrap, kalian dapat menggunakan dengan cara mengisi class tblea dengan ".table" contoh : "<table class="table"> </table> : .

2. Striped Rows

Ini adalah pengaturan table yang memiliki strp warna seling - seling di setiap barisnya.

3. Border Table

Ini adalah pengaturan table pada bootstrap yang menambahkan border di semua bagian table.

4. Hover Rows

Ini adalah pengaturan tabel yang ketika mouse diletakan di baris, background baris tersebut akan berubah warna.

5. Black / Dark Table

Ini adalah pengaturan table agar background tabel-nya berwarna gelap.

6. Dark Striped Table

Ini adalah pengaturan table agar background tabel-nya berwarna gelap dan juga warnanya akan selang seling di setiap baris.

7. Hoverable Dark Table

Ini adalah pengaturan tabel agar background tabel-nya berwarna gelap dan ketika ada mouse di atasnya baris akan berubah warna.

8. Contextual Clasess

Ini adalah pengaturan table yang disetiap barisnya warnanya berbeda.

9. Table Head Color

Ini adalah pengaturan untuk merubah warna header table.

10. Responsive Table

Ini adalah pengaturan table agar bagus untuk semua device.

Contoh penggunaan :

Images
1. Bootstrap 4 Image Shapes

Di sini kita dapat mengatur bentuk gambar, kita dapat mengatur gambar menjadi agak lonjong, bundar, dan kotak.

2. Aligning Image

Di sini kita akan mengatur di mana gambar diletakan, kanan / kiri.

3. Responsive Images

Di sini kita akan mengatur gambar agar dapat menyesuaikan ukuran dari layar.

Contoh penggunaan :

jumbotron

Bootstrap 4 Jumbotron
Jumbotron menunjukkan kotak abu-abu besar untuk memberi fokus pada beberapa konten atau informasi khusus.

Bootstrap 4 Jumbotron fluid

Seperti jumbotron namun disini jumbotronnya melebar penuh.

Contoh prnggunaan :

E. Kesimpulan

>Untuk membuat sebuah website yang bagus, kita harus dapat memilih table yang sesuai dengan isinya.
>Untuk membuat sebuah website yang bagus, kita harus mengatur gambar yang digunakan dengan baik dan benar agar website tersebut lebih bagus untuk dilihat.
>Untuk membuat sebuah website yang bagus di bootstrap kita harus memahami jumbotron terlebih dahulu. F. Referensi

https://id.wikipedia.org/wiki/PHP_Bootstrap
https://www.w3schools.com/bootstrap4/bootstrap_tables.asp
https://www.w3schools.com/bootstrap4/bootstrap_images.asp
https://www.w3schools.com/bootstrap4/bootstrap_jumbotron.asp

Wasalamu'alaikum W. W.

Share this post