Tutorial Bootstrap 4

Tutorial Belajar Bootstrap 4 Part 24 – Membuat Tampilan Web dengan Bootstrap

Selamat datang lagi dalam tutorial warungbelajar, masih dalam seri tutorial bootstrap 4, di tutorial part ke 24 ini yang juga merupakan part terakhir tutorial bootstrap 4, kita akan membahas cara membuat tampilan web dengan bootstrap.

Sebenarnya pada website resmi dari bootstrap telah menyediakan beberapa contoh yang bisa kita gunakan atau kita modifikasi untuk tampilan website anda, silahkan anda bisa mengakses dokumentasi resmi bootstrap https://getbootstrap.com/docs/4.0/examples/

nah dalam tutorial kita kita akan belajar untuk memodifikasi salah satu contoh yang terdapat pada website bootstrap, serta memahami bagian – bagian code yang ditulis.

 

Cara membuat tampilan web dengan bootstrap

sebagai tahap awal kita perlu mempersiapkan terlebih dahulu bahan untuk tampilan webnya, disini kita gunakan file  library bootstrap secara offline ya seperti file JS ataupun file CSS.

untuk struktur dari data yang ada pada folder belajarnya adalah seperti berikut ini :

Keterangan :

  • Untuk folder bootstrap adalah hasil extract dari file bootstrap dari website resmi bootstrap https://getbootstrap.com/docs/4.0/getting-started/download/
  • untuk folder assets kita gunakan untuk menyimpan data dari image dan file js tambahan
  • untuk file jquery.min.js anda bisa anda download di https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
  • untuk file popper.min.js anda bisa download di https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js

 

Tenang nanti diakhir tutorial kita akan sertakan file hasil belajarnya untuk bahan belajar, nah kita asumsikan anda sudah menyiapkan file – filenya, lalu kita buka file index.html, isi dari skripnya adalah sebagai berikut :

Ketika kita buka di browser maka hasilnya adalah sebagai berikut :

Keterangan :

  • Perhatikan pada line 35 – 68, skrip yang ditulis di antara tag <header>  </header> ditampilkan sebagai header dari tampilan web, disana dituliskan menu navigasi baik dalam bentuk logo, dan menu dropdown, jika anda belum mengetahui mengenai cara membuat menu navigasi silahkan buka tutorial warung belajar sebelumnya mengenai membuat menu navigasi dengan bootstrap
  • Perhatikan pada line 70 – 207, skrip yang ditulis diantara tag <main> </main> akan ditampilkan pada bagian content utama web, tepatnya berada dibawah header
  • Perhatikan pada line 72 – 113, skrip yang ditulis digunakan untuk menampilkan carousel, anda bisa memodifikasi skrip yang ditulis, jika anda belum mengetahui apa itu carousel bisa membaca tutorial kami sebelumnya cara membuat carousel dengan bootstrap
  • Perhatikan pada line 115 – 206, skrip yang ditulis untuk menampilkan content web setelah carousel, pada setiap bagian kotak kita buat dengan tag <div> dan menambahkan class col-md-4, angka 4 disini yang membuat dalam satu baris akan ditampilkan 3 bagian kotak, jika ada belum mengetahui mengenai grid system bisa membaca tutorial kami sebelumnya mengenal grid system bootstrap
  • Perhatikan pada line 214 – 216, skrip yang ditulis diantara tag <footer> </footer> digunakan untuk membuat footer dari tampilan web

 

Membuat Tampilan website lainnya

Nah gimana mudah kan ? jika anda ingin membuat tampilan website lainnya, anda bisa menggunakan contoh yang diberikan bootstrap, silahkan masuk ke dokumentasi resmi bootstrap https://getbootstrap.com/docs/4.0/examples/

disana disediakan beberapa tampilan yang bisa anda modifikasi, semisal anda pilih salah satu, semisal kita pilih tampilan Album, silahkan langsung di klik saja, maka akan tampil halaman yang anda pilih.

 

nah berikutnya silahkan klik kanan –> Lihat Sumber Halaman atau bisa menekan Ctrl + U di Keyboard untuk menampilkan source code dari tampilan tersebut.

 

nah source code inilah yang bisa anda copy paste ke text editor, dan silahkan ganti posisi dari library Bootstrap untuk Js dan CSS, serta gambar gambar yang anda ingin rubah.

 

 

Mencari Template Bootstrap

Alternative lain jika anda ingin membuat tampilan website dengan bootstrap adalah dengan download theme yang sudah jadi, di luar sana banyak sekali web yang membagikan theme bootstrap secara Free, selain free banyak juga yang menjual theme Bootstrap, nah kali ini warung belajar akan membahas web – web yang memberikan theme bootstrap yang free

Silahkan buka google lalu ketikkan keyword “Free Bootstrap Theme”

banyak kan, dan itu semua free lho, anda gak perlu membuat tampilan webnya dari awal, cukup download dan modifikasi.

semisal kita ambil salah satu contoh web startbootstrap.com, web ini menyediakan theme bootstrap yang bisa download secara free.

 

Anda tinggal pilih dan download theme yang ada inginkan

 

Semisal anda ingin download theme Creative, silahkan Klik pada tombol “Preview & Download”

 

maka akan ditampilkan detail dari tampilan theme, silahkan klik tombol download untuk mendownload dari theme tersebut.

 

silahkan simpan ditempat yang anda inginkan, dan nanti hasilnya downloadnya silahkan di extract menggunakan winzip atau winrar.

 

hasilnya nanti akan membuat folder dengan nama yang sama dengan file zip hasil download theme

silahkan masuk ke folder tersebut, maka anda akan menemui file index.html, nah file ini bisa anda buka di text editor seperti sublime atau notepad++ dan bisa anda modifikasi sesuai keinginan anda

 

jika file ini dibuka di browser maka hasilnya akan menampilkan theme yang seperti anda pilih di web startbootstrap.com

 

bagaimana mudah kan teman – teman, anda bisa menggunakan contoh yang ada di dokumentasi resmi bootstrap, ataupun bisa download di website lain yang menyediakan theme bootstrap yang bisa digunakan secara free, tinggal search aja di google dengan keyword “Free Bootstrap Theme”, untuk file hasil belajar silahkan bisa di download disini

Baik sekian dulu teman – teman pembahasan mengenai cara membuat tampilan web dengan bootstrap, jika ada yang ingin didiskusikan silahkan di kolom komentar, sekian dulu sampai jumpa di tutorial – tutorial berikutnya.

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *