Your browser does not support JavaScript!

Gaswad.Com

— Apapun Informasinya Yang Penting Berguna
    Follow :

Tutorial : Cara Membuat Web Responsif (Mobile Version) Dengan Bootstrap – Part 1
Sep 30th, 2017

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

Category : Tutorials | Posted by G-admin at at September 30th, 2017 11:33 am
5691 | 6

Bootstrap merupakan salah satu CSS Framework yang paling banyak di gunakan oleh para pengembang web saat ini, bagi kalian yang masih belum tau dan mengerti apa yang di maksud dengan Web Framework, maka silahkan kalian merujuk ke link berikut :

Bootstrap sendiri berfungsi untuk membantu menampilkan website kalian secara responsif, dengan kata lain Bootstrap akan mengkondisikan tampilan website kalian sesuai dengan lebar halaman browser atau layar monitor atau gadget yang kalian gunakan, atau biasa di sebut dengan Mobile View, Mobile Responsive atau Mobile Version.

Kalian tentu pernah membuka suatu halaman website seperti website Gaswad.Com, saat kalian akses melalui Desktop atau layar monitor tampilannya berbeda dengan tampilan pada saat kalian akses melalui layar Gadget atau Mobile, itu di karenakan pada saat pembuatan template Gaswad.Com ini penulis memang sengaja membuatnya agar menjadi web responsif baik di layar dengan ukuran kecil (Mobile), sedang (Tablet) atau layar besar (Monitor / Monitor HD).

Untuk mengetahui apakah website kalian sudah Mobile Responsive atau belum coba kalian akses salah satu dari link berikut lalu masukan nama domain kalian.

Mengapa Harus Responsif?

Jika melihat perkembangan dunia maya saat ini website responsif sudah sangat di anjurkan oleh pakar SEO karena selain dapat menunjang SEO website kalian, website yang sudah responsif atau sudah mendukung tampilan Mobile Version dapat membuat tampilan di layar gadget menjadi lebih ringkas, selain itu juga dapat membuat pengunjung nyaman mengakses website kalian karena tidak terlalu banyak ‘pernak-pernik’ yang di tampilan seperti pada tampilan Full Version-nya, sedangkan dari sisi pengunjung tidak menutup kemungkinan akan membuat pengunjung website kalian akan kembali lagi karena kenyamanan yang di dapat pada saat mengakses website kalian tersebut.

 

Bekerja Dengan Bootstrap

Jika kalian lihat di dokumentasi resminya, sebenarnya sih’ sudah cukup jelas tapi mungkin ada beberapa dari kalian yang malah tambah bingung melihat dokumentasinya karena pakai Bahasa Inggris (kayak penulis dulu).

Untuk membuat web responsif dengan Bootstrap pertama-tama kalian harus paham dulu kalau tipe layar di bagi menjadi 3 jenis, yaitu :

  • Handphone
  • Tablet
  • Monitor
  • Monitor HD

Kalian sudah pasti tahu kalau tiap tipe-tipe layar tersebut memiliki resolusi yang berbeda-beda, nah’ resolusi-resolusi ini yang akan kalian jadikan acuan untuk membuat halaman website responsif, tentunya dengan bantuan dari Bootstrap.

Bootstrap memiliki aturan-aturan sebagai berikut untuk menentukan responsifitas dari sebuah halaman website berdasarkan resolusinya.

  • Handphone (320px – 767px)
  • Tablet (768px -991px)
  • Monitor (992px – 1199px)
  • Monitor HD (1200px – ~)

Karena tiap layar resolusinya berbeda-beda, maka Bootstrap membedakan class di dalam elemen-elemen HTML website berdasarkan resolusi layarnya pula, yaitu :

  • Handphone, menggunakan classcol-xs-1‘ s/d ‘col-xs-12
  • Tablet, menggunakan classcol-sm-1‘ s/d ‘col-sm-12
  • Monitor, menggunakan classcol-md-1‘ s/d ‘col-md-12
  • Monitor HD, menggunakan classcol-lg-1‘ s/d ‘col-lg-12

Class-class tersebut (col-xs-*; col-sm-*; col-md-*; col-lg-*) yang nanti akan kita gunakan untuk membuat web responsif, jadi sebaiknya kalau kalian hafal dengan class-class tersebut maka akan lebih baik.

Bootstrap sendiri bekerja berdasarkan Grid atau kolom dengan menggunakan class-class diatas untuk membentuk Grid-nya, jumlah penggunaan Grid yang akan di gunakan kalau di total harus berjumlah 12 Grid dalam satu baris (row).

Sebagai contoh silahkan kalian perhatikan gambar berikut :

Bagaimana? Sudah dapat bayangannya belum?? Pasti udah donk’, anak Indonesia khan pinter-pinter soalnya waktu masih bayi minumnya pasti ASI bukan Coca-cola. Ya’ ngga? Iya khan?? Yakiiinn?? Coba tanya ke emak-nya masing-masing ya’. 😀

Lalu kalau kalian perhatikan gambar di atas ada beberapa Grid dalam satu baris (row), nah’, Grid-grid atau kolom ini yang nantinya adalah tempat untuk menaruh isi konten-konten kalian.

Okey’, untuk cara kerja Bootstrap di atas penulis rasa sudah cukuplah yah’, sekarang kita lanjut ke pokok pembahasan utama dari artikel ini. Untuk membuat web responsif dengan menggunakan CSS Framework Bootstrap silahkan kalian ikuti langkah-langkah berikut.

 

1. Instalasi Bootstrap

Langkah pertama yang perlu kita lakukan ialah install Bootstrap ke dalam website kita. Dalam tutorial ini kita akan menggunakan Bootstrap versi 3.3.7, namun terlebih dahulu silahkan kalian download source code website static sederhana dari artikel berikut karena kita akan memodifikasi skrip HTML di dalamnya sedemikian rupa agar bisa menjadi web responsif :

Untuk kalian yang belum paham bagaimana membuat website static maka penulis sarankan untuk mempelajari tutorial di atas terlebih dahulu karena akan membantu kalian dalam memahami elemen-elemen class yang akan di gunakan oleh Bootstrap nanti.

Setelah source code-nya sudah kalian download dan kalian extract ke folder kalian, selanjutnya silahkan kalian buka file index.html-nya lalu tambahkan kode berikut ke dalam tag <head> :

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Setelah itu tambahkan pula baris kode berikut tepat sebelum tag </body> :

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Selesai, untuk instalasinya sangat mudah khan? Dalam instalasi Bootstrap diatas penulis menggunakan CDN Bootstrap karena di rasa paling ringkas dan cepat. Namun jika kalian ingin cara manual maka silahkan kalian terlebih dahulu download source code Bootstrap lalu load file ‘/css/bootstrap.min.css‘ ke dalam tag <head> dan file ‘/js/bootstrap.min.js‘ tepat sebelum tag </body>.

Source code Bootstrap dapat kalian download melalui link berikut :

Alhamdulillah… Untuk pengenalan dan instalasi Bootstrap penulis rasa sampai sini dulu yah‘, berhubung udah sore, mau hujan dan jari-jemari udah keriting, maka penulis akan sambung di artikel berikutnya.

Dalam artikel berikutnya kita akan lanjut ke penggunakan elemen-elemen Bootstrap ke dalam website statis sederhana yang sudah kita buat sebelumnya agar menjadi sebuah web responsif.

Jadi, bagi kalian yang belum mengikuti artikel Tutorial : Cara Membuat Web Statis Sederhana Dengan HTML, maka penulis sarankan untuk mengikutinya terlebih dahulu selagi penulis membuat sambungan untuk artikel ini. Salam…

Share social media :



Your response about this article :


6 responses to “Tutorial : Cara Membuat Web Responsif (Mobile Version) Dengan Bootstrap – Part 1”

  1. Rismawati says:

    Kreatif banget!!!
    Karena bersifat responsive atau dapat beradaptasi sesuai layar dan bisa diakses dengan mobile device, membuat pengunjung menjadi nyaman. Thanks Artikelnya bermanfaat

    Kunjungi web kampus saya : Atma Luhur

    Kunjungi web saya : Rismawati

  2. ridergoku says:

    Layout nya bisa beda gimana min?
    Contohnya sidebar mimin , versi pc dan hp beda kan?
    Klo pc terlihat secara inline klo di hp kita liat satu tombol dan waktu diklik keluar dari samping. Gimana tuh?

    • Oh, mungkin maksud agan Navbar ya gan? Soalnya konsepnya sama, saat di tampilan mobile view dy akan berubah jadi tombol kecil, kalau di klik baru isi menu-menunya keluar semua. Di Bootstrap udah nyediain fiturnya gan, silahkan merujuk ke URL ini,
      https://getbootstrap.com/docs/3.3/components/#navbar

      Bawaan Bootstrap dropdown-nya kebawah ky yang website ini pakai, kalau mau ke samping musti custom CSS lagi & ini ngga rekomen sih kalo buat ane, jadi mending pake bawaannya aja.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Latest Posts

Tutorial : Cara Install Composer
Tutorial : Cara Install Composer
Category : Others | June 5th, 2018
282 | 0

Apa Itu Composer? Composer adalah suatu aplikasi manajemen paket selain Node.js (npm) dan Ruby (bundler) yang menyediakan format standar untuk mengelola dependensi PHP dan library-library yang diperlukan. Sumber : Wikipedia Jadi secara garis besar, d...

Continue reading
Error Reported Attack Page! Waw… Domain Di Blacklist Google??
Error Reported Attack Page! Waw… Domain Di Blacklist Google??
Category : Tips & Tricks | November 13th, 2017
581 | 0

Seperti yang kalian lihat pada contoh tampilan gambar di atas, tampilan tersebut merupakan tampilan bahwa domain kalian di blacklist atau di blokir oleh Google, alhasil tentunya website kalian tidak akan bisa di akses. Ada yang pernah ngalamin?? Bebe...

Continue reading
Cara Menambah Ads Unit Atau Blok Iklan Adsense
Cara Menambah Ads Unit Atau Blok Iklan Adsense
Category : Tutorials | November 13th, 2017
1102 | 4

Halo para pembaca Gaswad yang ganteng dan yang cantik-cantik, yang jelek jangan kesinggung ya. Hehe… 😀 Ssetelah sekian lama ngga update akhirnya dapet kesempatan nyolong-nyolong waktu buat nge-update artikel Gaswad. Pada pembahasan artikel k...

Continue reading
Yang Baru Di Bootstrap 4
Yang Baru Di Bootstrap 4
Category : Others | October 31st, 2017
629 | 0

Tidak terasa baru saja beberapa waktu lalu penulis menulis artikel tentang Bagaimana Cara Membuat Web Responsif Dengan Boostrap yang masih menggunakan versi 3, ehh… udah nongol aja ini adeknya yang versi 4. Yaaa’, sebenarnya sih’ ud...

Continue reading
Tutorial : Cara Membuat Template WordPress – Part 5 (Complete)
Tutorial : Cara Membuat Template WordPress – Part 5 (Complete)
Category : Wordpress | October 24th, 2017
723 | 2

Artikel ini merupakan artikel terakhir tentang bagaimana cara membuat template WordPress, bagi kalian yang sudah tertinggal atau melewatkan artikel-artikel sebelumnya, maka silahkan kalian merujuk ke link berikut : Intro & Registering Template ...

Continue reading
Panduan SEO ala Google
Panduan SEO ala Google
Category : Tips & Tricks | October 24th, 2017
537 | 0

Kali ini penulis ingin memberikan beberapa tips dan panduan untuk meningkatkan SEO website kalian, beberapa panduan dan tips berikut secara kebetulan merupakan salah satu yang  di referensikan oleh Google agar website kalian dapat dengan mudah di cr...

Continue reading
Tutorial : Cara Membuat Template WordPress – Part 4
Tutorial : Cara Membuat Template WordPress – Part 4
Category : Wordpress | October 20th, 2017
787 | 0

Pada sesi ini kita akan membuat Menu Navigasi dan Sidebar pada halaman template yang sudah kita buat sebelumnya, sesi ini merupakan sambungan dari artikel-artikel berikut : Intro & Registering Template – Part 1 Frontpage, Header & Footer ...

Continue reading
Tutorial : Cara Membuat Template WordPress – Part 3
Tutorial : Cara Membuat Template WordPress – Part 3
Category : Wordpress | October 20th, 2017
619 | 0

Pada artikel kali ini kita akan melanjutkan bagaimana cara membuat template WordPress menyambung artikel sebelumnya. Pada sesi sebelumnya kita sudah berhasil membuat halaman Frontpage, Header dan Footer website, pada artikel kali ini kita akan coba m...

Continue reading
Cara Mendapatkan Uang Dengan Google Adsense
Cara Mendapatkan Uang Dengan Google Adsense
Category : Tutorials | October 16th, 2017
1156 | 2

Setelah beberapa waktu lalu di kantor penulis sempat heboh-hebohnya di karenakan fitur dari Google yang bernama Adsense ini, bagaimana tidak karena rekan-rekan penulis yang tadinya cuma browsing-browsing doang, youtube-an, download film, tidur, kesur...

Continue reading
Tutorial : Cara Membuat Template WordPress – Part 2
Tutorial : Cara Membuat Template WordPress – Part 2
Category : Wordpress | October 13th, 2017
697 | 0

Artikel ini merupakan sambungan dari artikel pertama, pada artikel sebelumnya kita sudah membahas bagaimana cara mendaftarkan template kita agar terbaca oleh aplikasi WordPress tepatnya di halaman Themes. Jadi bagi kalian yang belum membaca artikel t...

Continue reading
Cara Mendaftarkan Dan Melakukan Verifikasi Domain Di Google Search Console
Cara Mendaftarkan Dan Melakukan Verifikasi Domain Di Google Search Console
Category : Tutorials | October 12th, 2017
1341 | 2

Pada pertemuan kali ini (udah kayak anak kuliahan ajah), penulis ingin berbagi pengetahuan tentang bagaimana cara medaftarkan dan melakukan verifikasi domain kalian di Google Search Console. Bagi kalian yang masih bingung dan tidak tahu bagaimana car...

Continue reading
11 Cara Meningkatkan Keamanan Pada WordPress
11 Cara Meningkatkan Keamanan Pada WordPress
Category : Wordpress | October 10th, 2017
749 | 0

Pada artikel kali ini penulis ingin membagikan beberapa tips seputar keamanan pada website WordPress, yang kebetulan penulis dapat dari hasil searching-searching di Om’ Google. Seperti yang kalian ketahui saat ini WordPress merupakan salah satu...

Continue reading

Wordpress

  • Oct
    24
    2017
    Tutorial : Cara Membuat Template WordPress – Part 5 (Complete)
    Artikel ini merupakan artikel terakhir tentang bagaimana cara membuat template WordPress, bagi ...
    Read more
  • Oct
    20
    2017
    Tutorial : Cara Membuat Template WordPress – Part 4
    Pada sesi ini kita akan membuat Menu Navigasi dan Sidebar pada halaman template yang sudah kita...
    Read more
  • Oct
    20
    2017
    Tutorial : Cara Membuat Template WordPress – Part 3
    Pada artikel kali ini kita akan melanjutkan bagaimana cara membuat template WordPress menyambun...
    Read more
  • Oct
    13
    2017
    Tutorial : Cara Membuat Template WordPress – Part 2
    Artikel ini merupakan sambungan dari artikel pertama, pada artikel sebelumnya kita sudah membah...
    Read more
  • Oct
    10
    2017
    11 Cara Meningkatkan Keamanan Pada WordPress
    Pada artikel kali ini penulis ingin membagikan beberapa tips seputar keamanan pada website Word...
    Read more
  • More articles
Tips & Tricks

  • Oct
    18
    2018
    Syntax error or access violation: 1071 Specified key was too long
    Bagi kalian pengguna Framework Laravel, terutama Laravel mulai dari versi 5.4 keatas pasti pern...
    Read more
  • Aug
    14
    2018
    Iklan Adsense Di Website Kamu Ter-klik Sendiri? Nih! Tips-nya
    Hallo guys, akhirnya kita berjumpa lagi setelah sekian lama kita berpisah… Hallah… ...
    Read more
  • Nov
    13
    2017
    Error Reported Attack Page! Waw… Domain Di Blacklist Google??
    Seperti yang kalian lihat pada contoh tampilan gambar di atas, tampilan tersebut merupakan tamp...
    Read more
  • Oct
    24
    2017
    Panduan SEO ala Google
    Kali ini penulis ingin memberikan beberapa tips dan panduan untuk meningkatkan SEO website kali...
    Read more
  • Sep
    15
    2017
    Cara Mudah Download Video Youtube
    Bagi kita-kita yang suka menonton video dari Youtube pasti sering tiba-tiba terbesit seperti in...
    Read more
  • More articles
Tutorials

  • Oct
    18
    2018
    Tutorial : Belajar Menggunakan Laravel – Part 4 (Model & Konfigurasi Database)
    Halo para pembaca Gaswad, menyambung artikel tutorial Belajar Menggunakan Laravel sebelumnya, k...
    Read more
  • Oct
    09
    2018
    Tutorial : Belajar Menggunakan Laravel – Part 3 (View & Blade Template)
    Di artikel sebelumnya, kita sudah berhasil menampilkan output langsung dari halaman Controller ...
    Read more
  • Oct
    09
    2018
    Tutorial : Belajar Menggunakan Laravel – Part 2 (Routing & Controller)
    Pada artikel kali ini, kita akan belajar menggunakan Routing dan Controller dimana Routing dan ...
    Read more
  • Oct
    09
    2018
    Tutorial : Belajar Menggunakan Laravel – Part 1 (Instalasi Laravel)
    Halo para pembaca Gaswad yang setia menunggu artikel baru dari penulis (pede), setelah sekian ...
    Read more
  • Sep
    04
    2018
    Membuat Efek Gradasi Warna Menggunakan CSS
    Pada tutorial kali ini kita akan mencoba membuat gradasi warna, apa itu gradasi warna bisa kali...
    Read more
  • More articles
Others

  • Sep
    17
    2018
    Perbedaan Localhost Dan Web Hosting
    Halo ghaes… Bagi beberapa dari kalian pasti masih belum ada yang begitu paham bagaimana s...
    Read more
  • Jun
    05
    2018
    Tutorial : Cara Install Composer
    Apa Itu Composer? Composer adalah suatu aplikasi manajemen paket selain Node.js (npm) dan Ruby ...
    Read more
  • Oct
    31
    2017
    Yang Baru Di Bootstrap 4
    Tidak terasa baru saja beberapa waktu lalu penulis menulis artikel tentang Bagaimana Cara Membu...
    Read more
  • Oct
    09
    2017
    Pengertian Page View, Visitor Dan Bounce Rate
    Sebenarnya pada artikel kali ini penulis ingin membuat tutorial bagaimana cara membuat template...
    Read more
  • Sep
    29
    2017
    ​Apa Itu Web Framework?
    Beberapa dari kalian apalagi yang masih pemula dalam bidang pemrograman website pasti masih awa...
    Read more
  • More articles
Page generated in : 857.69 ms