Tutorial : Cara Membuat Web Responsif (Mobile Version) Dengan Bootstrap

Hallo… para pembaca Gaswad yang baik dan budiman, yang ganteng dan yang cantik, yang jelek halo juga deh… Setelah beribu-ribu menit dan detik berlalu, jam demi jam telah kita lewati, dari pagi hari sampai sore hari, akhirnya… sampai pada waktunya kita untuk berbuka puasa…??

Untuk para pembaca setia Gaswad, kali ini penulis ingin melanjutkan tutorial bagaimana cara membuat web responsif dengan menggunakan Bootstrap. Bagi kalian yang belum mengikuti tutorial sebelumnya silahkan merujuk ke link berikut :

Tutorial : Cara Membuat Web Responsif (Mobile Version) Dengan Bootstrap – Part 1

Jadi bagi kalian yang belum membaca dan memahami tutorial di atas, maka penulis sarankan untuk membacanya terlebih dahulu agar kalian tidak bingung dan mengerti bagaimana cara kerja Bootstrap, karena pada artikel ini kita akan berkutat dengan class-class Bootstrap.

Bagi kalian yang belum men-download source code web statik silahkan download dari artikel berikut :

Tutorial : Cara Membuat Web Statis Sederhana Dengan HTML

2. Menggunakan Bootstrap

Disini kita tetap menggunakan layout template yang sama dengan layout web statik sebelumnya, untuk menyegarkan kalian kembali, berikut adalah rancangan layout yang akan kita konversi menjadi web responsif dengan bantuan Bootstrap.

Dan berikut adalah tampilan web statik setelah selesai di buat :

Untuk tahap selanjutnya silahkan kalian ikuti langkah-langkah berikut :

Monitor (992px – 1199px)

Silahkan kalian extract file *.ZIP dari file source code yang sudah kalian download sebelumnya lalu Edit file ‘index.html‘ yang ada di dalamnya.
Jika kalian lihat pada layout di atas terdapat 3 section, yaitu section Header, Main Body, dan Footer, silahkan kalian tambahkan class ‘row‘ pada tiap elemen HTML dari ketiga section tersebut.
1. <header class="row">
2. <main class="row">
3. <footer class="row">
Jangan lupa untuk menambahkan juga class ‘container‘ ke dalam elemen <body>, class ‘container‘ ini sangat di butuhkan oleh Bootstrap karena berfungsi sebagai pembungkus dari class-class Bootstrap yang ada di dalamnya.
1. <body class="container">
Asumsi penulis saat ini kalian menggunakan layar Monitor, jadi silahkan gunakan class Bootstrap untuk tipe layar Monitor, yaitu ‘col-md-*‘, tambahkan class tersebut ke dalam sub-sub elemen yang ada pada ketiga section di atas.
1. 
2. <header class="row">
3. <div class="logo col-md-12">
4. ~~~
5. </div>
6. <div class="navigasi col-md-12">
7. ~~~
8. </div>
9. </header>
11. 
12. <main class="row">
13. <div class="konten col-md-9">
14. ~~~
15. </div>
16. <div class="sidebar col-md-3">
17. ~~~
18. </div>
19. </main>
21. 
22. <footer class="row">
23. <div class="footer col-md-12">
24. ~~~
25. </div>
26. </footer>
Bagi kalian yang bingung kenapa penulis menggunakan class ‘col-md-*‘, silahkan kalian baca kembali tutorial yang pertama.
- Handphone, menggunakan class ‘col-xs-1‘ s/d ‘col-xs-12‘
- Tablet, menggunakan class ‘col-sm-1‘ s/d ‘col-sm-12‘
- Monitor, menggunakan class ‘col-md-1‘ s/d ‘col-md-12‘
- Monitor HD, menggunakan class ‘col-lg-1‘ s/d ‘col-lg-12‘
Jika sudah, selanjutnya silahkan kalian buka file ‘layout.css‘, hapus semua kode CSS yang ada di dalamnya lalu ganti dengan kode CSS berikut :
1. .logo, .navigasi, .konten, .sidebar, .footer {
2. margin-bottom:15px;
3. padding:15px;
4. }
6. .logo {
7. background: #99D9EA;
8. text-align: center;
9. color: #fff;
10. }
12. .navigasi{
13. background: #99D9EA;
14. text-align: center;
15. }
17. .konten{
18. background: #EFE4B0;
19. }
21. .sidebar{
22. background: #FD7E00;
23. }
25. .footer{
26. background: #C3C3C3;
27. text-align: center;
28. }
30. .navigasi ul{
31. padding: 0;
32. list-style: none;
33. display: inline-block;
34. margin: 0;
35. }
37. .navigasi li{
38. float: left;
39. margin: 0 10px;
40. }
Perbedaan kode CSS di atas dengan yang sebelumnya yaitu lebih terletak pada pengaturan lebar tiap-tiap class yang mewakili elemen-elemen HTML di dalamnya. Pada Bootstrap, lebar elemen HTML sudah di sesuaikan secara otomatis semenjak kalian memasukan class ‘col-xs-*‘, ‘col-sm-*‘, ‘col-md-*‘ dan ‘col-lg-*‘ ke dalam elemen HTML, jadi kalian tidak perlu lagi mengeset lebar tiap-tiap elemen dengan menggunakan CSS seperti pada sebelumnya.
Selesai.

Bagaimana? Mudah bukan?? Tapi jangan senang dulu, pembuatan web responsif belum sepenuhnya selesai, langkah-langkah di atas hanya untuk tipe layar Monitor.

Selanjutnya kita lakukan penyesuaian untuk layar tipe Tablet dan Handphone, silahkan kalian ikuti langkah-langkah berikut :

Tablet (768px -991px)Sama seperti langkah sebelumnya, untuk layar tipe Tablet silahkan kalian gunakan class ‘col-sm-*‘ ke dalam sub-sub elemen yang ada pada ketiga section di atas.
1. 
2. <header class="row">
3. <div class="logo col-md-12 col-sm-12">
4. ~~~
5. </div>
6. <div class="navigasi col-md-12 col-sm-12">
7. ~~~
8. </div>
9. </header>
11. 
12. <main class="row">
13. <div class="konten col-md-9 col-sm-6">
14. ~~~
15. </div>
16. <div class="sidebar col-md-3 col-sm-6">
17. ~~~
18. </div>
19. </main>
21. 
22. <footer class="row">
23. <div class="footer col-md-12 col-sm-12">
24. ~~~
25. </div>
26. </footer>
Handphone (320px – 767px)Sedangkan untuk tipe layar Handphone silahkan kalian menggunakan class ‘col-xs-*‘, lalu seperti biasa tambahkan ke dalam sub-sub elemen yang ada pada ketiga section di atas.
1. 
2. <header class="row">
3. <div class="logo col-md-12 col-sm-12 col-xs-12">
4. ~~~
5. </div>
6. <div class="navigasi col-md-12 col-sm-12 col-xs-12">
7. ~~~
8. </div>
9. </header>
11. 
12. <main class="row">
13. <div class="konten col-md-9 col-sm-6 col-xs-12">
14. ~~~
15. </div>
16. <div class="sidebar col-md-3 col-sm-6 col-xs-12">
17. ~~~
18. </div>
19. </main>
21. 
22. <footer class="row">
23. <div class="footer col-md-12 col-sm-12 col-xs-12">
24. ~~~
25. </div>
26. </footer>

Jika kita tinjau lagi, maka untuk tipe layar Monitor, Tablet dan Handphone berdasarkan class-class Bootstrap yang sudah kita masukan maka akan di dapat tampilan layout sebagai berikut.

Monitor :

Untuk Monitor layoutnya tidak berbeda dengan layout di atas, karena acuannya memang ke layout ini.

Tablet :

Handphone :

3. Testing

Untuk pembuatan web responsif sudah selesai, saat ini web statis sudah mendukung Mobile Version dengan penambahan beberapa class-class Bootstrap. Pada langkah di atas penulis tidak menambahkan class ‘col-lg-*‘ untuk tipe Monitor HD karena dari pengalaman di lapangan penggunaan class ‘col-md-*‘ (Monitor) sudah cukup dapat meng-handle untuk tipe layar Monitor HD, namun jika kalian ingin tetap menambahkan class ‘col-lg-*‘ ke dalam elemen HTML di atas untuk tipe layar Monitor HD itupun tidak masalah.

Langkah terakhir, untuk melakukan pengetesan apakah web tersebut sudah benar-benar responsif atau belum silahkan kalian buka file ‘index.html‘ di browser kalian, lalu ikuti langkah-langkah berikut.

Mozilla Firefox & Google Chrome
- Tekan kombinasi tombol pada keyboard (CTRL+SHIFt+M) untuk menampilkan halaman dalam mode Responsive Design Mode.
- Pada saat kalian berhasil masuk ke mode Responsive Design Mode, di sini kalian dapat memilih tipe-tipe layar berdasarkan jenis Gadget-nya, seperti iPhone 6, Laptop, Google Nexus, dll.
- Untuk keluar dari mode Responsive Design Mode silahkan tekan kembali kombinasi tombol keyboard (CTRL+SHIFt+M).

Selesai! Sebenarnya masih banyak lagi fitur-fitur Bootstrap yang belum sempat penulis tulis di artikel ini seperti penggunaan Modals, Carousel, Button, Alert, Form, Label, dsb., mungkin di lain kesempatan akan penulis bahas fitur-fitur tersebut. Selamat mencoba…

Source code :

Download source code

Cari Blog Ini

Sofyan Yusuf © 2019