Belajar Menampilkan Gambar dengan Bootstrap

A. Judul

B. Pendahuluan

1) Pengertian

Bootstrap adalah sebuah library framework CSS yang dibuat khusus untuk bagian pengembangan front-end website. Bootstrap merupakan salah satu framework HTML. CSS dan Javascript yang paling popular di kalangan web developer.

2) Latar Belakang dan Batasan Permasalahan

Pada saat ini hamper semua web developer telah menggunakan bootstrap untuk membuat tampilan front-end menjadi lebih mudah dan sangat cepat. Karena anda hanya perlu menambahkan class-class tertentu untuk misalnya membuat tombol, grid, navigasi dan lainnya.

3) Maksud dan Tujuan

Tentu anda bertanya-tanya kenapa banyak yang menggunakan bootstrap dalam pengembangan website. Berikut ini akan dijelaskan beberapa kegunaan yang telah menjadi kelebihan pada bootstrap. Adapun beberapa kelebihan bootstrap adalah sebagai berikut.

· Penggunaan bootstrap sangat menghemat waktu.

· Tampilan bootstrap yang sudah cukup terlihat modern.

· Mobile Friendly yang maksudnya tampilan bootstrap sudah sangat responsive, yaitu tampilan bootstrap sudah mendukung segala jenis resolusi, baik itu pc, laptop, tablet, dan smartphone.

· Sangat ringan karena bootstrap dibuat dengan sangat terstruktur.

· Dan masih banyak lagi kelebihan dan kegunaan dari bootstrap yang akan anda temukan sendiri setelah mencoba membangun sebuah aplikasi berbasis web dengan menggunakan bantuan framework css bootstrap.

4) Hasil yang didapatkan

Dapat menggunakan dan memanfaatkan bootstrap dengan benar dan baik.

C. Alat dan Bahan

1. Laptop

2. File Items

3. Text Editor

4. Browser

D. Hasil yang didapatkan

1. .img-rounded

Contoh :

Hasilnya terlihat jika pada sudut-sudut gambar itu tidak siku-siku tapi agak melengkung :

2. .img-circle

Contoh :

Hasilnya :

3. .img-thumbnail

Contoh :

Hasilnya dipinggir gambar seperti terlihat ada garis pinggirnya :

4. Responsif Image

Gambar dating dalam semua ukuran. Begitu juga layarnya. Gambar responsif secara otomatis menyesuaikan agar sesuai dengan ukuran layar.

Contoh :

Hasil :

5. Image Gallery

Anda juga bisa menggunakan system grid Bootstrap bersamaan dengan kelas .thumbnail untuk membuat galeri gambar.

6. Jumbotron

E. Temuan permasalahan

Saat saya mengulang-ulangi terus dalam masukannya lalu saya save terus itu membuat web yang kita buat menggunakan bootstrap akan tidak sesuai dengan masukkan kita.

F. Kesimpulan

Untuk anda yang pemula saya sarankan saat anda mempraktikkan apa yang saya informasikan ini yang pertama jangan langsung kalian coba sekaligus semua tapi satu per satu dalam setiap kelasnya. Setelah anda coba satu per satu, dan terlihat hasilnya baru kalian menggabungkan semua kelas.