Your browser does not support JavaScript!

Gaswad.Com

— Apapun Informasinya Yang Penting Berguna
    Follow :

Tutorial : Cara Membuat Web Responsif (Mobile Version) Dengan Bootstrap – Part 2 (Complete)
Oct 5th, 2017

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

Category : Tutorials | Posted by G-admin at at October 5th, 2017 06:21 am
952 | 0

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 :

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 :

 

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)
  1. Silahkan kalian extract file *.ZIP dari file source code yang sudah kalian download sebelumnya lalu Edit file ‘index.html‘ yang ada di dalamnya.
  2. Jika kalian lihat pada layout di atas terdapat 3 section, yaitu section Header, Main Body, dan Footer, silahkan kalian tambahkan classrow‘ pada tiap elemen HTML dari ketiga section tersebut.
    <header class="row">
    <main class="row">
    <footer class="row">

    Jangan lupa untuk menambahkan juga classcontainer‘ ke dalam elemen <body>, classcontainer‘ ini sangat di butuhkan oleh Bootstrap karena berfungsi sebagai pembungkus dari class-class Bootstrap yang ada di dalamnya.

    <body class="container">
  3. 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.
    <!--HEADER SECTION-->
    <header class="row">
      <div class="logo col-md-12">
        ~~~
      </div>
      <div class="navigasi col-md-12">
        ~~~
      </div>
    </header>
    
    <!--MAIN BODY SECTION-->
    <main class="row">
      <div class="konten col-md-9">
        ~~~
      </div>
      <div class="sidebar col-md-3">
        ~~~
      </div>
    </main>
    
    <!--FOOTER SECTION-->
    <footer class="row">
      <div class="footer col-md-12">
        ~~~
      </div>
    </footer>

    Bagi kalian yang bingung kenapa penulis menggunakan classcol-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β€˜
  4. Jika sudah, selanjutnya silahkan kalian buka file ‘layout.css‘, hapus semua kode CSS yang ada di dalamnya lalu ganti dengan kode CSS berikut :
    .logo, .navigasi, .konten, .sidebar, .footer {
      margin-bottom:15px;
      padding:15px;
    }
    
    .logo {
      background: #99D9EA;
      text-align: center;
      color: #fff;
    }
    
    .navigasi{
      background: #99D9EA;
      text-align: center;
    }
    
    .konten{
      background: #EFE4B0;
    }
    
    .sidebar{
      background: #FD7E00;
    }
    
    .footer{
      background: #C3C3C3;
      text-align: center;
    }
    
    .navigasi ul{
      padding: 0;
      list-style: none;
      display: inline-block;
      margin: 0;
    }
    
    .navigasi li{
      float: left;
      margin: 0 10px;
    }

    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 classcol-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.

  5. 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.

    <!--HEADER SECTION-->
    <header class="row">
      <div class="logo col-md-12 col-sm-12">
        ~~~
      </div>
      <div class="navigasi col-md-12 col-sm-12">
        ~~~
      </div>
    </header>
    
    <!--MAIN BODY SECTION-->
    <main class="row">
      <div class="konten col-md-9 col-sm-6">
        ~~~
      </div>
      <div class="sidebar col-md-3 col-sm-6">
        ~~~
      </div>
    </main>
    
    <!--FOOTER SECTION-->
    <footer class="row">
      <div class="footer col-md-12 col-sm-12">
        ~~~
      </div>
    </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.

    <!--HEADER SECTION-->
    <header class="row">
      <div class="logo col-md-12 col-sm-12 col-xs-12">
        ~~~
      </div>
      <div class="navigasi col-md-12 col-sm-12 col-xs-12">
        ~~~
      </div>
    </header>
    
    <!--MAIN BODY SECTION-->
    <main class="row">
      <div class="konten col-md-9 col-sm-6 col-xs-12">
        ~~~
      </div>
      <div class="sidebar col-md-3 col-sm-6 col-xs-12">
        ~~~
      </div>
    </main>
    
    <!--FOOTER SECTION-->
    <footer class="row">
      <div class="footer col-md-12 col-sm-12 col-xs-12">
        ~~~
      </div>
    </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

Share :


Leave a Reply

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

Related Articles

Latest Posts

Tutorial : Cara Membuat Template WordPress – Part 2
Tutorial : Cara Membuat Template WordPress – Part 2
Category : Wordpress | October 13th, 2017
388 | 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
707 | 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
479 | 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
Tutorial : Cara Membuat Template WordPress – Part 1
Tutorial : Cara Membuat Template WordPress – Part 1
Category : Wordpress | October 9th, 2017
582 | 0

Halo para pembaca Gaswad, pada artikel ini penulis ingin membahas tentang bagaimana cara membuat template WordPress. Kenapa penulis membuat artikel ini tidak lain karena ingin berbagi pengetahuan kepada kalian khususnya para pengguna CMS WordPress se...

Continue reading
Pengertian Page View, Visitor Dan Bounce Rate
Pengertian Page View, Visitor Dan Bounce Rate
Category : Others | October 9th, 2017
385 | 0

Sebenarnya pada artikel kali ini penulis ingin membuat tutorial bagaimana cara membuat template WordPress, menimbang WordPress merupakan salah satu CMS yang paling banyak di gunakan saat ini. Tapi berhubung tutorialnya agak panjang dan belum rampung ...

Continue reading
Tutorial : Cara Membuat Web Responsif (Mobile Version) Dengan Bootstrap – Part 2 (Complete)
Tutorial : Cara Membuat Web Responsif (Mobile Version) Dengan Bootstrap – Part 2 (Complete)
Category : Tutorials | October 5th, 2017
952 | 0

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...

Continue reading
Tutorial : Cara Membuat Web Responsif (Mobile Version) Dengan Bootstrap – Part 1
Tutorial : Cara Membuat Web Responsif (Mobile Version) Dengan Bootstrap – Part 1
Category : Tutorials | September 30th, 2017
1196 | 0

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 : Apa It...

Continue reading
Cara Mengetahui Kecepatan Page Load Website
Cara Mengetahui Kecepatan Page Load Website
Category : Programmings | September 29th, 2017
469 | 0

Pada artikel kali ini penulis ingin memberikan trick bagaimana cara mengetahui kecepatan Page-Load website kalian, mungkin beberapa dari kalian masih belum tahu seberapa cepat kecepatan website yang kalian miliki pada saat website tersebut di akses a...

Continue reading
​Apa Itu Web Framework?
​Apa Itu Web Framework?
Category : Others | September 29th, 2017
675 | 0

Beberapa dari kalian apalagi yang masih pemula dalam bidang pemrograman website pasti masih awam betul dengan yang namanya Framework. Framework menurut Wikipedia merupakan sebuah aplikasi yang di desain untuk mendukung pengembangan dalam membangun se...

Continue reading
Tutorial : Cara Membuat Web Statis Sederhana Dengan HTML
Tutorial : Cara Membuat Web Statis Sederhana Dengan HTML
Category : Tutorials | September 28th, 2017
6336 | 2

Kali ini kita akan membuat website statis sederhana, kenapa statis? Karena ketika selesai dalam pembuatannya maka konten website yang sudah kita masukan tidak bisa di ubah lagi alias fixed. Loh’, kalo gitu ngga bisa update isi website donk?? Ka...

Continue reading
Tutorial : Menggunakan Font-Awesome Pada Website
Tutorial : Menggunakan Font-Awesome Pada Website
Category : Tutorials | September 26th, 2017
450 | 0

Berikut cara instalasi salah satu simbol ligature yang paling banyak di gunakan oleh para pengembang website, yaitu Font-Awesome. Bagi kalian yang masih belum mengenal apa itu simbol ligature bisa merujuk ke link berikut untuk menambah wawasan dan re...

Continue reading
Tutorial : Instalasi WordPress
Tutorial : Instalasi WordPress
Category : Wordpress | September 20th, 2017
471 | 0

Untuk kalian yang ingin belajar bagaimana cara instlasai CMS WordPress kali ini penulis sengaja membuat artikel ini agar kalian mendapatkan referensi tambahan sebelum menggunakan CMS WordPress. Untuk instalasi CMS WordPress sama sekali tidak susah, m...

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

  • 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
  • Oct
    29
    2015
    5 Cara Mempercepat Loading Website
    Berbagai macam cara dan usaha yang kita lakukan untuk membuat website kita menjadi benar-benar ...
    Read more
  • Feb
    03
    2015
    Nih! 3 Cara Redirek Domain Yang Baik Dan Benar
    Redirek domain secara definisi berarti mengarahkan domain satu ke domain yang lain. Emang bisa?...
    Read more
  • More articles
Tutorials

  • Nov
    13
    2017
    Cara Menambah Ads Unit Atau Blok Iklan Adsense
    Halo para pembaca Gaswad yang ganteng dan yang cantik-cantik, yang jelek jangan kesinggung ya. ...
    Read more
  • Oct
    16
    2017
    Cara Mendapatkan Uang Dengan Google Adsense
    Setelah beberapa waktu lalu di kantor penulis sempat heboh-hebohnya di karenakan fitur dari Goo...
    Read more
  • Oct
    12
    2017
    Cara Mendaftarkan Dan Melakukan Verifikasi Domain Di Google Search Console
    Pada pertemuan kali ini (udah kayak anak kuliahan ajah), penulis ingin berbagi pengetahuan tent...
    Read more
  • Oct
    05
    2017
    Tutorial : Cara Membuat Web Responsif (Mobile Version) Dengan Bootstrap – Part 2 (Complete)
    Hallo… para pembaca Gaswad yang baik dan budiman, yang ganteng dan yang cantik, yang jele...
    Read more
  • Sep
    30
    2017
    Tutorial : Cara Membuat Web Responsif (Mobile Version) Dengan Bootstrap – Part 1
    Bootstrap merupakan salah satu CSS Framework yang paling banyak di gunakan oleh para pengembang...
    Read more
  • More articles
Others

  • 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
  • Feb
    25
    2015
    Cara Memasang Robots.txt Di Website
    Yups! Di jamin pasti banyak yang bingung dengan file robot ini, bagi yang masih awam pasti bera...
    Read more
  • Nov
    26
    2014
    DIY – Lampu Indikator Super KIPS Kawasaki Ninja 150 SS/R/RR
    Bagi kalian pengguna motor Kawasaki Ninja 150 SS/R/RR pasti pernah ngerasain yang namanya ̵...
    Read more
  • More articles
Page generated in : 635.35 ms